cómo optimizar las imágenes

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.

que tamaño tienen las imagenes para 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 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.

medir el tamaño de una imagen

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

cambiar el tamaño de la imagen en photoshop

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

guardar para web optimizar imagen

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.

optimizar una imagen para wordpress

 

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.

como comprimir las imagenes

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.

usar miniaturas optimizadas de wordpress

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.

optimizar las imágenes de wordpress

 

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:

7 comentarios en “Optimizar imágenes para web y WordPress

  1. 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!

  2. 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!

Deja un comentario

El email no será publicado. Vas a introducir datos en la web si comentas:

  • Responsable de los datos Gerardo García Asensio
  • Los datos se usarán para gestión de comentarios y medidas de seguridad
  • Legitimación: tu consentimiento.
  • Destinatarios: los datos estarán ubicados en los servidores de Siteground.
  • Derechos: podrás ejercer tus derechos, entre otros, rectificar, limitar y borrar tus datos.

Pin It on Pinterest

Esta web utiliza cookies para su funcionamiento. Lee y acepta el aviso legal o abandona la web. más info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar