Consigue Divi desde la web oficial a un precio especial
Ver Más

patrocinado

La mejor membresía para DiviFans

Aprovecha el plan más completo para DiviFans. Con una membresía de 1 AÑO de Guaupress obtienes: Descarga de +1000 plugins y temas WordPress, incluído +20 plugins Divi premium, por 1 año; API KEY del tema Divi para sitios Ilimitados, Pack de +500 plantillas Premium para Divi, listas para importar. La mejor membresía para DiviFans. Mira a detalle lo que ofrecemos haciendo click al botón de abajo:

Cómo optimizar imágenes para web – Mis mejores Herramientas

por | Feb 2, 2022 | Páginas Web | 0 Comentarios

PATROCINADO

El Mejor Hosting WordPress Divi. Estable, Seguro y Rápido.

Prueba el servicio de hosting más confiable y conocido del mercado: BANAHOSTING, sin riesgos con un Súper Descuento del 95% en cualquier plan. Cupón de descuento: BH1D

Que tal amigos, hoy vamos a tocar un tema sumamente importante: Cómo optimizar Imágenes para web.

Esto es algo que muchísimas veces se deja de lado por no conocer su trascendencia.

Incluso he visto muchos casos de colegas míos que se dedican al diseño de paginas web, que se centran únicamente en la parte estética. Y dejan de lado el rendimiento de la web, con imágenes de pesos lovecraftnianos.

Por otro lado, algunos otros saben lo importante que es, pero no saben cómo implementar las optimizaciones o cómo hacerlo de manera eficiente. Por eso hoy también veremos qué herramientas utilizo yo en mi dia a día para lograr éste fin.

 

[toc content=".contenido"]

¿Por qué es importante optimizar Imágenes para web?

Con optimización de las imágenes nos referimos a disminuir su peso y en la medida de lo posible que nuestras imágenes no pierdan calidad en el proceso. Este punto es un factor que se tiene siempre en cuanta al momento de realizar un buen diseño de páginas web.

1. Afecta la velocidad de carga de la página

Mientras menos pesen las imágenes, menos pesará nuestra página en general. Una página más ligera carga más rápido, simple.

2. SEO

Esto se desprende de lo anterior. La velocidad de carga de una web es un factor importantísimo que toma Google para posicionar sus webs. Ya que la velocidad influye en la experiencia de usuario.

3. Disminuye el uso de ancho de Banda de tu Hosting

Algunos Hosting tiene un límite en la cantidad de información que pueden transmitir en simultáneo. Imagina que tu web tenga un peso elevado y muchas personas descarguen la información para visualizarla, a la vez. Podrías llegar al límite del Hosting y al pasar ésto, tu web simplemente se caería.

«Optimización de las imágenes se refiere a disminuir su peso y en la medida de lo posible que nuestras imágenes no pierdan calidad en el proceso»

Cómo optimizar Imágenes para la web

Cómo logramos optimizar las Imágenes

Vamos a lograrlo modificando principalmente éstos tres factores:

1. Utilizando el formato adecuado

Hay muchos formatos de Imágenes. El más recomendado para web es webp, aunque no trabaja con todos los navegadores. Por lo que el más usado es el conocido jpg. Trata de usar éste formato de imagen en la medida de los posible en tu página web. Otros formatos como el png tienden a pesar más, úsalo sólo cuando sea necesario (Por ejemplo, cuando necesitas una imagen con transparencia).

Formatos de imagen

2. Utilizando el tamaño adecuado

He visto casos de secciones de 500px en las cuales utilizan imágenes de 2000px, es el cuádruple de lo que se necesita.  y por ende un peso extra innecesario. Utiliza imágenes con el tamaño exacto de lo que necesitas

3. Comprimiendo las Imágenes

Éste es quizá el factor más importante. SIEMPRE, SIEMPRE comprime tus imágenes antes de subirlas a tu página web. Hay muy buenas herramientas de compresión online gratuitas, con las cuales no se pierde nada de calidad en la imagen y sin embargo disminuyen considerablemente el epso de las mismas.

«SIEMPRE, SIEMPRE comprime tus imágenes antes de subirlas a tu página web.«

Procedimiento y herramientas que yo uso

Todos los factores que mencionamos anteriormente pueden ser modificados online. La web que yo utilizo en mi dia a dia es iloveimg.com, dentro de ésta web hay diferentes herramientas:

Paso 1 – Convertir a JPG

