Seguramente te has fijado. Las páginas web cada vez son más visuales, contienen más imágenes y estas tienen mayor protagonismo. Es posible que tu propia web cuente con una cantidad considerable de elementos gráficos.
Aunque esto hace que sean más atractivas, también puede repercutir negativamente en distintos aspectos si las cosas se hacen mal. Especialmente en la velocidad de carga y, de rebote, en el posicionamiento en buscadores.
Afortunadamente, existen medios para evitar estas consecuencias y seguir utilizando una buena cantidad de fotos. Por eso, hoy voy a hablarte de los motivos para optimizar las imágenes de tu web y cómo hacerlo correctamente.
Índice
Optimizar las imágenes para tu web. Por qué debes hacerlo
Pues como te acabo de comentar, es importante optimizar las imágenes para evitar lentitud en la carga y que el usuario abandone el sitio antes de tiempo.
Además, esta velocidad repercute directamente en el posicionamiento en buscadores, ya que es uno de los factores que tienen en cuenta, especialmente Google. A más tiempo de carga, peor posición.
Y por último, también debes optimizar tus imágenes para reducir el espacio de disco en tu servidor. Imagen a imagen puedes acabar ahorrando muchos megas y, por tanto, algunos euros al año.
Reducir y comprimir las imágenes de tu web para optimizarlas
A la hora de cargar rápido una página web, incluidas las imágenes, un buen sistema de caché es fundamental. Pero como hablaremos de eso más detenidamente en otra ocasión, hoy vamos a centrarnos únicamente en las medidas básicas que debes tomar para reducir y comprimir imágenes cada vez que las subes a tu web:
1. Revisa a qué tamaño máximo se va a mostrar esa imagen y evita subirla con medidas mayores. ¿Para qué quieres un fichero con 3.000 píxeles de ancho si nunca se mostrará con un tamaño superior de 1.700?
2. Reduce la resolución a 72 ppp. Pocas pantallas muestran resoluciones superiores. Y las que lo hacen no pasan de 96ppp. Si necesitas proporcionar imágenes aptas para impresión, es preferible hacerlo en un fichero aparte, distinto del que muestras en la web (ya sea en tu propio servidor o en uno externo) e incluir un enlace de descarga.
3. Comprime cada imagen para eliminar toda la información innecesaria. Los metadatos de tipo autor, cámara utilizada o fecha de la imagen aportan poco en una página web, pero ocupan espacio y ancho de banda.
4. Usa el formato WebP si es posible, sobre todo si trabajas con imágenes grandes. Está menos extendido que los típicos JPG y PNG, pero puede merecer la pena. Es un tipo de imagen especialmente diseñado para web que permite grandes tamaños con poco peso.
5. Elige el tipo de archivo adecuado. Dependiendo de su configuración, un fichero JPG puede ser bastante más liviano que un PNG. Salvo que necesites transparencias u otras características específicas del segundo, seguramente es mejor decantarte por el primero.
Reducir el tamaño de las fotos. Online y offline
Igual soy yo, pero tengo la sensación de que a la mayoría nos gusta aplicar el principio «más vale que sobre que no que falte», también conocido como «burro grande, ande o no ande».
Pero tal como ya te he comentado, en el tema de las imágenes esta forma de pensar puede ir en nuestra propia contra.
Por eso, si descargaste una imagen en un tamaño demasiado grande para el que quieres utilizar, necesitas reducirla. ¿Cómo? Tienes varias maneras.
Uno de los programas más conocidos para el tratamiento de imágenes sin duda es Photoshop (o su primo de distribución libre, GIMP). Sin embargo, es posible que si sólo quieres pequeñas tareas, como la reducción de tamaño y resolución, estos softwares sean demasiado.
Una alternativa que a mí personalmente me gusta mucho es XnView. Se trata de un programa de código abierto, gratuito para particulares y mucho menos pesado que los dos anteriores. Aun así, te permitirá hacer bastantes modificaciones sobre cualquier foto, desde reducirlas hasta mejorar la iluminación o aplicar algunos filtros.
Si prefieres reducir fotos online, sin instalar ningún software, puedes decantarte por editores como Fotor, PineTools o incluso el propio Canva.
Comprimir imágenes para web, online y sin perder calidad
Aunque todavía hay gente que piensa que son sinónimos, «reducir» y «comprimir» significan cosas distintas, aunque estén relacionadas entre sí.
«Reducir» se refiere al número de píxeles, a la medida con que se muestra. «Comprimir» tiene que ver con el tamaño final del archivo en KB.
El procedimiento de comprimir imágenes para una web pasa por varios procesos que ya se han mencionado en el artículo, como bajar la resolución o eliminar los metadatos, pero también por disminuir el número de colores utilizados en la imagen.
Aunque pueda sonar a una reducción de calidad, lo cierto es que la mayoría de compresiones bien hechas son casi imperceptibles. Un ojo poco entrenado ni se dará cuenta de la diferencia entre una imagen comprimida y la original.
¿Cómo puedes comprimir imágenes sin perder calidad? Con programas específicos para ello como Compressor JPG/PNG, Compressor.io o Compress Now.
Plugins para comprimir imágenes en WordPress
Reconozco que están lejos de ser mi opción favorita, pero existen plugins que permiten reducir y comprimir las imágenes automáticamente al subirlas a tu web. Incluso el propio WordPress reduce las imágenes que superan una medida desde su versión 5.3, aunque esta opción necesita mucha mejora desde mi punto de vista.
En mi opinión, es mejor controlar el tamaño de imágenes manualmente para tener un mayor control sobre el proceso y evitar consumir espacio inútil en el servidor. Pero si por el tipo de web que tienes subes muchas imágenes diariamente o son varias personas distintas las que se encargan de esta tarea, puedes recurrir a plugins para reducir y comprimir imágenes y mantener un cierto control.
WP Smush.it, EWWW Image Optimizer o Imsanity son algunos de ellos.
Los dos primeros se centran en comprimir las imágenes sin pérder calidad (tanto las nuevas como las que ya has subido anteriormente), y el tercero en establecer un tamaño máximo para cualquier imagen que subas a la biblioteca de medios.
Como en su página del repositorio ya explican qué hacen y cómo se configuran, no me parece oportuno alargar la entrada repitiéndolo. No obstante, si te gustaría información más detallada sobre alguno de ellos, házmelo saber.
¿Cómo están funcionando las imágenes de tu web? ¿Ralentizan la carga? ¿Son demasiado grandes? ¿Tal vez necesitas reducirlas y comprimirlas? Si nunca habías prestado atención a este aspecto, es el momento de que empieces a hacerlo.
Y por cierto, si las imágenes no son propias, recuerda añadir siempre los créditos apropiados o usar imágenes libres de derechos.
Mantenimiento WordPress
Con Backups y actualizaciones, soporte para dudas, tareas dentro de la web y mucho más…
