La guía definitiva para optimizar imágenes para la web

Un sitio web de calidad es un sitio web que carga rápido. A los visitantes no les gusta esperar, y tampoco es ningún secreto que el tiempo de carga de una página juega un papel muy importante en la manera en que Google rankea sitios web. Y es que no se le da demasiada importancia al tema de la carga de las páginas, a sus imágenes y, sobre todo, cómo optimizarlas. He aquí una guía definitiva sobre cómo optimizar imágenes para la web, así como algunas otras técnicas y directrices adicionales.

Utiliza el formato de imagen correcto

Los 3 formatos de archivo más comunes para imágenes en la web son .jpg, .png y .gif. He aquí un breve resumen de cada formato de imagen y cuando se debe utilizar.

  • png: Usa imágenes png si la imagen tiene texto en ella, o si necesitas un fondo transparente.
  • gif: Usa gif para imágenes muy pequeñas, como por ejemplo un tile para fondo de 5*5px.
  • jpg: Usa este formato para la visualización de fotos, ilustraciones, imágenes, etc.

Usa miniaturas en lugar de cambiar el tamaño de la imagen en html

HTML y CSS te brinda la posibilidad de cambiar el tamaño de las imágenes especificando el ancho y el alto deseados. Si bien esta es una característica bastante útil, la imagen, en realidad, no se redimensiona, sólo se visualiza con un tamaño más pequeño. ¿Deseas mostrar una imagen a 500 píxeles de ancho? Muy bien, cambia el tamaño de la imagen original a 500 píxeles y muestra la versión redimensionada en lugar de la original.

Si utilizas WordPress, la herramienta de subida cambia automáticamente el tamaño de cualquier imagen porl las miniaturas que haya establecidas en la plataforma (original, medium, thumb, etc.), por lo que siempre debes elegir el tamaño apropiado.

En los sitios web basados ​​en PHP, existen diferentes librerías que te permiten generar fácilmente miniaturas sobre la marcha. ImageMagick es una de las más populares.

Utiliza efectos de CSS3 en lugar de imágenes

¿Necesitas un degradado o un efecto asombroso en uno de los textos de tu sitio web? ¡No utilices imágenes! CSS3 te permite añadir gran cantidad de efectos visuales. Una de mis reglas de oro cuando se trata de diseño y desarrollo web es evitar el uso de imágenes tanto como sea posible.

En otras palabras, si se puede hacer algo con CSS, hazlo con CSS, deja de lado las imágenes. Hay un montón de cosas que se pueden hacer con CSS3 en lugar de utilizar imágenes, y además, con esto incrementarás la velocidad de tu sitio web.

Usa webfonts en lugar de codificación de texto en imágenes

A principios de 2016, aún veo a un montón de gente que codifican texto en imágenes. Esto es definitivamente muy malo. En el 90% de los casos, se puede utilizar en su lugar una webfont y CSS. Las webfonts son más rápidas en cargar que un montón de imágenes de texto codificadas.

El uso de webfonts es muy sencillo. Con el fin de garantizar una buena compatibilidad entre navegadores, es necesario tener la fuente que desees utilizar en los siguientes formatos: .ttf, .woff, .svg y .eot. Si sólo tienes uno de esos formatos de archivo, hay una herramienta online muy útil que te puede ayudar, el generador webfonts Fontsquirrel.

Sube tu fuente a la web, y a continuación, añade lo siguiente en tu archivo .css:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); 
       url('tagesschrift.woff') format('woff'),   
       url('tagesschrift.ttf') format('truetype'),
       url('tagesschrift.svg#font') format('svg');
}

Una vez hecho esto, se asigna la webfont a un elemento mediante la propiedad font-family:

p {
    font-family: "Tagesschrift", Georgia, Serif;
}

Usa la función "guardar para web" de Photoshop

Cuando se trata de diseño web, Photoshop es, de lejos, el programa más popular, y la mayoría de vosotros, probablemente, lo uséis. A pesar de su popularidad, muchos usuarios no utilizan la función de "Guardar para Web". Es una pena, porque esta función permite a Photoshop proporcionar los preajustes para guardar una imagen con el fin de que se muestre en un sitio web.

Básicamente, si estás creando una imagen con el fin de mostrarla en una página web, utiliza la función de Photoshop "Guardar para Web". Siempre.

Si no tienes Photoshop, no te preocupes. Puedes utilizar Optimizilla, un optimizador de imágenes online. ¿Prefieres usar una aplicación? Entonces te recomiendo RIOT.

Utiliza la caché para mostrar imágenes más rápido

Aunque esto no es realmente una técnica de optimización de imágenes en sí, almacenar en caché tus imágenes es una buena práctica en general y mostrará tus imágenes mucho más rápido a los visitantes que regresen a tu sitio web.

He aquí un fragmento de código listo para usar, que almacena en caché diferentes tipos de archivos (fotografías, así como otro tipo de documentos como PDF o FLV). Este código tiene que ser pegado en el archivo .htaccess de tu sitio web. Asegúrate de que tienes una copia de seguridad del mismo antes de aplicar esta técnica, por si acaso algo va mal.

 

# 1 AÑO
<FilesMatch ".(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"

# 1 SEMANA
<FilesMatch ".(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"

# 2 DIAS
<FilesMatch ".(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"

# 1 MIN
<FilesMatch ".(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP