Vamos a aprender cómo optimizar imágenes de la web para mejorar la velocidad de carga, veremos los formatos de imágenes adecuados, herramientas y plugins de WordPress para optimizar imágenes.
Cómo optimizar las imágenes para la web
Las imágenes de una página web son el elemento que más suele tardar en cargar y que más peso tiene dentro de una página web.
Por lo tanto tenemos que optimizar las imágenes para mejorar la velocidad de carga y tener una web rápida.
Las optimizaciones de los archivos de las imágenes suelen ser:
- Elección del Formato correcto de la imagen
- Reducción del tamaño de la imagen
- Compresión de la imagen
Formato de Imágenes
Elegir el formato correcto de la imagen afecta a la calidad y también al peso de los bytes de la imagen, y por eso es fundamental elegir el formato adecuado para cada imagen.
PNG (Portable Network Graphics)
La característica por la que más se utiliza este formato es porque permite transparencias en las imágenes, está basado en un algoritmo de compresión sin pérdidas lo que permite que no pierda calidad aunque se guarde varias veces.
En teoría, este formato permite las animaciones al igual que el formato GIF, pero los navegadores no las procesan.
Dentro del formato podemos encontrar dos variantes de PNG:
PNG 8 esta variante utiliza una gama de colores de 8 bit, que permite almacenar 256 colores. Es la adecuada si utilizamos imágenes planas con los colores básicos, como por ejemplo, iconos para la web sin reflejos o imágenes muy simples. Como solo permite 256 colores da como resultado tamaños de imágenes muy pequeños que son muy rápidos para la web pero no es el formato adecuado para imágenes con detalles.
Se utiliza solo si nuestra imagen utiliza únicamente los colores básicos sin reflejos o transparencias en colores.
PNG 24 esta variante utiliza una gama de colores de 16 bit, que permite almacenar 16 millones de colores. Está pensado para imágenes con muchos colores. Suele dar como resultado archivos de imágenes algo más pesados que PNG8 pero mantienen mejor la calidad de las imágenes.
El formato PNG es ideal para:
- Logos
- Capturas de pantalla
- Imágenes planas
- Imágenes con transparencias o sin fondo
JPG (Joint Photographic Experts Group)
Es el formato de imagen más común utilizado por las cámaras digitales y dispositivos móviles, y está pensada para guardar imágenes fotográficas grandes con muchos detalles. Utiliza una compresión con pérdidas, es decir que cuanto más compresión del formato tenga la imagen la calidad se verá afectada.
Una característica de este formato es que podemos ajustar el nivel de compresión de la imagen y así poder elegir si preferimos calidad de imagen o rapidez de carga.
La terminación de los archivos puede ser .jpg .jpeg .jpe
El formato JPG es ideal para:
- Fotografías
- Imágenes con muchos detalles
SVG (Gráficos Vectoriales Escalables)
Es un formato para gráficos vectoriales bidimensionales y su principal característica es que permiten que una imagen se redimensione a cualquier tamaño sin perder calidad de imagen. La redimensión se hace mediante fórmulas matemáticas que usan los vectores que componen la imagen.
Como su gran ventaja es poder crear imágenes que se pueden escalar sin perder calidad, son utilizadas en páginas web para crear logos, botones, iconos y otros elementos de la web.
Otra ventaja es que estos gráficos o imágenes se pueden crear en programas como illustrator de forma relativamente sencilla.
Aunque el formato SVG se utiliza para crear imágenes vectoriales, en realidad es un archivo de código XML y muchos desarrolladores web no los utilizan por que puede crear problemas de seguridad, ya que se puede introducir un código maligno dentro de las imágenes.
Además, por esta razón WordPress no admite el formato SVG por defecto, para permitir el uso del formato SVG en WordPress puedes utilizar el plugin SVG Support
Tamaño de la imagen
El tamaño en pixeles de la imagen juega un papel muy importante en el peso de las mismas, ya que una imagen de un tamaño grande pesará más que la misma imagen reescalada a un tamaño más pequeño.
Por lo tanto, para optimizar el tamaño de las imágenes de nuestra página web, también tenemos que crear o reescalar las imágenes al mismo tamaño al que se mostraran en nuestra página web.
Cómo medir el tamaño de una imagen
Podemos medir el tamaño de la imagen (en realidad medimos el espacio de la web en el que se va a mostrar la imagen) desde la ventana del navegador utilizando un extensión de «regla de pixeles» como Page Ruler Redux para Chrome.
De esta manera podemos crear imágenes que se adapten por ejemplo a la altura de una fila o poner una imagen grande en nuestra maquetación y después medir el tamaño que ocupa para rediseñarla.
También podemos bucear en el código para averiguar los tamaños exactos.
Si estás creando la imagen para una sección de ancho completo, como por ejemplo un slider o el fondo de una columna, hay que ajustar las imágenes al tamaño de pantalla de tus usuarios.
El tamaño de una imagen de ancho completo es de 1920px de ancho por norma general, ya que la mayoría de usuarios utiliza las dimensiones de 1920 x 1080 en las pantallas de sus ordenadores (cuando la mayoría de los usuarios usen pantallas 4k diseñaremos las imágenes a otras medidas).
Si mides la imagen desde un portátil o desde una pantalla pequeña el ancho de tu pantalla será menor y los usuarios con pantallas más grandes verán una pérdida de calidad.
Y lo mismo ocurre si queremos diseñar una imagen para pantalla completa.
Cambiar el tamaño de una imagen
Para cambiar el tamaño de una imagen puedes utilizar Photoshop, Gimp o incluso herramientas online como iloveimg
En Photoshop puedes hacerlo en Imagen > Tamaño de imagen
Optimizar imágenes en Photoshop
Con la opción de guardar para web de Photoshop podemos optimizar una imagen de varias maneras.
- Cambiar el tamaño
- Quitar los metadatos de la imagen
- Poner la carga progresiva
- Cambiar la calidad de la imagen
- Ver una aproximación del peso y tiempo de carga de la imagen
Puedes poner estas opciones desde Photoshop al guardar la imagen para web. Archivo > Exportar > Guardar para web
Las imágenes Jpeg y png tienen opciones especiales que hacen que se carguen en varios pasos mejorando la velocidad de carga de la web.
Estas opciones cargan la imagen en varios pasos, primero se cargará la imagen en una versión con poca calidad y después con calidad completa.
- En Jpeg la opción se llama carga progresiva
- En Png la opción carga entrelazada
Además, podemos quitar los metadatos de la imagen, como por ejemplo los datos de fecha, hora y lugar en el que se hizo la imagen, para reducir su peso.
Comprimir las imágenes
Comprimir las imágenes puede reducir hasta un 80% su peso, lo que hace que sean notablemente más rápidas cuando se cargan en la web.
Para comprimir las imágenes podemos utilizar la herramienta online Tinyjpg o Compressor.io donde solo hay que arrastrar las imágenes en ella para comprimirlas.
A parte de comprimirlas también borrara los metadatos de la imagen.
Plugins para comprimir las imágenes
También podemos utilizar plugins para WordPress para comprimir las imágenes que ya están en nuestra web como Smush Up que nos ahorran el esfuerzo de descargar y comprimir todas las imágenes que ya estemos utilizando.
Además de comprimir las imágenes también puede detectar automáticamente el tamaño en el que se muestra para redimensionarla automáticamente al tamaño más óptimo, pero hay que tener cuidado con esta funcionalidad del plugin ya que la imagen original se pierde.
Existen otros plugins para comprimir imágenes como:
Utilizar las miniaturas de WordPress
Las miniaturas de WordPress son copias de nuestras imágenes a tamaños diferentes.
Estas copias de tus imágenes que genera WordPress se pueden utilizar para tener siempre una copia a un tamaño exacto que utilicemos con frecuencia.
Es otra manera de optimizar las imagenes pero realmente útil, ya que puedes tener las imágenes originales en el servidor en un gran tamaño pero utilizar su copia más pequeña para la web.
Por ejemplo puedes tener una copia optimizada en tamaño, para las imágenes que ilustran los post, solo tienes que medir el ancho de tu contenido y configurar las miniaturas.
Podemos configurar las miniaturas en la zona de administración de WordPress Ajustes > Medios.
Luego tendrás que regenerarlas y borrar las anteriores miniaturas, te recomiendo el tutorial Miniaturas de WordPress para hacerlo paso a paso.
Consejos finales
- Existen dispositivos como el iPad que están preparados para utilizar imágenes retina, si queremos mostrar una mejor calidad de imagen en estos dispositivos, podemos cargar las imágenes con un poco más de tamaño para mejorar la experiencia de los usuarios que utilicen esos dispositivos.
- Si quieres tener las imágenes en un tamaño enorme en el servidor por alguna razón, utiliza las miniaturas de WordPress para cargar las imágenes.
- Conservar las imágenes en un tamaño grande y utilizar las miniaturas para mostrarlas en la web puede ser una buena estrategia si en el futuro cambias de tema de WordPress, ya que podrás volver a regenerar las miniaturas adaptadas al nuevo tema.
- La versión gratuita de algunos plugin de compresión de imágenes no comprimen la imagen tanto como podrían.
Si te ha gustado esta información también puede interesarte:
¡Pedazo de guía! Me ha sido de gran ayuda, va para mis favoritos de cabeza.
Muchas gracias Gerardo
Gracias!! Andaba tiempo buscando un tutorial tan bien explicado como este!! Un saludo.
Fantástico post! Gracias G!
Genial post para optimizar imágenes en una web, aspecto muy importante para que tarde menos en cargar una página. Muy recomendable el artículo, buen trabajo
Un tutorial muy completo y facil de entender para novatos como yo! Muchas gracias y buen trabajo 🙂
Muchas gracias Gerardo por analizar tan bien cada formato de imagen y desarrollar los pasos de manera que sean muy fáciles de seguir. Como siempre te doy las mi enhorabuena y muestro mi agradecimiento ante tu aporte de conocimientos. Un saludo!
Un post muy completo! Gracias por explicar todo de forma tan detallada, he conseguido optimizar las imágenes de mi web sin ningún problema. Enhorabuena!