Las imágenes son una parte esencial de cualquier sitio web, pero si no se optimizan adecuadamente, pueden ralentizar la velocidad de carga y afectar el rendimiento. Si te interesa el posicionamiento en buscadores y que los usuarios tengan una buena experiencia navegando por tu web, NECESITAS optimizar las imágenes. Esto puede ser un proceso un poco coñazo tedioso, ¡en especial si no se hace correctamente desde un principio y te toca corregirlo! Por eso en este artículo te cuento algunas de las formas de optimizar imágenes más comunes.
Pero antes, pros y contras de la optimización de las imágenes (porque no todo es positivo)
Pros:
- Mejora la experiencia de usuario: como ya se mencionó, las imágenes optimizadas se cargan más rápido, lo que hace que la navegación sea más cómoda y satisfactoria para los usuarios.
- Ahorro de espacio en el servidor: las imágenes más pequeñas ocupan menos espacio en tu servidor, lo que puede ahorrar dinero en costos de hosting web.
- Mejora el SEO: Google valora la velocidad de carga, por lo que una carga más rápida puede mejorar tu clasificación en los resultados de búsqueda.
Contras:
- Pérdida de calidad: optimizar demasiado una imagen suele llevar a pérdida de calidad. Tampoco queremos tener imágenes en la web en las que se puedan contar los cinco píxeles que tiene. Hay que encontrar el equilibrio.
- Requiere tiempo: optimizar imágenes lleva su tiempo, especialmente si tienes muchas en tu sitio web.
Consejos para optimizar imágenes en WordPress
1. Elije el formato correcto
Utiliza el formato de imagen adecuado para el tipo de contenido. Si quieres que haga un artículo específico sobre esto, ¡contáctame! Aquí tienes un breve resumen:
- JPG: se suele usar para fotografías e imágenes complejas. Formato más ligero y MUY comprimible.
- PNG: típico de ilustraciones e imágenes con fondos transparentes. No es tan comprimible como el JPG y pierde menos calidad en el proceso.
- WEBP: formato creado por Google específicamente para web. Es menos pesado, acepta transparencias y es el ideal (en mi humilde opinión) para el contenido de tu web.
- GIF: imágenes animadas. Intenta no cargar tu web con estas si no es necesario.
- SVG: si tienes ilustraciones y elementos vectorizados, sube el SVG en lugar del PNG, anda. Ahorras espacio sin perder calidad.
2. Redimensiona las imágenes
Ajusta las dimensiones de la imagen al tamaño real en el que se mostrará en tu sitio web. Si tu web tiene contenedores en las secciones con un ancho de, por ejemplo, 1366 píxeles, no cargues una imagen con 2000px de ancho, no tiene sentido.
3. Comprime las imágenes
Tienes diferentes formas de comprimir imágenes. La más rápida es usar un plugin de WordPress que lo haga automáticamente, de manera que no tengas que realizar ningún proceso manual, pero esto no siempre da los mejores resultados. Por ello se suele recomendar hacer una compresión manual y luego, si es necesario, añadir un plugin. Pero recuerda: cuantos menos plugins tengas instalados, más rápida será tu página. Si puedes permitírtelo (porque no es un proyecto web muy grande), hazlo manualmente.
5. Lazy Loading
Habilita la carga diferida (lazy loading) para que las imágenes se carguen solo cuando el usuario las vea en la pantalla. Esto se hace dependiendo del constructor web que utilices (lo implementan en sus ajustes) o con un plugin.
6. Si se puede hacer con CSS, no pongas una imagen.
A veces queremos añadir elementos a la web sin contenido contextual, simplemente visual, como degradados u otros elementos. Antes de descargarte una imagen PNG de un degradado precioso para poner en el fondo de tu web, haz el favor de buscar el código CSS para ese efecto y no ocupar espacio con algo que se puede hacer sin usar una imagen (y que va a quedar mucho mejor así).
Herramientas para la optimización de imágenes
Aquí te dejo algunos plugins y webs para optimizar tus imágenes. En mi caso y por el momento realizo el proceso de optimización sin usar plugins: voy a sitios web y cargo las imágenes sin optimizar, las transformo en WEBP y las comprimo el % necesario. Si quieres hacerlo así, estupendo, pero te dejo también más formas de conseguir tus imágenes optimizadas.
1. ShortPixel
ShortPixel es un plugin que ofrece compresión de imágenes y opciones para optimizar imágenes en lote. Tiene dos variantes: Short Pixel Image Optimizer y Short Pixel Adaptative Images. Cada una tiene sus pros y sus contras, pero para eso vas a tener que investigar un poquillo :).
2. Imagify
Otro plugIn de WordPress que convierte automáticamente tus imágenes a WebP para conseguir optimizarlas para tu sitio web (entre otras funcionalidades). Tiene bastante limitado el tamaño del archivo que puede comprimir (2MB para el plan gratuito, por lo que si tienes fotografías de mucho peso puede que no te sirva).
3. Convertidores web: Cloud Convert y Free Convert
Estas dos webs son las que yo uso para cambiar el formato de mis imágenes de png/jpg a webp y comprimirlas de ser necesario. En versión gratuita tienen un límite de conversiones diario, por lo que si llevas la optimización de imágenes al día no deberías tener problemas, pero si necesitas convertir muchísimas imágenes en un periodo corto de tiempo, buena suerte. ¿Es esta la forma más pro de conseguir imágenes con poco peso? NO, pero para proyectos pequeñitos y personales, me vale. Os mantendré actualizados si encuentro alguna forma más interesante :).
¿Quieres aprender más? Aquí van mis recomendaciones
Kevin Geary es sin duda una de las personas que más me ha ayudado a aprender sobre WordPress y diseño web. Su serie de videos «Page Building 101» es una maravilla y se la recomiendo a todo el mundo. Tiene un episodio estupendo sobre los fundamentos de las imágenes en diseño web, ¡así que no dejes de echarle un ojo!
Y, por supuesto, si eres como yo y dedicas varias horas diarias a escuchar podcasts, te dejo otra recomendación. Es el podcast de Gonzalo Navarro, que puedes encontrar en diferentes plataformas y en el que publica muchísima info útil si quieres aprender WordPress. Tiene un episodio sobre la optimización de imágenes que es TOP.
Esto es todito por este artículo. Espero no enterarme después de esto de que tienes imágenes en tu web con 1MB de peso :(. NO SUBESTIMES LA IMPORTANCIA DE QUE TU WEB CARGUE RÁPIDO: cada vez tenemos menos paciencia. Si consigues que todas las imágenes de tu web estén por debajo de los 100-300 MB (depende de la cantidad de contenido), has triunfado.
P.D.: apunte para mi misma, tengo que optimizar las imágenes de mi web personal ;).