¿Sabes cómo optimizar imágenes para web? Es frecuente encontrarse con usuarios que, como es natural, desean subir imágenes a sus sitios web, y muchos de ellos se hacen esta pregunta. En este artículo te traemos varios consejos para optimizar las imágenes de tu sitio web. ¿Te animas?
Índice de contenidos
¿Por qué debería optimizar imágenes para web?
Lo primero que hay que destacar es la necesidad de optimizar las imágenes para lograr un buen diseño web. Puede parecer lógico pensar que a mayor calidad de imagen de las fotos de una web, mejor se verá ésta, pero no es tan sencillo.
Hemos de tener en cuenta que lo que ha de primar en nuestra web es la «experiencia de usuario». Seguro que ya has oído hablar de este término con anterioridad. Básicamente se refiere a cómo percibe el usuario la navegación y el uso de nuestro sitio web. Es por eso que aunque una imagen se vea algo mejor que otra, si ello conlleva un incremento en el tiempo de carga del sitio web o un gasto inapropiado de transferencia de datos, puede ser contraproducente.
Debemos reducir los tiempos de carga de la web al mínimo para mejorar la experiencia de usuario y por ende, el SEO. Los motores de búsqueda como Google penalizan los sitios web pesados y de cargas excesivas. Se ha demostrado que los tiempos de carga excesivos hacen que los visitantes no permanezcan en la web, aumentando así la tasa de rebote. En nuestro artículo dedicado a los términos del SEO te explicamos qué significan estos términos.
Si quieres averiguar si tu web es algo lenta puedes comprobarlo tú mismo. Google pone a tu disposición varias herramientas de desarrollo web con las que comprobar el rendimiento de tu sitio web. Mediante PageSpeed Insights puedes medir su velocidad de carga.
Dicho esto, no te asustes, usar imágenes en tu sitio web es algo clave dadas las estadísticas. Se estima que nueve de cada diez usuarios leen páginas y artículos con imágenes antes que aquellos que carecen de ellas.
¿Cómo puedo optimizar imágenes para web?
Existen varias opciones para optimizar imágenes para web. La más avanzada y personalizable probablemente sea hacerlo tras tratarlas en nuestro software de edición habitual. Es común retocar las imágenes antes subirlas a la web, bien sea editando sus colores, la luz, o simplemente redimensionandolas.
Teniendo esto en cuenta, una vez vayamos a guardarlas o exportarlas, podemos proceder a optimizarlas para web. Muchos editores de imagen cuentan con la opción «Guardar para web», donde podremos elegir el formato de salida, su compresión y pérdida de calidad.
Factores a tener en cuenta a la hora de optimizar imágenes para web
Formato
El formato por excelencia en web es el JPG por su excelente nivel de compresión y su leve pérdida de calidad. No obstante, en muchos casos necesitamos recurrir a formatos con soporte de canal alfa o transparencia como el PNG. Éste también tiene una compresión bastante elevada, pero menor que la del JPG.
Mención especial para los formatos GIF. El que fuera por durante mucho tiempo rey de gráficos animados, con la aparición de formatos como el WEBM, el PNG animado y otros, ha quedado relegado en un segundo lugar en sitios web. Debido a su mala relación calidad/peso ha quedado casi en desuso como imagen fija, no así como sustituto para breves clips de vídeo sin audio.
Otra de las opciones a la hora de incorporar imágenes (sobre todo logotipos y figuras planas) son los formatos vectoriales como el SVG. Al no basarse en un mapa de bits, su peso es ínfimo y re-escalable sin perdida alguna. Además, prácticamente cualquier navegador lo soporta.
Tamaño
Cuando queremos implementar una imagen en web hemos de plantearnos la función de esta misma. Si va a ser una imagen que cubra por completo la ventana del navegador, será conveniente que cuente con un ancho considerable. En el caso de imágenes incrustadas en contenedores o secciones que nunca van a ocupar un ancho excesivo no tiene sentido incorporar tamaños tan grandes. De este modo, un fondo de pantalla puede tener 1500px de ancho mientras la foto de un avatar bastará con 300px de ancho aproximadamente.
A la hora de preparar imágenes para web debemos prestar especial atención a la resolución. Ésta viene dada por puntos por pulgada (ppp) o «dots per inch». Para web considera más que suficiente una resolución de 72ppp, pero la aparición de pantallas de mayor calidad, capaces de soportar densidades de puntos mayores.
Compresión
En cuanto a la compresión de imágenes, resulta esencial plantearse la calidad que podemos sacrificar en pos de la reducción de peso. Hay casos en los que no es necesario comprimir las imágenes en exceso, o la web requiera una alta calidad de imágenes. Para esos casos puntuales existen varias herramientas y utilidades alternativas.
Herramientas para optimizar imágenes para web
La mejor opción, siempre que sea posible, es la de tratar nosotros mismos las imágenes y especificar el tamaño, la resolución y el nivel de compresión. Para ello los editores principales como Adobe Phosothop o Gimp entre otros, poseen opciones para exportarlas a nuestro gusto.
Cuando esto no es posible, o queramos ahorrar tiempo con una compresión más que aceptable, podemos hacer uso de herramientas como las siguientes:
- Kraken.io: Similar a Tinypng. Posee hasta tres modos de compresión a elegir.
- Tinypng: Un fabuloso y rápudo compresor de JPG y PNG que garantiza un alto nivel de compresión. La versión de prueba permite comprimir lotes de 20 imágenes. Además, cada imagen puede pesar hasta 5 MB.
- WebResizer.com: Además de ofrecer una buena compresión, permite editar levemente las imágenes, pudiendo cortarlas, rotarlas, etc…
- Compressor.io: Comprime lotes de imágenes de hasta 10MB de tamaño cada una. Ofrece dos tipos de compresión y soporta JPG, PNG, GIF y SVG.
Conclusión
Debido a las limitaciones tecnológicas actuales nos vemos obligados a recurrir a procesos algo tediosos como la optimización de imágenes para web. No obstante, el futuro parece esperanzador y con la aparición de infraestructuras como el 5G y otras tecnologías, puede que no sea necesario recurrir a ninguno de estos procesos. Mientras tanto, esperamos que nuestro artículo te haya resultado de ayuda. ¡Nos vemos en el siguiente!