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

13/08/2018
  • Prepara las fotos de tu eCommerce con estos 10 consejos imprescindibles para la optimización de imágenes. ¡Mejora tu web y consigue más tráfico!

  • Con la que está cayendo en cuanto al SEO, la experiencia del usuario y el mobile necesitamos ponerle un poco de atención extra a las fotografías de nuestro eCommerce. Con estos 10 consejos imprescindibles para la optimización de imágenes vas a conseguir exprimir el potencial de tu página con acciones sencillas de implementar.
  • La importancia de la optimización de las imágenes online

  • 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). 

    Las imágenes son uno de los recursos que más pueden abundar en una página y una incorrecta optimización hace que la carga sea mucho más lenta y pesada, los usuarios se frustran y los buscadores emplean un precioso tiempo que podrían estar utilizando en rastrear otras páginas más útiles para el negocio. Vamos con los primeros 5 consejos y veréis que con pocos cambios se puede mejorar notablemente.
  • #1 – Renombrando las fotografías

  • 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…
  • EJEMPLO: siempre será mejor utilizar algo como “carcasa-iphone-x-silicona.jpg” que “dsc345466.jpg”. La información que Google empieza a extraer del contenido es mucho más concreta y más aún si está alineada con el contexto editorial.

  • #2 – Utilizando el atributo “alt”

  • 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. 
    Por cierto: no es recomendable que utilices alt text en todas las imágenes, siempre existen recursos gráficos con una intención exclusivamente decorativa. No fuerces la máquina con ese tipo de imágenes porque se puede interpretar como un intento de sobreoptimización.
  • EJEMPLO: en el caso de la carcasa que comentábamos en el ejemplo anterior podríamos jugar de forma que el resultado final fuera similar a alt=”Carcasa de vinilo azul antideslizante para Iphone X”. Mucho más descriptiva y complementaria con respecto al nombre del archivo.

  • #3 – Cuidado con el tamaño y el peso

  • 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. 

    Cuidado también con usar imágenes, por ejemplo, en los fondos de modo decorativo. Es una forma bastante fácil de lastrar el tiempo de carga.
  • #4 – Comprime SIN pérdida

  • Te sorprendería hasta que punto una imagen puede bajar de peso sin que el usuario perciba una pérdida de calidad en la misma. Una fotografía siempre tiene información accesoria que se puede eliminar como el exif (un montón de metadatos sobre la cámara con la que se ha tomado la imagen, la fecha, la hora, coordenadas GPS…), pero también ajustar otros parámetros.
  • 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. 
    Para saber cuales son las imágenes que necesitan pasar por la operación bikini te recomiendo que utilices algún recurso como Page Speed o la extensión Lighthouse de Google o GT Metrix. Todas ellas te dirán exactamente cuáles son y el porcentaje que puedes llegar a ahorrar.
  • #5 – Elije el formato correcto

  • 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.

  • Hasta aquí los primeros 5 de los 10 consejos imprescindibles para la optimización de imágenes. ¡Atento a la próxima entrega! ¿Te pones las pilas con las fotos aprovechando el verano?

  • Lee la serie completa aquí: 

    Imágenes | Pexels, Google Page Speed, Jpeg Mini.

Laia Ordoñez


Laia Ordóñez es experta en copywriting y marketing de contenidos para eCommerce. Es Marketing & Content Manager en DueHome, consultora independiente en copywriting y contenidos, y editora jefe del blog de Oleoshop.
comments powered by Disqus

Buscar entradas

Últimas entradas

Utilizamos cookies propias y de terceros para realizar la medición de nuestra web. Al continuar con la navegación entendemos que se acepta nuestra política de cookies

Acepto