Para que sea eficiente y eficaz la inserción de una o varias imágenes en cualquier post, página web, redes sociales como Google+ o actualización, allí van unos consejos.
Las imágenes, son las grandes olvidadas en el mundo SEO y son la que mayor número de bytes se comen del tráfico de datos en un dispositivo móvil, descartando por supuesto al vídeo.
Incluso puede que se coma demasiado espacio dentro de un texto.
Consejos para optimizar imágenes
1. Reducir el tiempo de carga de la imagen
Es uno de los puntos fuertes en el mundo SEO.
El navegante tiene poco tiempo, y encima lo dedica a visionar tus actualizaciones, así que si se lo ponemos fácil, o sea una carga rápida, mejor.
Para ello, debemos buscar un equilibrio dentro del código fuente. Si insertamos un gif es mejor que si dotamos de movimiento un gráfico mediante css y javascript.
Todo ese código tiene que ser leído y ejecutado por el navegador. Tiempo que perdemos.
Si además a esa imagen le damos órdenes al servidor de que la aloje en la cache para futuras visitas y que la sirva comprimida (gzip), mejor aún.
2. Tipo de imagen
El formato más popular de archivar imágenes es el formato comprimido .jpeg.
Da mucha calidad aún perdiendo parte de sus bits, llamado lowless (con poca pérdida). Pero a veces puede llegar a ser pesada para ser enviada por la red. Ya no hablemos del formato .bmp.
Uno de los que son más simples, y que a simple vista no parece alterar su visionado comparado con un jpeg, es el formato .png .
Con una pérdida algo mayor (no es un formato lowless), y un visionado normal, puede llegar a reducir hasta un 50% su peso respecto a un .jpeg, mucho mayor si lo comparamos con un .bmp . Si la imagen contiene pocos colores la ganancia en peso puede llegar a ser muy grande.
Actualmente ya existen otros dos formatos que posiblemente se conviertan en estándar, aunque aún no están demasiado distribuidos, como son:
- WebP (creado para la creación de vídeo bajo formato Vp8 de Google)
- y la evolución del jpeg, JPEG-XR desarrollado por Microsoft.
Ambos son muy buenos, pero no son los más habituales en el mercado, por lo que se puede llegar a tener problemas de visualización, sobre todo si el navegante utiliza Firefox, ya que no soporta javascript (si no hacemos uso de algun plugin).
Y que JPEG-XR solo lo soporta IE (Internet Explorer y Edge -Win10-)
3. Formato de la imagen
Existen diferentes tramas para confeccionar una imagen o gráfico.
Las dos más utilizadas son:
- Gráficos vectoriales: se usan líneas, polígonos o formas geométricas para componer la imagen.
- Gráficos de trama: se codifica la imagen mediante valores independientes a cada pixel afectado.
Los gráficos vectoriales son adecuados para logotipos, iconos, textos (por ejemplo el nombre de la marca), iconos, etc. dado que se forman figuras mediante bloques uniformes, y que son de mayor calidad a la hora de reducir su tamaño, ya que si se amplia no difumina los contornos ni las formas.
Ofrecen resultados más nítidos a menor resolución. Son los mas aconsejables para dispositivos de alta resolución, como puedan ser pantallas de más de 20″.
Si lo que deseamos es mostrar una imagen tipo foto, aquí los vectoriales no son para nada aconsejables.
Las tramas más complejas la hacen que se convierta en un océano de polígonos y perdamos esa textura y realidad que los gráficos de trama nos aportan.
Parece muy lioso pero para nada es complicado. Solo tenemos que adaptar los consejos a la imagen a tratar.
El uso de imágenes en Google+
Si ya deseamos profundizar un poco más, siempre se puede aligerar el peso de la imagen mediante la paleta de colores, disminuyendo los bits asignados a cada pixel. De los 32 bits (16 millones de colores) a los 5 bits (32 colores).
El ejemplo más practico sería:
- Un logotipo monocromático:
Está claro que la resolución es un factor a tener en cuneta, pero si utilizamos un único color, o dos, y resultan ser muy parecidos a los tres colores básicos RGB, utilizaríamos un tasa de 5 bits. Bien se podría ahorrar un 90% de peso en este caso sobre el 32 bits.
- Una foto con muchos elementos
Por ejemplo el skyline de New York. Aquí es necesario utilizar casi toda la gama de la paleta para que no de sensación de pixelada o colores no naturales. Deberíamos escoger los 32 bits, e intentar reducir sus dimensiones hasta el mínimo posible sin perdida visual y lo más pequeñas posibles. Disminuir el numero de pixeles hace que su peso baje considerablemente sin una gran perdida visual.
Todo esto ayuda a la carga rápida de una página web, más si utilizamos un dispositivo en movilidad, y hace que Google+, cuando presenta el enlace en tu nueva actualización, cargue mucho más rápido y coma menos bytes.
Jordi Torregrosa, consultor de Marketing Digital
Formación Relacionada
