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.
La optimización de una imagen significa que vamos a reducir su peso al mínimo conservando la calidad en un alto porcentaje.
Tweet
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
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.
- 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
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?
