Uso avanzado de imágenes en internet

Si tienes un blog o una página web para ofrecer tus servicios profesionales, es común que te enfoques mucho en la calidad de los textos, la redacción, la ortografía, y en el valor que aportas a tus lectores. Sin embargo es posible que estés entre los que siguen utilizando las imágenes igual que hace 10 años. Dado que la tecnología ha ido cambiando y que las imágenes han cobrado gran relevancia para las redes sociales, vale la pena ponerse al día.

Los formatos de imágenes habituales

Repasemos los formatos de imagen que se encuentran habitualmente en las páginas Web. Seguramente los conoces a todos porque se utilizan desde hace años:

• JPG: Es el formato más utilizado por ser el más adecuado para mostrar fotografías. Logra imágenes de excelente calidad con tamaños de archivo bastante reducidos.

• PNG: Si se necesita mostrar cualquier tipo de gráfico generado con colores planos como logos, imágenes con transparencia, infografías y capturas de pantalla, el formato PNG es el que mejores resultados ofrece.

• GIF: El formato GIF es apropiado para animaciones ya que permite grabar varias imágenes para mostrarlas de forma secuencial.

Optimización

Al utilizar los formatos de imagen mencionados, no es lo más común tener en cuenta la correcta optimización del archivo antes de subirlo a Internet. Esta optimización consiste en dos pasos:

1. Escalar la imagen: no tiene sentido utilizar una imagen de 1500 pixeles de ancho cuando se va a mostrar de 800.

2. Comprimir el archivo: las imágenes casi siempre tienen una calidad muy superior a la necesaria para mostrarse correctamente en internet. Es necesario entonces ajustar la compresión del archivo a valores más apropiados.

Herramientas

Para escalar una imagen se puede utilizar cualquier editor gráfico, como Photoshop o Gimp. Si se trata de una imagen generada con Ilustrator o Inkscape, se deben definir correctamente las medidas al momento de exportarla. Para comprimirla es posible utilizar esos mismos editores o algunas herramientas online. Hay algunas que ofrecen resultados excelentes y son muy sencillas de usar, como TinyPNG¹ o Compressor.io.²

Para quienes utilicen WordPress, este gestor de contenidos cuenta con un editor de imágenes muy potente que la mayoría desconoce, y varios plugins que hacen la tarea aún más sencilla: WP Smush³ optimiza automáticamente las imágenes al momento de subirlas al servidor.

SVG: imágenes escalables

A diferencia de los formatos anteriores, el formato SVG no trabaja con pixeles. Esto ya es suficiente para considerarlo como el futuro de las imágenes en Internet. Hasta hace poco, para poder utilizar en la Web los gráficos vectoriales generados con aplicaciones como Adobe Illustrator, era necesario pasarlos a pixeles, lo cual desechaba todas las ventajas de los gráficos vectoriales. Con el formato SVG la imagen no está compuesta por pixeles, sino por código que el navegador puede interpretar. Es el navegador el que genera la imagen a partir de las indicaciones dadas por el código. Este formato ofrece varias ventajas:

• No se pixela nunca. Una imagen vectorial puede escalarse hasta el infinito manteniendo siempre la misma nitidez. ¿Qué significa un pixel en la era responsive? Tanto si se lo visualiza en la pantalla de 320 píxeles de un Samsung Pocket o en un MacBook Retina de 2900 pixeles, el gráfico siempre se verá con excelente nitidez.

• Los buscadores pueden indizarlo. Al ser código, Google puede saber exactamente qué hay dentro de una imagen SVG.

• Puede ser mas liviana que un PNG, Sila imagen no es muy compleja puede tener un peso menor, aunque hay que evaluar cada caso en particular.

• Tiembla el GIF... ya que el formato SVG también se puede animar. Programas como Adobe Edge Animation permiten crear animaciones en este formato. Y, atención, como es código que el navegador entiende, la animación puede responder a ciertas acciones del usuario: es un formato de animación interactivo.

Sin embargo existen dos desventajas que pueden ser suficientes como para no utilizar este formato, aunque una de ellas tiene solución:

• Twitter y Facebook por ahora no lo aceptan. Esto es un problema porque los enlaces con imágenes reciben muchos más clicks en las redes sociales. Cuando alguien comparte un artículo, Twitter transforma la imagen principal en Twitter Card haciendo que destaque muchísimo en la línea de tiempo; en Facebook sucede algo similar. Pero, lamentablemente,si la imagen destacada es un SVG no será tenida en cuenta. Solución: quienes trabajan con WordPress, pueden utilizar el plugin Yoast SEO,⁴ que permite definir una imagen alternativa para enviar a las redes sociales. En ese caso se puede subir una versión de la imagen en formato PNG, que no aparecerá en la página pero sí se enviará a las redes sociales cuando alguien comparta la página.

• Pinterest tampoco admite el SVG aún. Si alguien quisiera pinear tu gráfico o infografía, no podrá hacerlo.

Hace ya un tiempo que estoy utilizando el formato SVG. En algunos casos no consigo hacer economía de tamaño, ya que un PNG bien optimizado suele ser más liviano si se trata de un gráfico de complejidad media y alta, pero la nitidez que se obtiene con el formato SVG es incomparable. El SVG es una apuesta a largo plazo. Utilizar las últimas tecnologías siempre ayuda al posicionamiento en buscadores. Google trata de darle lo mejor a sus usuarios, y un sitio web tecnológicamente actualizado es mejor visto frente otros que no cuidan ese aspecto. Tampoco es cuestión de poner todos los gráficos en SVG. Hay que evaluar en cada caso la conveniencia de implementarlo.

Un par de tips finales

Capturas de pantalla. Cuando hacemos tutoriales y necesitamos incluir capturas de pantalla, el formato más adecuado para grabarlas es el PNG. Existen aplicaciones online capaces de guardar una página HTML en formato SVG en lugar de capturarla en pixeles. Sería lo más lógico, considerando que una página web en su mayor parte no está compuesta por pixeles. Sin embargo, por ahora las sigo haciendo en PNG, porque me resulta más práctico.

SVG en WordPress. Si tienes tu blog corre sobre la plataforma WordPress no vas a poder insertar una imágen SVG tan facilmente, ya que ese formato está deshabilitado por cuestiones de seguridad. Para habilitarlo tienes dos opciones:

1. Modificar el archivo «functions.php» de tu tema o

2. Instalar el plugin SVG Support⁵ (mi solución preferida).

Luego podrás subirlas e insertarlas en tus artículos como cualquier otra imagen.

Un par de ejemplos

Antes decía que el formato SVG es el futuro de las imágenes. También mencioné el hecho de que se pueden realizar animaciones interactivas. Un buen ejemplo es la página británica BAM⁶ en la que se puede apreciar cómo se animan las imágenes a medida que se va mostrando la página. Otro excelente ejemplo es el sitio Make Your Money Matter,⁷ hecho íntegramente en formato SVG. A medida que se va desplazando la página la animación cobra vida. Es posible avanzar o retroceder como si se tratara de un video juego.

¿Qué te pareció? ¡Comparte tu opinión ahora!

Este video podría interesarte👇👇👇