C√≥mo reducir el tama√Īo de las im√°genes

Por Ricardo Cruz, 14 de Enero de 2019. Publicado en Rendimiento. 9 minutos de lectura.

Optimizar el tama√Īo de las im√°genes ahorra ancho de banda tanto en tu servidor, como en la conexi√≥n del usuario, haciendo adem√°s que carguen m√°s r√°pido.

Para que tu p√°gina sea eficiente en este sentido, tienes que hacerlo de dos pasos. Por un lado, las dimensiones del fichero de la imagen que vas a mostrar, tienen que corresponderse con las dimensiones que va a tener en la web. Por otro lado, se puede conseguir que ocupen menos espacio reduciendo un poco la calidad.

Ten en cuenta además que los usuarios que te visitan desde un dispositivo móvil tienen cantidades determinadas de transferencia mensual, en sus tarifas de datos. He visto páginas web con portadas que ocupan más de 40 MB… y sí, has leído bien.

¬°Vamos a ello!

Sirve las im√°genes en el tama√Īo apropiado

Enviar ficheros de miles de p√≠xeles, en lugar de cientos, es m√°s com√ļn de lo que te podr√≠as llegar a imaginar. Si IMDb, eBay o Microsoft Live caen en este error, estando todas en el Top 50 de p√°ginas web m√°s visitadas del mundo, imag√≠nate qu√© te puedes esperar de sitios m√°s peque√Īos.

Tener que enviar im√°genes de gran tama√Īo cuando se van a mostrar mucho m√°s peque√Īas es una p√©rdida de tiempo para el usuario, pero adem√°s te supondr√° un coste extra en determinados servicios de hosting, como en Amazon Web Services cuya tarifa var√≠a, entre otras cosas, en funci√≥n de la transferencia de datos mensual que consumas.

Solucionarlo es tan sencillo como abrir cualquier editor de fotos y redimensionar la imagen. Por ejemplo, en mi caso, el tama√Īo que puede tener una imagen en un post es de entre 300 y 650 p√≠xeles, haciendo que pesen entre 15 y 100 KB cada una.

Vamos a hacer la prueba con esta imagen: GTmetrix de Outlook Live

La imagen original, un pantallazo de GTmetrix, mide 1417x856px (144ppp), ocupando 1.4MB. Una vez que la redimensionamos a 650x357px (96ppp), el peso baja a 283KB. Si adem√°s la comprimimos y la optimizamos con una herramienta (sigue leyendo para aprender a hacerlo).

¬°El resultado final es de 91KB!

Ejemplo de optimización de imágenes

En macOS, basta con abrir la imagen con la aplicaci√≥n ‚ÄúVista previa‚ÄĚ, hacer click en ‚ÄúHerramientas‚ÄĚ y luego en ‚ÄúAjustar tama√Īo‚ÄĚ. Finalmente, he puesto el tama√Īo al que quiero redimensionarla y listo.

Redimensionar imagen en macOS usando Vista Previa

Aunque normalmente se ha dado por est√°ndar que los puntos por pulgada de las im√°genes, en monitores, es de 72ppp, y 300ppp para la impresi√≥n, lo cierto es que en dispositivos con ‚ÄúPantalla Retina‚ÄĚ, o similar, se ver√≠an pixeladas. 96ppp es un buen punto medio en mi caso, aj√ļstalo seg√ļn tu criterio, y el tipo de usuarios que tengas o quieras atraer.

En otros sistemas operativos el procedimiento sería similar.

Cómo elegir el formato de tus fotos

Antes de ir de lleno a las herramientas para optimizar las im√°genes, hay algo m√°s que debes saber. Seg√ļn el tipo de imagen que vayas a mostrar, deber√≠as utilizar el formato de fichero que mejor calidad obtenga con el menor espacio posible.

Así, para fotografías y retratos, merecerá siempre la pena que sean guardados en JPG. Para gráficos tipo infografías o pantallazos, la teoría dice que el PNG es el rey, ya que conserva muy bien definidos los trazos y mantiene unos colores vivos. Estos ficheros ocupan más que el anterior pero, a cambio, admiten transparencia.

Foto JPG vs PNG Foto original: Unsplash

Como puedes ver, no merece la pena usar PNG en fotograf√≠as, ya que apenas estamos ganando calidad con el PNG, √ļnicamente incrementamos el tama√Īo. Sin embargo, f√≠jate la diferencia si hacemos la misma prueba con un pantallazo, ¬Ņpuedes ver los p√≠xeles extra√Īos?:

Gr√°ficos PNG vs JPG

A la hora de la verdad, salvo que el gráfico tenga un fondo transparente, un JPG se ve suficientemente bien, ya que la pérdida de calidad nada más que se nota utilizando una lupa.

Los gráficos animados, si no se pueden resolver mediante animaciones de HTML y CSS, no queda otra que utilizar el formato GIF. Es muy pesado y deberás pensarte dos veces si realmente aporta valor utilizar una imagen así.

Por alg√ļn motivo se utilizan en exceso en los posts de los blogs, por hacer la gracia, sin caer en la cuenta del impacto negativo de rendimiento.

En cuanto a logotipos o cualquier otro tipo de gr√°fico vectorial, el formato ideal es SVG. Ocupan muy poco y la calidad siempre va a ser perfecta, independientemente del tama√Īo al que se muestre. Viene especialmente bien con la entrada en escena de los dispositivos con pantallas de mayor concentraci√≥n de p√≠xeles por pulgada, porque nos ahorramos tener que generar una imagen para pantallas normales, y otra para pantallas superiores.

El logo de mi web es un SVG, admite transparencias, o agrandarlo de manera infinita, sin perder calidad:

Logotipo

¬°Y todo en menos de 20KB!

Siempre y cuando tenga sentido para tu caso concreto, si puedes elegir, aquí tienes mi ranking de formatos con mejor relación calidad/peso de imagen:

  1. SVG
  2. JPG
  3. PNG
  4. GIF

Herramientas gratis para reducir el tama√Īo de las im√°genes

ImageOptim (macOS)

Si tienes un ordenador Mac, ImageOptim es libre y gratuito. Te permite optimizar im√°genes de una gran variedad de formatos. Es el programa que uso para este blog.

ImageOptim para macOS

Basta con arrastrar y soltar los ficheros que quieras optimizar, y listo, esta herramienta se encargar√° del resto.

Gimp

En el caso de otros sistemas operativos, Gimp te podr√° servir. Es la competencia libre a Adobe Photoshop, por lo que puede resultarte tratar de matar moscas a ca√Īonazos, ya que es un programa mucho m√°s gen√©rico.

Gimp

Herramientas online

Si lo que buscas es una web que haga el trabajo por ti, te puedo recomendar dos:

Aunque no puedas ajustar al detalle tus preferencias, estas dos herramientas har√°n un muy buen trabajo, sin complicarte la vida. Usa la que m√°s te guste.

Conclusión

Algo tan l√≥gico como enviar la imagen que quieres mostrar al tama√Īo adecuado, suele ser m√°s que suficiente. Optimiz√°ndolas, har√°s que tu sitio web vuele incluso utilizando gran cantidad de im√°genes.

Ignorar este consejo, impactará en la velocidad de carga de tal manera que tus usuarios podrían simplemente desistir, abandonando tu página web, ya que suelen ser los ficheros más pesados que tienen que descargarse, junto con las tipografías.

¡Acuérdate de comprobarlo! :)

Sigue leyendo

Descubre cómo hacer volar tu web con mi informe personalizado