Cómo optimizar las fotos de tu blog o tienda online

Para poder optimizar las fotos de tu blog es necesario tener unos conocimientos básicos sobre formatos y resoluciones. Con una serie de conceptos básicos serás capaz de poder tomar la decisión adecuada a la hora de elegir el formato correcto para cada fotografía de tu blog.

Uno de los elementos con más peso de la mayoría de páginas web hoy en día son sin las imágenes. Vivimos en una era dónde la imagen lo es todo. Ya sea para presentar nuestro producto o para ilustrar conceptos en nuestro blog las imágenes son prácticamente imprescindibles hoy en día. Antes de aprender cómo optimizar las fotos de tu blog veamos los aspectos más importantes que influyen en la optimización.

El tamaño importa

Uno de los problemas más comunes en la mayoría de los blogs es la utilización de las fotos a un tamaño incorrecto. Y es que por norma general cuanto más grande es la foto más peso en kb va a tener y por lo tanto más tiempo va a tardar en descargarse. La mayoría de las veces la gente utiliza unas fotos desproporcionadamente grandes en su blog.

Raras veces es necesario utilizar una foto con una anchura superior a los 1000px y en la mayoría de los casos quizás incluso menor. Al final del artículo te enseñaré una forma para averiguar el tamaño exacto que debes utilizar en tu blog.

El formato correcto para cada tipo de imagen

Aún así el tamaño no siempre aumenta el peso de la fotografía. Un aspecto muy a tener en cuenta es el formato de la foto. Cada formato comprime la información de manera distinta y por lo tanto hay que saber qué formato es adecuado para cada tipo de imagen. Verás que no se necesita un titulo en física cuántica para saber elegir el formato correcto. Veamos los formatos más comunes.

JPG

Es el formato más utilizado en los medios digitales pero no siempre es el más adecuado. Este formato es ideal para fotografías de paisajes, retratos, cuadros, fotografía de producto, etc y en general para cualquier fotografía en la que hay muchos detalles, texturas y degradados. Es un formato comprimido ideal para mostrar fotos de grandes dimensiones en ficheros que pesan poco.

PNG

Otro formato muy común que se diferencia del JPG porque puede mostrar transparencias. No es muy adecuado para imágenes de gran detalles porque no comprime la información y por lo tanto pesa mucho más. Se utiliza principalmente cuando se quiere preservar la transparencia de algunas áreas de la imagen. Tiene dos modalidades: PNG8 y PNG24 Los usos más comunes son: logos o iconos.

GIF

Comúnmente conocidos como un formato para fotos animadas. El formato GIF se utiliza para fotos estáticas y es perfecto para imágenes con pocos colores y sin degradados como gráficos o ilustraciones. La forma de muestrear los colores y comprimir las imágenes es muy similar al PNG8. Utiliza una tabla de colores que puede variar de 2 a 256 por lo que las fotos en formato GIF suelen pesar menos ya que el resto de los colores no incluidos en la paleta se elimina. No es adecuado para imágenes con degradados o para fotografía de producto.

SVG

El formato SVG es un formato utilizado para mostrar gráficos vectoriales y que actualmente goza de una popularidad en aumento debido a que es capaz de mostrar gráficos complejos a cualquier dimensión con un archivo de un peso muy reducido. Entre sus usos destacan los logos y los elementos vectoriales en páginas web. Es un formato que solo se puede exportar con software especializado y una gran ventaja es que también soporta efectos de animación. Más información en wikipedia.

WEBP

Es un nuevo formato de imagen que rivaliza directamente con el JPG y se espera que sea el nuevo estándar en cuanto a formato de gran uso para medios digitales. Es capaz de mostrar una misma fotografía que el formato JPG pero con un tamaño de archivo significativamente menor y una calidad comparable. Actualmente WordPress dispone de plugins que convierten automáticamente las fotos al formato webp.

¿Cómo optimizar las fotos de tu blog?

