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ó.

Retrato de Jorge Baffa Jorge Baffa Buenos Aires

Seguidores:
22
Opiniones:
47
Votos:
128
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.

Seguidores:
22
Opiniones:
47
Votos:
128
Compartir:
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.

Debate

Logotipo de
Mi 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
Alberto Cortez Garza
Hace un año

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
Responder
Retrato de Matias Martín Longarte
0
Matias Martín Longarte
Hace un año

Muy interesante. A aggiornarse!!!

0
Responder
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
Responder
Retrato de Germán Varela
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
Responder
Retrato de Roberto Angulo
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.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
Jorge Baffa
Mar 2016

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

0
Responder
Retrato de Daniela Albán
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
Retrato de Jorge Baffa
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
Responder
Retrato de Luis Angel Valderrabano Hernandez
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
Retrato de Jorge Baffa
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
Responder
Retrato de Silvina Perez
3
Silvina Perez
Feb 2016

Gracias Jorge, muy interesante y útil aporte.

1
Retrato de Jorge Baffa
22
Jorge Baffa
Feb 2016

Me alegro que te haya gustado. Gracias.

0
Responder
Retrato de Juan Carlos López Martínez
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
Retrato de Jorge Baffa
22
Jorge Baffa
Feb 2016

Gracias a tí Juan! Un abrazo.

0
Responder
Retrato de Roberto Juarez Vertiz
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
Retrato de Jorge Baffa
22
Jorge Baffa
Feb 2016

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

0
Responder
Retrato de Amparo Zúñiga
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
Retrato de Jorge Baffa
22
Jorge Baffa
Feb 2016

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

0
Responder
Retrato de Carlos Ballen
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
Retrato de Jorge Baffa
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
Responder
Retrato de Sergio Lopez
0
Sergio Lopez
Feb 2016

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

1
Retrato de Jorge Baffa
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
Responder
Retrato de Tannia Garrido
0
Tannia Garrido
Ene 2016

Interesante!! Gracias!

1
Responder
Logotipo de Alejandro
77
Alejandro
Ene 2016

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

2
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 2016

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

0
Responder
Retrato de Pablo Gabriel Rubino
1
Pablo Gabriel Rubino
Ene 2016

Interesante, gracias.

1
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 2016

Gracias Pablo!

0
Responder
Retrato de Edwin Moreno
0
Edwin Moreno
Ene 2016

Corto, pero conciso, Gracias

1
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 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
Retrato de Edwin Moreno
0
Edwin Moreno
Ene 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
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 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
Responder
Retrato de Jorge Navarrete
0
Jorge Navarrete
Ene 2016

Gracias, buena información

1
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 2016

Gracias Jorge!

0
Responder
Retrato de Jeannette Lozano
0
Jeannette Lozano
Ene 2016

hola excelente aporte, gracias

1
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 2016

Gracias Jeannette!

0
Responder
Retrato de Juan Bravo Bravo
2
Juan Bravo Bravo
Ene 2016

Gracias Jorge, muy útil y clarificador

1
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 2016

Gracias Juan!

0
Responder
Retrato de Emanuel Moreira
0
Emanuel Moreira
Ene 2016

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

1
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 2016

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

0
Responder
Retrato de Jenar Tejedor
0
Jenar Tejedor
Ene 2016

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

1
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 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
Responder
Retrato de Luis Daniel Sánchez
1
Luis Daniel Sánchez
Ene 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
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 2016

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

1
Responder
Retrato de Cristian Eslava
2
Cristian Eslava
Ene 2016

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

5
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 2016

¡Es cierto Cristian! Excelente aporte. Gracias

1
Retrato de Marta De Olloqui
0
Marta De Olloqui
Ene 2016

Claro.concreto.util.gracid Jorge Baffa

1
Retrato de Jorge Baffa
22
Jorge Baffa
Ene 2016

Gracias Marta!

0
Responder

Te podrían interesar

Ilustración principal del artículo Lady Gaga y la Polaroid
Autor:
Rafael Llimós
Título:
Lady Gaga y la Polaroid
Sinopsis:
Dispositivos diseñados por la artista y su equipo por encargo de la famosa marca de cámaras fotográficas instantáneas: entre el minimalismo y lo estrambótico.
Interacciones:
Votos:
17
Opiniones:
11
Seguidores:
1
Retrato de Gabriel Simón
Autor:
Gabriel Simón
Título:
Por qué el diseño es indispensable para las empresas
Sinopsis:
Muchos empresarios ignoran lo que los diseñadores pueden aportarle a sus negocios.
Interacciones:
Votos:
121
Opiniones:
56
Seguidores:
206
Ilustración principal del artículo La era smart
Autor:
Mauricio Arboleda Acosta
Título:
La era smart
Sinopsis:
Un estudio reciente de Global Web Index sostiene que Facebook es la plataforma social más popular del mundo con un 56% de usuarios activos. Youtube ocupa el segundo puesto.
Traducciones:
Interacciones:
Votos:
13
Opiniones:
5
Seguidores:
10
Ilustración principal del artículo Adriano Olivetti, el Steve Jobs italiano
Autor:
Joaquín Eduardo Sánchez Mercado
Título:
Adriano Olivetti, el Steve Jobs italiano
Sinopsis:
Historia de un impulsor del diseño italiano en la mitad del siglo XX, amante y mecenas del arte, pionero de la computación, el diseño industrial, la arquitectura y el diseño gráfico.
Interacciones:
Votos:
99
Opiniones:
31
Seguidores:
537
Retrato de Juan Durando
Autor:
Juan Durando
Título:
Debate: Las nuevas tecnologías ¿modifican el diseño gráfico?
Sinopsis:
¿Cómo influyen las nuevas tecnologías en la labor de diseñar y entender el diseño?
Interacciones:
Votos:
41
Opiniones:
27
Seguidores:
8
Retrato de Elena González Miranda
Autor:
Elena González Miranda
Título:
La portada del libro electrónico
Sinopsis:
En tiempos en que el libro electrónico va ganando terreno, ¿hacia dónde evoluciona el diseño de portada del libro?
Interacciones:
Votos:
56
Opiniones:
21
Seguidores:
20
Ilustración principal del artículo ¿Diseñas sitios web o folletos web?
Autor:
Paulo Lucia
Título:
¿Diseñas sitios web o folletos web?
Sinopsis:
La importancia de ofrecer a los clientes sitios web que ellos mismos puedan administrar y actualizar.
Interacciones:
Votos:
31
Opiniones:
13
Seguidores:
11
Retrato de Pablo Bertero
Autor:
Pablo Bertero
Título:
La imagen lo es todo
Sinopsis:
De las emociones al emoticón, síntesis radical de lo sensible. Siempre conectados a la pantalla, donde la imagen lo es todo.
Interacciones:
Votos:
121
Opiniones:
43
Seguidores:
63

Próximos cursos online

Desarrollamos para ti los mejores cursos online de actualización profesional, que te permitirán formarte y especializarte de la mano de renombrados especialistas

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 semanas
4 Febrero 2019

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 semanas
4 Marzo 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 semanas
8 Abril 2019

Branding Corporativo

Branding Corporativo

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

4 semanas
20 Mayo 2019

Estrategia de Marca

Estrategia de Marca

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

4 semanas
24 Junio 2019