¿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
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.
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.
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.
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.
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.
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:
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!
¿Te encuentras atrapado en la resolución de problemas? Desde formular la pregunta adecuada hasta aprovechar… Leer más
Como en todas las áreas del diseño, el color tiene un papel fundamental. Comprenderlo y… Leer más
Ha llegado el momento. Al fin tenemos entre nuestras manos la primera gran actualización de… Leer más
¿No has oído hablar de Zapier todavía? ¿Quizás te han hablado por encima de Zapier… Leer más
Imagina que un usuario que esté ubicado en Inglaterra encuentre tu web en la versión… Leer más
En este artículo no solo te explicaremos algunas formas para conseguir quitar una página de… Leer más