Uno de los errores más comunes en web es cargar imágenes demasiado pesadas.
En este ejemplo vamos a pasar una imagen de 5.24 MB a solamente 120 KB. Para que tengas una referencia, esto representa un ahorro del 97.76%.
Vamos a dividir nuestro proceso en tres fases:
- Reducción del tamaño en Photoshop.
- Optimización del tamaño.
- Elección del formato ideal para tener imágenes en internet.
Reducir el tamaño de la imagen en Photoshop
El primer paso es tener nuestra fotografía. En este caso, vemos que pesa 5.24 MB.
Lo primero que vamos a hacer es ir a Photoshop y arrastrar nuestra imagen dentro del programa.
Luego vamos a Imagen y después a Tamaño de imagen.
En esta parte tenemos un panel muy importante que nos habla de la resolución y del tamaño en píxeles.
Configurar la resolución para internet
La resolución de internet o resolución de pantalla suele ser de 72 píxeles por pulgada.
Esta medida es muy importante si lo que quieres es usar la imagen en un sitio web.
Si lo que buscas es un fondo que ocupe el 100% del ancho del sitio web, debe estar en 1920 píxeles, que suele ser el estándar para internet.
✅ Recomendación: para imágenes de fondo de ancho completo en una web, 1920 píxeles suele ser una medida adecuada.
Guardar la imagen como una copia
Después de ajustar el tamaño de la imagen, vamos a Archivo y seleccionamos Guardar como una copia.
Con esto ya tenemos una primera reducción del peso del archivo antes de pasar a la fase de optimización.
Optimizar la imagen con ShortPixel
Ahora vamos a pasar a la fase de optimización.
Para esta fase vamos a utilizar una herramienta llamada ShortPixel. Es gratuita y es un sitio web muy interesante.
Además, tiene una ventaja con respecto a otras herramientas, y es que ofrece la tecnología WebP.
Elegir el formato ideal para internet
Los formatos más populares en internet son:
- JPG
- PNG
- GIF
- WebP
El formato WebP busca comprimir el archivo de manera efectiva, cuidando mucho su peso.
Configurar ShortPixel para generar WebP
Dentro de ShortPixel podemos comprimir la imagen directamente.
Sin embargo, el poder está donde dice Compress. Luego, en Settings, vamos a habilitar la sección para generar WebP.
Para este ejemplo, aunque es una fotografía, vamos a utilizar el modelo Glossy, que es uno de los más recomendados cuando se busca mantener buena calidad visual.
Después de habilitar la generación de WebP, simplemente damos clic, buscamos nuestro archivo y lo subimos.
En este caso, el sistema detecta el archivo en 1.5 MB.
⚠️ Importante: la herramienta tiene la restricción de que no recibe archivos de más de 5 megapíxeles.
Descargar la versión WebP
Cuando el proceso termina, damos clic en la flechita y seleccionamos la opción para descargar la versión WebP.
Después podemos revisar el resultado final de nuestra optimización.
Resultado final de la optimización
Tomamos nuestra primera imagen y observamos que el peso inicial del archivo era de 5.24 MB.
Con la primera fase, que fue la reducción de tamaño en Photoshop, logramos alcanzar 1.46 MB. Ya con eso hicimos un primer avance.
Después tenemos la prueba descargada desde el software en formato JPG y también el formato WebP.
En el formato JPG logramos una reducción muy impresionante, llegando a tan solo 144 KB.
Para tener una perspectiva, 1 MB equivale aproximadamente a 1000 KB. La imagen pesaba 5.24 MB y ya había bajado a 144 KB.
Finalmente, en el formato WebP, el archivo quedó en solamente 120 KB.
Comparación del peso de la imagen
| Etapa | Peso aproximado | Resultado |
|---|---|---|
| Imagen original | 5.24 MB | Archivo demasiado pesado para web. |
| Reducción en Photoshop | 1.46 MB | Primera reducción importante del tamaño. |
| Optimización en JPG | 144 KB | Reducción muy considerable manteniendo un formato común. |
| Optimización en WebP | 120 KB | Mejor resultado final en peso para internet. |
Resumen del proceso para optimizar imágenes web
- Revisar el peso original de la imagen.
- Abrir la imagen en Photoshop.
- Entrar en Imagen y luego Tamaño de imagen.
- Ajustar la resolución a 72 píxeles por pulgada.
- Usar 1920 píxeles si la imagen será un fondo de ancho completo.
- Guardar la imagen como una copia.
- Subir la imagen a ShortPixel.
- Activar la generación de WebP.
- Usar el modelo Glossy para mantener buena calidad.
- Descargar la imagen optimizada en JPG o WebP.
Optimizar imágenes para web es clave para mejorar el rendimiento de un sitio. Una imagen pesada puede afectar la velocidad de carga, mientras que una imagen bien reducida y comprimida puede mantener buena calidad visual ocupando mucho menos espacio.
En este caso, pasar de 5.24 MB a 120 KB demuestra lo importante que es reducir el tamaño, comprimir correctamente y elegir un formato adecuado como WebP.
