Uso avanzado de imágenes en internet

Nos centramos en la calidad de nuestros textos pero algunos usamos las imágenes igual que hace 10 años, a pesar de que la tecnología cambió.

Jorge Baffa, autor Jorge Baffa Seguidores: 22

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 TinyPNG1 o Compressor.io.2

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 Smush3 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,4 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 Support5 (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 BAM6 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,7 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!


Opiniones:
47
Votos:
130

Este video podría interesarte👇👇👇

Colabora con la difusión de este artículo traduciéndolo

Traducir al inglés Traducir al italiano Traducir al portugués
Código QR de acceso al artículo Uso avanzado de imágenes en internet

Este artículo no expresa la opinión de los editores y responsables de FOROALFA, quienes no asumen responsabilidad alguna por su autoría y naturaleza. Para reproducirlo, salvo que estuviera expresamente indicado, por favor solicitar autorización al autor. Dada la gratuidad de este sitio y la condición hiper-textual del medio, agradeceremos evitar la reproducción total en otros sitios Web. Publicado el 28/01/2016

Descargar PDF

Debate

Logotipo de
Tu opinión

Ingresa con tu cuenta para opinar en este artículo. Si no la tienes, crea tu cuenta gratis ahora.

Retrato de Alberto Cortez Garza
0
Jul 2017

Me parece muy interesante este articulo ya que la tecnologia habla de como la tccnolof}gia es parte de todo lo que vivimos dia con dia, en estos tiempos la tecnologia ya se usa para todo por eso me identifico mucho con este comentario

0
Retrato de Matias Martín Longarte
0
Jun 2017

Muy interesante. A aggiornarse!!!

0
Retrato de Eli Urruela
0
Eli Urruela
Oct 2016

Muy buen artículo, no sabía de ese formato, es una lástima que la redes sociales más utilizadas no lo acepten aún.

1
Retrato de Germán Varela
0
May 2016

Gracias!!!! no había considerado este formato para ser utilizado en funciones de internet, es una excelente opción.

1
Retrato de Roberto Angulo
1
Mar 2016

Buenas! Con miras a la optimización de las imágenes para cada dispositivo, esta es una herramienta muy útil http://www.responsivebreakpoin... tu configuras cuantas imágenes generará, teniendo en cuenta el peso de las mismas y el escalado, proporciones (aspect ratio) y si necesitas imágenes con doble resolución para dispositivos con pantalla retina. Espero sea útil. Con respecto al svg, el peso del mismo, como bien dices, dependerá de cada caso, esto es de la complejidad del gráfico en cuestión, pues mientras más efectos y nodos tenga, crecerá su tamaño en kb, además del montón de lineas de código que podría generar. Buen articulo. Saludos.

1
Retrato de Jorge Baffa
22
Mar 2016

Roberto, qué interesante herramienta! No la conocía. Muchas gracias por el dato.

0
Responder

Te podrían interesar

Próximos seminarios online

Seminarios de actualización para especializarte junto a los que más saben

Estrategia de Marca

Estrategia de Marca

Claves para programar el diseño de símbolos y logotipos de alto rendimiento

20 horas (aprox.)
1 febrero

Tipología de Marcas

Tipología de Marcas

Criterios y herramientas para seleccionar el tipo adecuado al diseñar una marca

15 horas (aprox.)
1 febrero

Branding Corporativo

Branding Corporativo

Cómo planificar, construir y gestionar la marca de empresas e instituciones

20 horas (aprox.)
1 marzo

Auditoría de Marca

Auditoría de Marca

Taller de práctica profesional: análisis, diagnóstico y programa de marca sobre casos reales

30 horas (aprox.)
1 marzo

Relecturas del Diseño

Relecturas del Diseño

Una inmersión en el discurso sobre el diseño para despejar sus nociones más controvertidas: creatividad, innovación, arte, tecnología...

20 horas (aprox.)
1 abril