Las imágenes son clave en cualquier web, pero es importante que estén bien optimizadas para que la página cargue rápido. Aquí te explico paso a paso cómo optimizar una imagen para mejorar el rendimiento de tu sitio web, sin necesidad de ser un experto.
Elige el formato adecuado
Debes tener claro que formato de imagen utilizar según la necesidad:
- JPG para fotos o imágenes con muchos colores.
- PNG para gráficos o imágenes con transparencia.
- SVG para iconos.
- WebP si buscas un formato moderno con alta compresión y buena calidad.
Es habitual descargar imágenes para nuestra web desde internet (cuidado con los derechos de uso que puede tener dicha imágen) y a veces nos bajamos fotos en formato PNG. Como ya hemos dicho el formato mas adecuado para fotos es JPEG, y la misma imagen en PNG será mas pesada teniendo la misma calidad, con lo cual el tiempo de carga será mayor.
Reduce el tamaño de la imagen
Puedes utilizar herramientas como TinyPNG o ImageOptim para comprimir las imágenes sin perder calidad. Esto reduce mas el peso, reduciendo el tiempo de carga de tu web. Los programas de edicion de imágenes como GIMP te darán un control total sobre el tamaño y la compresión final que quieres dar a tus imágenes web.
Ajusta la resolución
A menudo confundimos el tamaño en píxeles de la imagen, con la resolución que se expresa en DPI o Píxeles Por Pulgada (PPP). Para las imagenes de tu web no uses resoluciones innecesariamente altas. Para la mayoría de los sitios una resolución de 72 DPI es suficiente. También es recomendable asegurarse no sea mas grande que el área en la que va a ser mostrada.
Usa nombres de archivo descriptivos
Nombra tus archivos de imagen con palabras clave relevantes. Esto ayuda a mejorar la organización y aporta beneficios al SEO. Por ejemplo en lugar de «img_001.jpeg» usa un nombre de archivo descriptivo como «camiseta-hombre-azul.jpg».
Implementa imágenes responsive
Utiliza el atributo srcset para servir imagenes de diferentes tamaños según el dispositivo desde el que ven la web tus usuarios. Esto mejora el rendimiento en móviles. En el caso de WordPress existen plugins como Imagify que ya hacen esto (y mucho mas) de forma automática, pese a necesitar comprar créditos a partir de cierto numero de imágenes.
Tutorial: Aprende a optimizar imagenes web como un profesional con GIMP
Gimp es un programa de edición y retoque de imagenes de código abierto y gratuito. Es similar a Photoshop y aunque en algunas ares no es tan completo no tien un coste a modo de licencia ni hay que piratear nada. Esta disponible para Windows, Mac OS y Linux y en su web oficial además hay muchos plugins y pinceles también gratuitos.
Evidentemente el primer paso es descargarlo e instalarlo. Durante la instalación podréis elegir el idioma, entre ellos el Español, que es el que voy a usar en este Tutorial.
Una vez instalado, el proceso varía un poco si solo queremos escalar el tamaño de la imagen dejandola tal cual está, o si queremos recortar parte de la imagen para adaptarla a una medida concreta.
Crear una imagen con un tamaño especifico:
Siguiendo con el ejemplo del banner de 1200 x 630 píxeles, lo primero que deberiamos hacer es abrir Gimp, y desde el menú superior buscaremos «Archivo > Nuevo«.
Se abrira un recuadro donde poner las medidas que necesitamos. También deberemos abrir el desplegable «Opciones Avanzadas» para poder modificar la resolución X e Y de 300 DPI (Píxeles Por Pulgada) que es la resulción que se utiliza en imagenes que se van a imprimir en papel, a 72 DPI que es la adecuada para imágenes que se van a ver en una pantalla.
El resto de opciones las podéis dejar como están en la imagen:
Una vez rellenados los valores pulsaremos aceptar y tendremos un lienzo en «Blanco» donde podremos arrastrar y soltar la imagen que queremos recortar. Una vez la tengamos en su sitio mediante las herramientas «Mover» o «Escalar» pasaremos al paso de guardar la imagen, donde aplicaremos un formato adecuado y una compresión. Puedes hacer clic aquí si quieres ir a ese punto directamente.
Rescalar una imagen sin modificar sus proporciones:
Localizaremos y abriremos la imagen que queremos reescalar con Gimp. Esto lo podemos hacer arrastrando la imagen dentro de la ventana de Gimp o utilizando el botón derecho y la opción de “Abrir con…”
En la pestaña «Imagen» buscaremos «Escalar la imagen». En la pantalla resultante cambiaremos solo el ancho de la imagen, teniendo en cuenta que la opción de mantener relación de aspecto esté activada, de lo contrario se deformará la imagen.
Mantener la relación de aspecto quiere decir que el ancho y el alto mantienen las mismas proporciones en todo momento. Si reducimos el ancho a la mitad, la altura también se reducirá a la mitad.
Los campos «Resolución X» y «Resolución Y» se refieren a los pixeles por pulgada (ppp) que tendrá la imagen, si la finalidad es mostrar la imagen en una pantalla la resolución correcta es 72ppp. Las imagenes para oyras finalidades, como trabajos de impresión usan resoluciones de entre 200 y 300ppp que permiten ampliar mucho la imagen y evitar bordes serrados en las lineas curvas.
Guardar la imagen optimizada:
Una vez escalada o creada a la medida correcta, en el menú «Archivo» buscaremos «Exportar como… » Y en el desplegable «Seleccione el tipo de archivo (Por extensión)por extensión» buscaremos WebP. Es muy posible que nos avise del cambio de formato como si fuera un problema, pero aceptamos y guardamos. Mirad bien la ruta donde se guarda la imagen nueva, que generalmente será la misma donde estaba la imágen inicial.
Si ahora comprobáis el peso de la nueva imagen veréis que el tamaño se ha reducido considerablemente y apenas nos ha llevado un minuto. A medida que nos acostumbremos al proceso nos resultará cada vez más fácil y conseguiremos mejores resultados llegando a reducir el peso de las imágenes que subimos a nuestra web a menos de un 10% del original sin perder calidad.
En los próximos días subiré un video a YouTube mostrando el procedimiento completo con vários ejemplos prácticos. Recuerda que la web está en construcción y durante unos días tendrás que ir mirando las novedades visitandome periodicamente 🙂 ¡En breve podrás apuntarte a mi Newsletter para que pueda avisarte cada vez que publique contenido que pueda interesarte!