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.

¿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 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).

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

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

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

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: