Optimización de imágenes: 10 consejos imprescindibles (1)

Ante todo voy a deciros que en este post no voy a hablar de cuestiones de diseño, ni de conseguir triunfar en Instagram. Estos consejos ponen más el foco en cuestiones relacionadas en cómo conseguir una experiencia de uso más fluida, más accesible y, ya que estamos, con un mejor posicionamiento orgánico (vamos a hablar bastante de SEO on page). 

Google intenta firmemente mejorar en su capacidad para interpretar el contenido de las imágenes. Cualquier pista que le demos la agradecerá y mucho. 

Piensa en todas las fotos de tu eCommerce ¿las subes directamente desde la tarjeta de la cámara? ¿Las bajas de páginas de stock y listo? Si es así, me temo que tienes unas cuantas con nombres como “DSC32344345.jpg” o “stockphoto_id33236.jpg”. Como puedes imaginar esto no aporta nada al buscador, no hay ninguna estrategia detrás. 

Las buenas prácticas de cara a Google y el resto de motores de búsqueda dictan que deberías tomarte el tiempo suficiente para cambiar el nombre: 

• Utilizando palabras descriptivas que aporten un mayor valor contextual al bot correspondiente.

• Basándonos en la keyword research para elegir las que mejor respondan a una intención de búsqueda concreta y alineada con el contenido de la página de destino.

• Respetando la sintaxis: evita espacios (mejor separar las palabras con guiones medios), caracteres extraños como tildes, eñes, cedillas…

Como ya hemos dicho, para los buscadores, las imágenes siguen siendo conjuntos de pixeles, con lo que resultan completamente opacas. Es cierto que están avanzando en el reconocimiento, pero esa frontera parece más bien lejana. 

Afortunadamente existe la posibilidad de agregar cierto valor semántico a las imágenes a través de atributos como el denominado alt text o texto alternativo. El principal objetivo y la razón de ser del alt text es atender a las necesidades de las personas con determinados requerimientos de accesibilidad como las dificultades visuales. 

Los navegadores, durante la navegación por voz, utilizan el texto alternativo para indicar de palabra el contenido de las imágenes. Sólo por esto ya sería una buena práctica, pero es que, además, es positivo desde el punto de vista del SEO porque traslada esa información semántica al robot y esto es determinante a la hora de posicionar en las búsquedas por imágenes (e incluso funciona como anchor text cuando enlazamos desde una foto). 

Un alt text optimizado deberá: 

• Definir el contenido de la imagen sin repetir literalmente el nombre del archivo.

• Ser único: no aporta valor que todas las imágenes de una misma página tengan el mismo nombre.

• Incluir keywords sin sobreoptimizar. Sería ridículo y poco útil el repetir varios sinónimos y atributos sin sentido ni orden semántico-sintáctico.

• Debe estar escrito de forma “natural”, es decir, no hay que separar las palabras con guiones ni eliminar preposiciones o artículos. Es simplemente una descripción literal. 

Ya lo comentaba al principio: uno de los puntos más críticos en la optimización de las imágenes es el peso de las mismas. Tenemos cierta tendencia a pensar que cuanto más grandes mejor para el cliente, pero hay que ser razonables en este aspecto. 

Un mayor tamaño y resolución implican siempre un peso superior con lo que ya estamos incurriendo en un error porque la velocidad de carga se resiente, y con ella, la experiencia de uso. 

Además, hay que tener en cuenta que una imagen de 2165x3030 pixeles difícilmente tendrá justificación en una web. Por lo general lo que ocurre con estas fotos es que son redimensionadas por el CMS para mostrarlas a un tamaño determinado más lógico (imagina, por ejemplo, 850x500) Esto ralentiza todavía más la carga. 

Para hacerlo tienes varias opciones. Si tienes maña puedes utilizar photoshop para optimizar las imágenes y si no es lo tuyo y tampoco tienes a mano a un diseñador no te preocupes porque hay alternativas sencillísimas de usar: 

• Jpegmini: un software de escritorio disponible para Mac y PC que resulta muy intuitivo y promete reducciones de hasta un 80% en el peso.

• Tinypng: servicio 100% online que permite subir hasta 20 imágenes de hasta 5 megas y las procesa juntas. Lo mejor es que está pensado específicamente para el formato png con lo que conserva la transparencia sin problema.

• Imageoptimizer: bastante austero en cuanto a interfaz pero resolutivo y con algunas opciones. Puedes usarlo online o descargarlo como software de escritorio. 

Esto, unido al punto anterior, puede marcar la diferencia entre una página con un buen aspecto y una página con el mismo buen aspecto pero que cargue de manera eficiente y rápida. 

Existen diferentes formatos de imagen, claro, pero es que cada uno de ellos es apropiado para uno u otro fin: 

Formato Jpeg o jpg

Este es uno de los clásicos en las imágenes digitales. Lo bueno es que siempre tiene un margen de optimización alto, pero también trae mucha información de color que puede no hacer falta según lo que quieras mostrar. ¿Una foto de producto en todo su esplendor? Ok, jpg es tu formato, ¿un icono en 2 colores? Busca otra opción mas eficiente. 

Formato GIF

Otro viejo rockero que nunca acaba de desaparecer. Sus principales argumentos son dos: su capacidad para mantener la transparencia de los fondos y que son animados. Lo malo es que las animaciones pesan bastante y cuanto intentas ajustar el peso suelen perder bastante calidad. 

Formato PNG

La alternativa ideal a GIF cuando buscamos transparencia y un peso contenido en imágenes con poca información de color como iconos o ilustraciones. 

Además, png viene en dos sabores: png8 y png24. El número hace referencia a la cantidad de colores con los que se componen las imágenes (256 y 16 millones respectivamente) por lo que el de 24 es más indicado para fotos con alguna tinta más mientras que el de 8 es realmente óptimo para imágenes básicas.

Lee la serie completa aquí: 

• Optimización de imágenes: 10 consejos imprescindibles (2)