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 Buenos Aires
Followers:
22
Comments:
47
Votes:
127
Compartir:

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.

Followers:
22
Comments:
47
Votes:
127
Compartir:

47 Comments

Comment

This article does not express the opinion of the editors and managers of FOROALFA, who assume no responsibility for its authorship and nature. To republish, except as specifically indicated, please request permission to author. Given the gratuity of this site and the hyper textual condition of the Web, we will be grateful if you avoid reproducing this article on other websites. Published on 28/01/2016.

You may be interested

Oscar Armando Carballido
Idioma:
ES
Author:

Oscar Armando Carballido

Title:

Concepto de diseño de smartwatch

Share:
Interactions:
Votes:
25
Comments:
12
Followers:
3
Marcio Duarte
Idioma:
PT
Author:

Marcio Duarte

Title:

Sua presença digital é relevante?

Translations:
Share:
Interactions:
Votes:
0
Followers:
5
Javier Cuello
Idioma:
PT
Author:

Javier Cuello

Title:

10 conselhos para projetar apps

Translations:
Share:
Interactions:
Votes:
12
Followers:
153
Leonardo Álvarez
Idioma:
ES
Author:

Leonardo Álvarez

Title:

¿Razones para invertir en Internet o justificaciones del gasto?

Share:
Interactions:
Votes:
29
Comments:
20
Followers:
0
Juan Carlos Mata
Idioma:
ES
Author:

Juan Carlos Mata

Title:

De tecnologías, virus y zombis

Share:
Interactions:
Votes:
4
Comments:
2
Followers:
1
Marcio Duarte
Idioma:
ES
Author:

Marcio Duarte

Title:

¿Tu presencia digital es relevante?

Translations:
Share:
Interactions:
Votes:
5
Comments:
3
Followers:
5
My opinion:

Login with your account to comment on this article. If you do not have it, create your free account now.

0
Alberto Cortez Garza
One year ago

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
Reply
0
Matias Martín Longarte
One year ago

Muy interesante. A aggiornarse!!!

0
Reply
0
Eli Urruela
One year ago

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
Reply
0
Germán Varela
May 2016

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

1
Reply
1
Roberto Angulo
Mar 2016

Buenas! Con miras a la optimización de las imágenes para cada dispositivo, esta es una herramienta muy útil http://www.responsivebreakpoints.com/ 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
22
Jorge Baffa
Mar 2016

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

0
Reply
2
Daniela Albán
Mar 2016

Muchas gracias por el aporte! No tenía claro el uso de SVG, siempre prefería usar PNG, ya que lo he usado para diversos trabajos de web y diseño editorial.

1
22
Jorge Baffa
Mar 2016

Hola Daniela.

De todas maneras el PNG sigue muy vigente porque, bien optimizado, suele lograr tamaños de archivo mucho más reducidos que en SVG, sobre todo para gráficos complejos. Y en un ámbito web la reducción del tamaño en kb es importante.

Hay que evaluar en cada caso cuál es la conveniencia de utilizar un formato u otro.

0
Reply
0
Luis Angel Valderrabano Hernandez
Mar 2016

Mi hermano es programador y siempre me pide los archivos graficos en svg, ya después me explico el proceso y entendí su ventaja, pero en este articulo me agrada el enfasís sobre el escalado, que es de vital importancia con las pantallas de alta gama hoy en dia.

1
22
Jorge Baffa
Mar 2016

Hola Luis. Lo de pedir los archivos gráficos en svg es muy útil porque es un formato que se puede abrir y editar luego con cualquier otro editor.

Por ejemplo, alguien que trabaja en Linux seguramente no tenga Ilustrator, pero si el diseñador le envía los archivos en formato SVG podría abrirlos para editarlos en programas similares como Inkscape, y viceversa.

0
Reply
3
Silvina Perez
Feb 2016

Gracias Jorge, muy interesante y útil aporte.

1
22
Jorge Baffa
Feb 2016

Me alegro que te haya gustado. Gracias.

0
Reply
0
Juan Carlos López Martínez
Feb 2016

Yo soy de aquellos que "siguen utilizando las imágenes igual que hace 10 años". Gracias por el artículo, importante para saber más y qué recursos intervienen.

1
22
Jorge Baffa
Feb 2016

Gracias a tí Juan! Un abrazo.

0
Reply
0
Roberto Juarez Vertiz
Feb 2016

Excelente el artículo, sirve de mucho, dado que estamos en la búsqueda y uso de imágenes de internet.

1
22
Jorge Baffa
Feb 2016

Me alegra saber que te ha ayudado el artículo Roberto. Un abrazo.

0
Reply
2
Amparo Zúñiga
Feb 2016

Muy bien tu aporte,y se debe recalcar a menudo porque poco se tiene en cuenta , sobre todo los estudiantes .

1
22
Jorge Baffa
Feb 2016

Gracias Amparo. Estoy de acuerdo en que es algo que a menudo olvidamos, y me incluyo.

0
Reply
0
Carlos Ballen
Feb 2016

