optimizar imagenes

OPTIMIZAR IMÁGENES, reducir su tamaño y MEJORAR PageSpeed Insights CON/SIN Photoshop

Optimizar imágenes es una tarea suprema y principal que debemos llevar a cabo si queremos que nuestro blog cargue rápido y sea bien puntuado por Google en Pagespeed Insights, mejorando así el SEO de nuestro blog (una de sus muchísimas cosillas a tener en cuenta).  La optimización de imágenes no es solo cambiar el tamaño y ajustarlo a extrictamente necesario,. que también.   

Optimizar imágenes para mejorar la velocidad de carga del blog con Photoshop

La optimización de una imagen significa que vamos a reducir su peso al mínimo conservando la calidad en un alto porcentaje.

 Hasta ahora he probado muchas maneras de hacerlo y hoy comparto las opciones más eficaces y recomendadas desde mi experiencia.

Antes de nada echa un ojo a este vídeo para que comprendas la importancia de optimizar las imágenes de tu blog o web y puedas hacer un chequeo de cómo está tu puntaje en Pagespeed Insights.

Al final del post tienes el vídeo tutorial por si quieres seguirlo por ahí.

Optimizar imágenes para un blog o Web con Photoshop

Esta es la manera en la que he podido realizar la optimización de imágenes para el blog de manera más eficiente.   No solo reducimos su peso de manera brutal si no que también conservamos la calidad casi al completo. Esto quiere decir que la imagen, al reducir su peso, no se pixela, o se ve borrosa.   En este ejemplo puedes ver la diferencia entre la imagen original y la optimizada/comprimida. Es una imagen de Michael Dam descargada en Unsplash  donde descargo siempre mis imágenes para el blog.  

Imagen Original:

  • Tamaño: 1,89 MB (1.991.855 bytes)
  • Dimensiones: 3744 x 5616 px
  • Resolución: 72 ppp
  • Profundidad de bits: 24  

Imagen Optimizada:

  • Tamaño: 48,9 KB (50.103 bytes)
  • Dimensiones: 1000 x 1500 px
  • Resolución: 96 ppp
  • Profundidad de bits: 24      
Optimiza imágenes para mejorar la velocidad de carga del blog con Photoshop

        Como puedes ver la diferencia casi no se nota. He elegido una imagen llena de color y detalles que con una mala optimización se vería realmente fea. Así puedes valorar la calidad de esta optimización con Photoshop.  

  • Lo primero que hacemos es abrir la imagen en Photoshop.

Luego cambiamos el tamaño de la imagen.

  • Vamos a Imagen en el menú superior izquierdo, y le damos a Tamaño de imagen.
  • Una vez que se abre la ventana del tamaño de la imagen, cambiamos las dimensiones de manera proporcionada, dejando seleccionado el botón de conservar proporciones.
  • Ya tenemos el tamaño que queremos para nuestra imagen. El tamaño más amplio que usaremos para nuestra imagen. Ahora le damos a Aceptar.

Ahora vamos con la parte más importante para optimizar nuestra imagen para el blog.   

  • Nos vamos a Archivo – Exportar – Guardar para Web
  • Una vez allí (podríamos modificar el tamaño aquí, en vez de en Tamaño de imagen)  jugamos con las opciones sin perder demasiada calidad. Te dejo mis opciones elegidas con esta imagen. También puedes ver el vídeo tutorial del final de este post para optimizar la imagen con Photoshop paso a paso.
Photoshop optimizar imagen para web
  • Luego Guardar… y listo!! Imagen optimizada lista para subir a tu blog / web.

Optimizar imágenes para un blog o Web sin Photoshop

Para esto usaremos dos herramientas. Una será Paint, de toda la vida en todo PC Windows, y otra será una página de Internet que nos ayuda a comprimir imágenes que se llama Compressjpeg.  

Imagen Original:

  • Tamaño: 1,89 MB (1.991.855 bytes)
  • Dimensiones: 3744 x 5616 px
  • Resolución: 72 ppp
  • Profundidad de bits: 24  

Imagen Optimizada:

  • Tamaño: 107 KB (109.665 bytes)
  • Dimensiones: 1000 x 1500 px
  • Resolución: 96 ppp
  • Profundidad de bits: 24  

Pasos con Paint para optimizar nuestra imagen

  • Abrimos la imagen en Paint.
  • Cambiamos tamaño.
  • Guardamos.

Pasos con Compressjpeg para optimizar nuestra imagen

  • Nos vamos a Compressjpeg
  • Subimos imagen con tamaño editado.
  • Descargamos imagen comprimida.

  Listo! Tenemos de nuevo nuestra imagen optimizada, aunque no tanto, mucho mejor que la original.

Diferencia de optimización entre Photoshop y Paint con Compressjpeg

Optimiza las imágenes para mejorar la velocidad de carga del blog

Imagen Optimizada con Paint y Compressjpeg:

  • Tamaño: 107 KB (109.665 bytes)
  • Dimensiones: 1000 x 1500 px
  • Resolución: 96 ppp
  • Profundidad de bits: 24  

Imagen Optimizada con Photoshop:

  • Tamaño: 48,9 KB (50.103 bytes)
  • Dimensiones: 1000 x 1500 px
  • Resolución: 96 ppp
  • Profundidad de bits: 24    

Lo que nos importa es el tamaño, y la imagen de Photoshop pesa la mitad que la imagen con Paint y Compressjpeg. Pagespeed nos pedirá en ambos casos que redujamos más el tamaño de nuestra imagen, porque se trata de una imagen con una alta calidad en ambos casos. Pero nos penalizará mucho más por la optimización que pesa 107 KB que por la que pesa 48,9 KB sin lugar a dudas.  

Podemos reducir más el tamaño, pero considero que sería perder mucha calidad. Intenta escoger imágenes con un peso más bajo, para que puedas optimizarla mucho más. He escogido una imagen cargada de color y de contrastes, pero si es otro tipo de imagen el ahorro en peso es mucho mayor.    

En próximos posts seguiremos aprendiendo mucho más relacionado con la mejora de nuestro blog y eso de #serblogger.    

Deja en comentarios

¿Cómo optimizas tú las imágenes?

Sabías que es algo importante?    

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

2 comentarios

  1. Ƹ̴Ӂ̴Ʒ Rebeca Gonzalo Ƹ̴Ӂ̴Ʒ

    Yo desde que descubrí optimizilla es la herramienta que uso, la verdad. Más que nada porque detesto Photoshop y me parece complicadísimo para manejar. Y al ser una herramienta online no tengo que instalarla en mi ordenador. Usé por un tiempo jpeg.io, pero según el tipo de imagen de origen me generaba problemas, así que para mí optimizilla es la mejor.

    Un abrazo.

  2. Pedro

    Siempre había escuchado de la optimización pero no tenia claro por donde empezar… ¿Entonces si tengo que bajar las fotos y volverlas a subir para de esta manera tenerlas optimizadas?

Deja tu comentario

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