Ésta fantástica herramienta de iloveimg nos permite convertir desde los siguientes formatos de imagen: PNG , GIF , TIF , PSD , SVG , WEBP , HEIC o RAW a formato JPG . Que como mencionamos anteriormente sería lo recomendable.

El procedimiento es muy sencillo, simplemente arrastras y sueltas tus imágenes en la herramienta y los archivos se cargarán. Una vez cargados tienes la opción de poder girar alguna imagen si desea (Opción que aparece al pasar el ratón sobre alguna imagen cargada).

Para empezar la conversión simplemente bastará con hacer click al botón de “Convertir a JPG”.

¡La herramienta te permite convertir hasta 60 imágenes a la vez!

Al terminar de procesarse, se descargará automáticamente un zip que contendrá todas las imágenes convertidas.

Ir a la Herramienta

Cómo optimizar Imágenes para web

Paso 2 – Cambiar el tamaño de la imagen

Como vimos, otro punto importante para optimizar imagenes para web, es utilizar el tamaño adecuado. Para lo cual también iloveimg nos ofrece una herramienta.

Para empezar, Igual que con la anterior, simplemente arrastramos y soltamos las imágenes que queremos redimensionar. Una vez cargadas, podremos ver las opciones que nos ofrece:

  1. Redimensionar por píxeles: Nos permite redimensionar las imágenes a una altura o ancho de píxeles específicos.
  2. Redimensionar por porcentaje: Nos permite redimensionar las imágenes pudiéndolas hacer un 25, 50 o 75% más pequeñas.

Luego de seleccionar la opción que deseamos, hacemos click al botón “Redimensionar imagen”.

Ir a la herramienta

Opciones de redimension de imagenes

Paso 3 – Comprimiendo Imágenes

La última herramienta que veremos hoy es la de compresión de imágenes. Cuyo procedimiento de uso es similar a las anteriores. Cabe mencionar que para éste punto ya se supone que estás comprimiendo imágenes que previamente ya haz convertido a jpg y redimensionado al tamaño adecuado. Suelo dejar el tema de la compresión para el final.

Al terminarse de procesar, las imágenes se descargarán en un zip.

Y por fin tus imágenes ya estarán listas para poderse subir a la web sin que generen problemas de rendimiento.

Ir a la herramienta

Comprimir Imágenes

Si haz seguido todos los pasos para optimizar tus imágenes, notarás que habrá una diferencia enorme entre el tamaño original de la imagen y la que tiene al final. Genial, estás ahora un paso más cerca a qué tu web alcance velocidades de carga que antes eran impensables.

En próximos post seguiremos hablando de temas relacionados al rendimiento web, así que para no perderte nada, suscríbete a mi lista de correos.

Te puede Interesar:

Beneficios de tener una Página Web

5 Beneficios de tener una Página Web

¿Para qué tener una página web? ¿En qué ayudará un sitio web a mi negocio? Hoy responderemos esas preguntas y más…

Beneficios de tener una Página Web

5 Beneficios de tener una Página Web

¿Para qué tener una página web? ¿En qué ayudará un sitio web a mi negocio? Hoy responderemos esas preguntas y más…

Si te gustó el contenido

Apóyanos compartiendo en tus redes, nos ayudarías muchísimo. Y haz click en la quinta estrella de abajo, para saber que éste tema te interesa y hacer artículos similares.

5/5 - (4 votos)

No olvides que subo trucos nuevos cada semana suscríbete a mi canal y dale a la campanita para que te enteres cuando suba uno nuevo.

Hasta la próxima!!

Artículos Relacionados

Victor Aquino

Experto en WordPress y Divi, entusiasta del SEO, Copywriting, Marketing Digital y Negocios Online en general. Amante de la vida y tu webmaster de confianza.

Contactar

¿Quieres invitarme un cafécito?

Así podré estar más despierto para crear más contenido gratuito como éste 😛

Click Aquí

¿Tienes dudas?

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Hosting WordPress

El mejor Hosting Premium optimizado para WordPress y Divi, al mejor precio.

Licencias 1 Sitio

Divi Theme/ Builder

Ver Más

Divi Machine

Ver Más

Divi Bodycommerce

Ver Más

Divi Flash

Ver Más

Últimos Artículos

Q

¿Quieres Desbloquear TODO el contenido?

Registrándote en nuestra web tendrás acceso a TODO el contenido gratuito oculto. Deja tu correo aquí abajo para que te enviemos un mail con el formulario de registro gratuito.