Creo que el asunto de la optmización en cuanto a dimensiones y tamaño es aun no esta muy definida. Con tendencias como el responsive web design, los sitios de contenido adaptativos y los dispositivos con pantallas de alta definición (Como los retina), aun nos falta mucho para llegar a un acuerdo estándar de cómo debemos manejaras. Muy interesante tu artículo. Slds!

3
22
Jorge Baffa
Feb 2016

Gracias Carlos. Sin duda, el tema es realmente complejo, la enorme variedad de pantallas ha hecho relativizar muchos conceptos. Antes era mucho más sencillo saber qué tamaño debía tener un elemento, una imagen, un popup o qué cosas entraban en la pantalla sin hacer scroll.

0
Reply
0
Sergio Lopez
Feb 2016

Muy interesante recordatorio Jorge, ¡ felicidades por tu artículo !

1
22
Jorge Baffa
Feb 2016

Gracias Sergio. Muy apropiada la expresión "recordatorio" ya que se trata de procesos sencillos, pero muchas veces en el apuro nos olvidamos de hacerlo.

0
Reply
0
Tannia Garrido
Jan 2016

Interesante!! Gracias!

1
Reply
77
Alejandro Arrojo
Jan 2016

SVG sí lo acepta Joomla, mucho mejor que WordPress.

2
22
Jorge Baffa
Jan 2016

Gracias Alejandro. No lo sabía, hace mucho que no uso Joomla.

0
Reply
1
Pablo Gabriel Rubino
Jan 2016

Interesante, gracias.

1
22
Jorge Baffa
Jan 2016

Gracias Pablo!

0
Reply
0
Edwin Moreno
Jan 2016

Corto, pero conciso, Gracias

1
22
Jorge Baffa
Jan 2016

Gracias Edwin. El artículo original tenía más de 2.000 palabras pero tuve que reducirlo casi a la mitad según los requerimientos del sitio.

0
0
Edwin Moreno
Jan 2016

Soy diseñador Industrial, También soy Docente y analista de diseño; vivo en Colombia, enséñame a publicar articulos en foroAlfa tengo algunos y me gustaria compartirlos. También te comento que pienso viajar a Baires a realizar una maestría en Diseño e Innovación en la UBA, sería bueno tenerte en contacto mi email es amorenojaimes@gmail.com, si te parece. Saludos!!!

0
22
Jorge Baffa
Jan 2016

Te escribo a tu email así quedamos en contacto por cualquier cosa. Respecto a lo de publicar artículos, fijate arriba en las opciones de tu perfil. Hay una que dice publicar un artículo.

0
Reply
0
Jorge Navarrete
Jan 2016

Gracias, buena información

1
22
Jorge Baffa
Jan 2016

Gracias Jorge!

0
Reply
0
Jeannette Lozano
Jan 2016

hola excelente aporte, gracias

1
22
Jorge Baffa
Jan 2016

Gracias Jeannette!

0
Reply
2
Juan Bravo Bravo
Jan 2016

Gracias Jorge, muy útil y clarificador

1
22
Jorge Baffa
Jan 2016

Gracias Juan!

0
Reply
0
Emanuel Moreira
Jan 2016

Gracias Jorge!. Muy útil la data e interesante la web de makeyourmoneymatter.org. Saludos!

1
22
Jorge Baffa
Jan 2016

Gracias Emanuel! A mí me facinó esa animación. Un abrazo.

0
Reply
0
Jenar Tejedor
Jan 2016

Gracias por el artículo, muy claro, pero no llego a ver o a entender las animaciones de Bam.

1
22
Jorge Baffa
Jan 2016

Jenar. Ten en cuenta que a veces demora un poco en cargar la página. Fijate que a medida que vas bajando aparecen unas imágenes que se mueven de una forma u otra según si haces scroll hacia abajo o hacia arriba.

0
Reply
1
Luis Daniel Sánchez
Jan 2016

Gracias Jorge, muy buena recopilación y enlaces útiles. Otra desventaja de SVG es que no es útil para fotografías, sino únicamente ilustraciones o animaciones, ¿correcto?

3
22
Jorge Baffa
Jan 2016

Así es Luis. El SVG es solo para gráficos, no fotografías. Para estas últimas siempre conviene JPG.

1
Reply
2
Cristian Eslava
Jan 2016

Muy buen post aunque para completarlo no debemos de olvidar el formato de compresión de Google WebP https://developers.google.com/speed/webp...

5
22
Jorge Baffa
Jan 2016

¡Es cierto Cristian! Excelente aporte. Gracias

1
0
Marta De Olloqui
Jan 2016

Claro.concreto.util.gracid Jorge Baffa

1
22
Jorge Baffa
Jan 2016

Gracias Marta!

0
Reply

Upcoming online courses

Branding Corporativo

Branding Corporativo

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

4 weeks
17 Septiembre

Estrategia de Marca

Estrategia de Marca

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

4 weeks
29 Octubre

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, función social...

4 weeks
28 Enero 2019

Branding: Diseñador y Cliente

Branding: Diseñador y Cliente

Tratar con el cliente, hacer presupuestos y planificar las etapas de la creación de una marca

3 weeks
22 Abril 2019

Auditoría de Marca

Auditoría de Marca

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

6 weeks
22 Junio 2019