carmen@yoblogueo.com

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

Optimiza las imagenes para que tu blog

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.

 

como reduzco las fotos para web 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.

formato-de-imagenes-para-blog

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.

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

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

Optimiza-las-fotos-de-tu-blog

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

https://yoblogueo.com/10-editores-fotos-gratuitos-alucinantes/

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.

donde encontrar imágenes gratis

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.

reduce-las-imagenes-de-mi-blog

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.

mejorar-las-imagenes-para-mi-web

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.

ganar-espacio-reduciendo-imagenes

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.

que-es-optimizar-imagenes

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.

plugins-para-optimizar-imagenes

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.

 

 

26 Responses
  1. Contigo siempre se aprende algo nuevo!
    Definitivamente voy a tomar en cuenta tus consejos, la verdad yo soy mala para todo lo de las fotos e imagenes, pero ahora tomaré más en cuenta el tamaño.
    Ya descargue la app que recomendaste! comenzaré a hacer pruebas!
    Gracias y besos!

  2. ¡Hola! Que importante es tener optimazadas las fotos para el blog. Yo utilizo el photoshop para hacerlo y después de pasarlas a pinterest, también retoco el html de mis fotos en el mismo blog para que me queden todas más grandes y como yo quiero, y cambian un montón.

    Me apuntaré algunos datos que has dado muy interesantes para implatarlos en mi vida fotografica blogueril. Gracias por estos post que nos ayudan tanto. Besitos.

  3. Gracias por toda la informacion, soy de blogspot y vere si alguna que otra me sirve como el pluggin de thumnails, de todos modos, siempre trato de no usar fotos demasiado grandes por que si o si se demoran en subir y despues en cargar!

    Besos

  4. Me ha venido como anillo al dedo he de confesar que ahora estoy viendo el tema de la optimización de las imágenes, porque suelo cargar muchas y no quiero saturar y de esa forma hacer que sea lento mi página, la verdad lo de las medidas no lo tenía claro y este artículo me ha sido de gran ayuda.

  5. Oh, que bien me viene este post. La verdad es que siempre olvido el tema de las medidas y demás cosas a tener en cuenta y veo que las imágenes también hay que pensarlas bien. Me lo guardo en favoritos, muchas gracias.

  6. Vanesa

    Madre mía esto de la optimización de imágenes es un mundo, yo me baso simplemente en que tengan el tamaño adecuado de tal forma que reduzco mucho el peso pero me gusta que se vean bien porque algo que creo que retrasa tb es que sean demasiado pequeñas y tengas que clickar sobre ellas para verlas, no me parece práctico. Se trata de usar el sentido común, hace tiempo que lo hago y la web ganó en velocidad desde el principio. Muaksss

Leave a Reply