Optimiza las imágenes para que tu blog vaya como un rayo

Un enemigo de la velocidad de tu blog son las imágenes, una web que no optimiza las imágenes está perdiendo posicionamiento y visitantes.

Además de ocupar más espacio que el texto, las fotografías dependiendo del formato o la compresión pueden ser más o menos complicadas de cargar, siendo un factor que ralentiza mucho a un sitio web por ello conviene darles un tamaño, compresión y tratamiento adecuado.

Existen muchas maneras de optimizar una imagen para tu web o blog y en este post te voy a dar algunos consejos básicos y otros mucho más pro para que arregles en un día lo que tienes estropiciado desde hace años, esto suena bien no?.

Elige el mejor formato para guardar tus fotografías

Los formatos optimos para guardar imágenes los tienes muy claros en este post sobre formatos de imágenes y cuando usar cada cual.

Utiliza el tamaño correcto de imagen

Es muy importante que no uses tamaños enormes de imagen es raro que alguna pantalla pueda mostrar más de 1200px de ancho por lo que 1200px es buena medida incluso menos dependiendo de si tienes una barra lateral para las imágenes.

Lo ideal es medir el tamaño que vas a necesitar en tu blog con el inspector de propiedades para saber cual es el tamaño que debe tener la imagen para no pasarnos de grande ni de pequeña ya que la pixelaría demasiado.

Para descubrir el tamaño optimo para nuestra foto tenemos un método simple:

Ponemos el ratón sobre el elemento que queremos inspeccionar, clic botón derecho y vamos a inspeccionar elemento se abrirá la consola y nos dirá las medidas:

Medidas son las que muestra la web y las medidas naturales que son las del archivo.

En el caso de la foto el tamaño ideal son 662 px y yo le había dado 700px porque si algún día cambio de plantilla no es mala medida para las imágenes interiores.

Por lo que debemos darle esa medida en el editor que usemos para nuestras fotos o descargarlas en la resolución más aproximada.

Guarda para web en la calidad adecuada

Si utilizas un editor estilo Photoshop puedes elegir la compresión de la imagen o la calidad en la que vas a guardar la imagen.

En la opción de guardar para web puedes indicar si quieres calidad media, alta, baja o muy alta, verás que en el ejemplo la imagen pesa en original 4,98 MB lo que es demasiado y la optimizada en calidad alta con un 60 de calidad queda en 275,3Kb mucho más reducida

Ahora la imagen quedará en su tamaño reducida a tan solo 71,89 KB lo que es más ligero y hará que cargue mejor en la web que en el tamaño de imagen original.

Dependiendo del tipo de imagen puedes usar un método más o menos agresivo de compresión.

A parte de Photoshop existe editores fabulosos que te permiten seleccionar el tamaño que necesitas para las imágenes y también programas online para optimizar en lote como Befunky o Canva

Utilizar Thumnails

Las thumbnails son miniaturas de imagen, si ves en este blog aparece la misma imagen en 5 o 6 tamaños diferentes, yo la subo una vez en grande (optimizada) y el plugin regenerate thumbnails crea las miniaturas adecuadas para cada espacio, las mini que salen en la barra lateral, las medianas de los post relacionados…

Esto ahorra  mucho a la hora de cargar y hace que la página pese mucho menos, te recomiendo ese plugin a 100%.

No te descargues los tamaños gigantes si no te hacen falta

Si usas fotografías directamente de un stock de fotos y no quieres trabajar mucho puedes bajarlas en la resolución más aproximada, luego siempre cabe la posibilidad de recortarla en WordPress desde editar imagen.

Vamos a optimizar las imágenes más todavía

Hasta aquí la parte menos agresiva y como he venido optimizando las imágenes siempre para el blog, con Photoshop…

Pero en la WordCamp17 Pablo López de @desarrollowp dijo que no era bastante ya que existen métodos mucho más efectivos, también agresivos y en lote… yujuuu por cierto vale para Blogspot también.

Como podéis ver lo que baja de peso la misma imagen una vez se le aplican diferentes compresiones.

Obviamente hay algunas que pueden dejar la imagen hecha una verdadera porquería pero con una compresión agresive puede servir a no ser de que tu blog necesite imágenes nítidas y muy perfectas.

En mi caso como no me iba a poner a probar todos he elegido Imagify, porque tiene la versión de navegador en la que puedes procesar imágenes sin usar wordpress, lo que me parece genial para el resto de plataformas.

Tienes tres tipos de compresión, la normal para web que es bastante, la agressive es la que he aplicado a las imágenes del blog para la operación bikini y la ultra que es demasiado y sólo es aconsejable si no usas texto sobre las imágenes.

Existe la posibilidad de eliminar o dejar los datos exif (no sé para que los quieres conservar) y puedes re-dimensionar la imagen.

Lo bueno de esta app es que tienes un espacio gratis al mes 25MB para optimizar imágenes, por lo que si vas a publicar pocas te sobra hasta para optimizar fotos antiguas.

Lo he utilizado en plugin para Wordpress y me ha gustado mucho, en mi caso como tengo muchas imágenes he comprado un paquete de 4 GB para que me optimizase las imágenes anteriores, lo tuve casi un día porque tengo 932 imágenes en el blog! ahorré 400MB de espacio en disco lo que es una burrada.

Una vez te registras te mandan un correo con la API key para que la pongas y configures el plugin con los ajustes que creas necesarios y la compresión que veas más adecuada, te ofrece ayuda visual para que veas en qué daña más la foto.

Puedes hacer que las imágenes no sobrepasen de un largo para evitar tamaños desmesurados como los que provienen de editores como adobe Spark.

La posibilidad de excluir algunos tamaños de imagen de la optimización automática es un punto a su favor.

Como puedes ver el ahorro que me supuso y eso que las optimizo con PS y las recorto bastante por lo que este plugin ha sido un hallazgo para mí.

Preguntas frecuentes sobre el optimizar fotos:

1. Qué es optimizar imágenes: es hacer que una foto tenga un tamaño, resolución y compresión adecuado a su uso para utilizar los recursos justos.
2. Es importante que las fotos tengan el tamaño correcto? : Si cuanto más justo sea el tamaño menos recursos de más ocuparán.
3. Puedo utilizar muchas imágenes en un post ?: Si están a tamaó y resolución correcta sí, en caso de que sean muchas y grandes puedes optar por galerías o métodos que no saturen tanto la carga.

Espero haber resuelto tus dudas respecto a la optimización de fotos y como hacer para que mejore la carga de tu web.