Si tienes una web o un ecommerce, optimizar las imágenes es un arte que querrás dominar. Desde atraer a más clientes a través de Google images a reducir el tiempo de carga de la web, optimizar tus imágenes puede ser una parte muy importante a la hora de construir una web de éxito
¿No te has preguntado muchas veces…?:
- ¿Por qué cuando hago una búsqueda de imágenes en Google mis productos no aparecen?
- ¿Necesito añadir el atributo «Alt» a mis imágenes?
- ¿Qué diferencias hay entre JPEG, GIF, PNG o quizá tendría que utilizar otras?
En este post voy a responder estas y otras preguntas. Prepárate para profundizar en estos 10 trucos para optimizar y posicionar tus imágenes:
Contenido
1. Pon nombres descriptivos y en castellano llano a tus imágenes
Es muy fácil caer en la tentación de hacer fotos y dejarles el mismo nombre que la cámara les da. Pero antes de que conviertas esto en un hábito, vamos a ver por qué no es buena idea.
Cuando hablamos de SEO, es importante que escojas muy bien tus palabras clave (keywords) para que ayuden a posicionar tu web en los motores de búsqueda. Al crear nombres descriptivos, ricos en palabras clave y sencillos es crucial para optimizar tus imágenes. Los motores de búsqueda no sólo buscan el texto en el contenido escrito tu web, también lo buscan en tus imágenes.
Por ejemplo:
Puedes mantener el nombre que tu cámara ha generado al hacer la foto, por ejemplo DSC012546.jpb. Pero puedes hacerlo aún mejor cambiándole el nombre a meade-lx70-n6.jpg
Piensa también que tus clientes buscan productos dentro de tu propia web, y los buscarán por su nombre comercial, por ejemplo:
- Meade lx70
- lx70 Meade
- meade n6 lx70
Si estudias la analítica de tu web podrás ver qué patrones suelen utilizar para buscar productos y así aplicarlos a la hora de ponerles nombre. Si no quieres hacer esto último, al menos asegúrate de que los nombres que pongas sean claros, descriptivos y contengan las palabras clave importantes.
2. Optimiza tus Alt Tags de manera inteligente
Los atributos Alt tags, o texto alternativo, son muy importantes y adquieren especial valor cuando un navegador no es capaz de cargar las imágenes de una web. Cuando esto sucede, si éstas tienen texto alternativo, éste aparecerá y el usuario podrá saber qué tipo de imagen debería aparecer.
Los atributos Alt también añaden valor a tu web. Si son los adecuados, pueden ayudar mucho a mejorar el posicionamiento de la web. De hecho, añadir Alt tags a tus imágenes es probablemente la mejor manera de que tus productos aparezcan en la búsqueda de imágenes de Google.
Veamos un ejemplo del código fuente de un atributo ala:
<img src="meade-lx70-n6.jpg" alt="Meade lx70 n6">
alt=»Meade lx70 n6″ es un atributo Alt
La prioridad número 1 a la hora de optimizar imágenes es añadir el atributo ala a todas las imágenes de tu web.
Normas básicas de alt tags:
- Describe tus imágenes en lenguaje claro
- Si vendes productos que tengan número de serie, inclúyelo en el alt tag
- No recargues de palabras clave tus alt tags (por ejemplo: alt»telescopio meade lx70 el mejor que existe en el mundo entero»)
3. Estudia las dimensiones de tus imágenes y los ángulos del producto
Una tendencia muy habitual estos días es mostrar múltiples ángulos de tu producto. Vista frontal, superior, inferior, lateral, etc. La mejor idea de posicionar cada una de ellas es que sus alt tags respectivos hagan referencia precisamente a la perspectiva. En el caso del telescopio, son interesantes capturas de:
- las lentes
- el trípode
- los mandos de movimiento, etc
Lo cual se traduciría en:
-
<img src="meade-lx70-n6-lentes.jpg" alt="Meade lx70 n6 lentes">
La clave es añadir descripciones a tus alt tags de manera que los potenciales buscadores lleguen a tu web. Si haces este trabajo extra, Google te recompensará trayéndote hambrientos buscadores.
Cuidado con las imágenes grandes
Es muy tentador subir imágenes grandes a nuestra web para que los visitantes tengan una mejor experiencia, pero ten cuidado.
No coloques imágenes muy grandes en tu web y simplemente las escales a través de código fuente. Esto no mejorará el tiempo de carga de tu site, al revés.
En lugar de eso, genera una imagen menor y añade la opción de poder ver un tamaño superior por ejemplo en un pop-up o en una página o ventana por separado.
4. Reduce el tamaño de fichero de tus imágenes
¿Sabías que…?:
- La mayoría de usuarios espera unos 3 segundos a que cargue una web en el ordenador o en el portátil
- … y 5 segundos en el móvil
- Amazon descubrió que si sus páginas eran 1 segundo más lentas, perdía 1.600 millones de dólares al año
Si tienes imágenes que llenan la pantalla y además tardan más de 15 segundos en cargar, puedes despedirte del cliente.
Entonces, ¿qué podemos hacer?
Cuando un cliente visita tu web, puede que tarde un poco en ver el contenido dependiendo del tamaño de las imágenes que tenga que cargar.
Si puedes reducir su tamaño, la velocidad de carga de tu web aumentará, y menos visitantes de tu web se irán a otra.
¿De qué tamaño deberían ser?
Si hablamos de ecommerce, hay una regla que nos aconseja mantener el peso del fichero bajo los 70kB. Esto puede resultar difícil en ocasiones, pero con práctica lo tendrás en un minuto.
5. Conoce qué tipo de imagen utilizar para cada situación
¿JPEG, GIF, PNG? son los tipos más comunes. Vamos a ver cómo afectan a la misma imagen:
Esta imagen es JPEG de 40 kB
JPEG (o jpg) es un tipo de compresión utilizada para imágenes que se ha convertido en un estándar de internet, ya que pueden comprimirse considerablemente. Lo cual resulta en imágenes de calidad en ficheros pequeños. En la imagen superior, se ve una calidad aceptable en un fichero de poco peso.
Esta imagen es GIF de 140 kB
GIF (.gif) es un formato de imagen de inferior calidad que JPEG utilizado habitualmente para imágenes simples como iconos o conceptos decorativos. También pueden ser animados. Se recomiendan sobre todo para las imágenes más básicas de la web (que tengan pocos colores), ya que para imágenes más complejas o fotos, GIF no son interesantes ya que crearán ficheros de más peso pero no imágenes de más calidad.
En las imágenes superiores, casi es imperceptible, ya que la imagen es pequeña, pero podéis apreciar una calidad superior en la jpeg que en la gif.
Esta imagen es PNG de 229 kB
PNG es un formato de imagen muy popular como alternativa a gif. Soportan muchos más colores que estos últimos, no se degradan en los re-guardados, como los jpeg. Sin embargo, pese a que cada vez se usan más, los ficheros de imagen pueden ser muy superiores a los de JPEG.
Aquí tienes algunos consejos para la hora de escoger el formato de imagen:
- Para la mayoría de situaciones en ecommerce, JPEG es la mejor opción. Proporcionan la mayor calidad en el menos espacio de fichero.
- Nunca utilices GIF para imágenes grandes de un producto. El fichero será muy grande y no podrás reducirlo. Utilízalos para thumbnails o imágenes decorativas.
- PNG puede ser una buena alternativa para JPEG y GIF. Si sólo vas a usar fotos en este formato, intenta que sea PNG-8 en lugar de PNG-24. PNG son excelentes para imágenes decorativas simples ya que generan ficheros muy pequeños.
6. Aprende a gestionar tus Thumbnails
Son muy utilizados por la mayoría de ecommerce ya que te dan una idea rápida del producto o categoría a golpe de vista.
Los thumbnails están bien pero ten cuidado porque pueden ralentizar en mucho tu web. Suelen ser un paso crítico en los procesos de compra, y pueden hacer que tu pagina de categoría tarde en cargar como para que el cliente se vaya.
- Haz los thumbnails lo más pequeños posible. Es preferible que sean de inferior calidad a que carguen lento.
- Recuerda ir variando los Alt tags de cada uno para que no se repitan si son imágenes que utilizas con tamaño superior en otras partes de la web.
7. Utiliza Image SiteMaps
Los buscadores no podrán encontrar imágenes que no estén en el código fuente de la web. Así que inclúyelos en un sitemap específico de imágenes y añádelo a tu Google Search Console., donde encontrar guías de cómo hacerlo.
8. Cuidado con tus imágenes decorativas
Como por ejemplo backgrounds, botones, bordes, etc
Pueden añadir un toque especial a la web pero suelen hacer que sea más lenta en cargar. Primero, comprueba su tamaño de fichero y utiliza una plantilla que minimice el tamaño de imágenes de la mayor parte de páginas de tu web.
Aquí tienes algunos consejos:
- Para imágenes de bordes o patrones simples, utiliza PNG-8 o GIF.
- Si es posible, utiliza CSS para colorear en lugar de imágenes.
- Revisa tu imagen de fondo por si ocupa demasiado en disco. Es posible que puedas tener una versión de menor tamaño de fichero.
9. Utiliza la cantidad de imágenes que necesites, ni una más
Puedes añadir diferentes vistas a cada producto, pero no caigas en la tentación de proporcionar imágenes en exceso, ya que quizá muchas no aportan nada respecto a las otras y, en conjunto, harán que la página de tu producto tarde mucho más en cargar.
Selecciona bien las vistas principales, aquellas que favorezcan más tu producto, y no añadas más. Aquí vale lo de menos es más.
10. Prueba tus imágenes!
Tú mismo deberás experimentar qué le funciona mejor a tu tienda a la hora de conseguir objetivos, o ventas. ¿Qué es lo que le va mejor?
- Comprueba el número óptimo de imágenes de productos por página. Reducir su número aumentará la velocidad de carga y la tasa de clic. Pero quizá haya casos en los que añadir muchas imágenes redunde en un incremento de pedidos. Haz pruebas y dedúcelo.
- Comprueba qué ángulos de foto prefieren tus clientes. Porque no a todos nos gusta lo mismo pero a la mayoría sí. Cada producto tiene unos ángulos. Encuéntralos
- Descubre qué cantidad de productos puedes listar por página. 10, 20, 50 productos? Haz pruebas y da con el número que mejor se ajuste a tu comercio y mejore la experiencia de tus clientes.
Así que, te animo a probar estos diez trucos y a comprobar cómo tus imágenes (y tu web) se van reposicionando al alza en Google, y tu tienda vende más. Mucha suerte!