El checklist para optimizar las fotos de tu página web

  1. Elige el tamaño adecuado
  2. Elige el formato adecuado
  3. Elige los ajustes de compresión o calidad adecuados

¿Cómo saber qué tamaño es el adecuado para tu blog? Si eres un purista y quieres saber el tamaño exacto del área de contenido de tu blog puedes utilizar el Inspector de Chrome o Firefox. Basta con hacer clic derecho en una foto de un artículo de tu blog y seleccionar «Inspeccionar». Verás que el inspector de muestra la anchura de tu foto o del contenedor del area de contenido de tu blog. Fíjate siempre en las dimensiones de las fotos que subes a tu página web y piensa dónde y en que contexto se van a utilizar.

Cómo elegir el formato adecuado

Por norma general la regla a seguir es la siguiente:

  • Para fotografías (paisajes, fotos de producto, retratos o cuadros) elije siempre el formato JPG
  • Para ilustraciones, gráficos, capturas de pantalla con solo texto y tablas: PNG o GIF

Ejemplos para usos JPG

Las fotos de la siguiente imagen tendrán un peso mucho menor si se guardan en formato JPG al tamaño correcto porque contienen muchos detalles, colores y degradados que el formato JPG comprime de manera muy eficaz.

Cómo optimizar las fotos de tu blog

Ejemplos para usos PNG y GIF

Los formatos PNG y gif a efectos prácticos son intercambiables excepto en algunos casos puntuales. Los ejemplos de la siguiente foto son los candidatos perfectos para ser guardados en GIF o PNG porque no tienen una amplia gama de colores y no tienen degradados.

Ajustes de compresión y calidad

  • Ajustar la calidad de una imagen en JPG es muy sencillo. Con el formato JPG podemos seleccionar un porcentaje de calidad de 0 a 100%. Para cualquier página web una calidad del 50-60% es suficiente. Ofrece un balance adecuado de calidad y peso. No es aconsejable utilizar más de 75% porque la ganancia en calidad no es perceptible pero el tamaño del archivo aumenta considerablemente.
  • El formato PNG24 no tiene ajustes de calidad. Se utiliza exclusivamente para aquellas imágenes que requieren un fondo transparente (logos o iconos)
  • Los formatos PNG8 y GIF disponen de una paleta de colores de 2 a 256 colores. Para seleccionar la calidad elegimos la cantidad de colores que nos proporciona un equilibrio entre la calidad de la imagen y el peso del archivo.

Optimizar las fotos de tu blog – Ejemplo práctico

Vamos a ver las diferencias de peso de archivo y calidad de 2 fotos que optimizaremos en Photoshop. Cualquier software de edición ofrece los mismos ajustes de optimización.

Foto 1 – Fotografía de un pájaro

La foto real tiene unas dimensiones de 3859×2573 píxeles y una resolución de 300 píxeles por pulgada y un peso de 1,5MB. Esta foto es un caso muy típico que en la mayoría de casos se sube a la web sin optimizar. Veamos como podemos mejorar esto.

La anchura del contenido de un artículo de la web de TwipSend es de 787 píxeles. Así pues la foto original es casi 5 veces más ancha de lo que necesitamos. Lo primero que debemos hacer es reducir su tamaño a 787 píxeles y bajar la resolución a 72 píxeles por pulgada.

Si quieres que el usuario tenga acceso a la foto en alta resolución puedes crear dos versiones de la misma foto y enlazarlas en tu artículo. De esta manera no se compromete el tiempo de carga de la web.

Optimizar fotos para web

Para guardar esta foto utilizaremos el formato JPG porque el formato PNG24 pesa mucho más y el PNG8 nos da una mala calidad y un peso elevado en el archivo. Con un porcentaje de calidad del 60% obtenemos un tamaño de tan sólo 67kb. Con esta optimización hemos conseguido un tamaño de archivo 2200% más bajo que el origina que pesaba 1,5MB.

Veamos la diferencia de peso de archivo y calidad de esta foto con las dimensiones 787×525 en otros formatos.

Haz clic en la foto para verla a tamaño completo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *