{"id":11799,"date":"2020-01-23T12:06:32","date_gmt":"2020-01-23T10:06:32","guid":{"rendered":"https:\/\/rubrika.es\/marketing-digital\/?p=11799"},"modified":"2020-03-06T17:30:25","modified_gmt":"2020-03-06T15:30:25","slug":"importancia-de-las-imagenes-svg","status":"publish","type":"post","link":"https:\/\/rubrika.es\/marketing-digital\/seo\/importancia-de-las-imagenes-svg\/","title":{"rendered":"La importancia de las im\u00e1genes SVG"},"content":{"rendered":"

El formato de im\u00e1genes svg,\u00a0 acr\u00f3nimo de gr\u00e1ficos vectoriales escalables (Del ingl\u00e9s Scalable Vector Graphics) no se trata de ninguna novedad ni much\u00edsimo menos. De hecho Wikipedia marca su creaci\u00f3n e implementaci\u00f3n entre los a\u00f1os 1999 y 2001. As\u00ed pues, \u00bfPor qu\u00e9 lo vemos aparecer en las listas de tendencias de dise\u00f1o web<\/a> precisamente ahora?<\/p>\n<\/div>

<\/div><\/div><\/div>
\"busquedas<\/span><\/div>

(ejemplo de el aumento en la b\u00fasqueda de la palabra \u201csvg\u201d en los \u00faltimos a\u00f1os)<\/p>\n<\/div>

<\/div><\/div><\/div>

Una de las posibles respuestas se debe a un cambio de paradigma que los ingenieros de 1999 no pudieron siquiera imaginar: la aparici\u00f3n y supremac\u00eda de los dispositivos smartphone\u00a0 y la creaci\u00f3n del dise\u00f1o web responsive<\/a>.<\/p>\n

Se calcula que a d\u00eda de hoy entre el sesenta y el setenta por ciento del tr\u00e1fico online ocurre desde dispositivos m\u00f3viles, una tendencia que solo parece ir en aumento. Adicionalmente, con los pr\u00f3ximos cambios anunciados por Google para modificar la indexaci\u00f3n del contenido online para ser \u201cmobile first\u201d y dar prioridad al tr\u00e1fico m\u00f3vil, debemos concentrarnos tanto en que las im\u00e1genes de nuestro sitio web se visualicen correctamente en la mayor cantidad de tama\u00f1os de pantalla y dispositivos posibles como en minimizar la carga que dichos elementos ejercen en el navegador para no afectar negativamente a la experiencia que nuestros usuarios tengan al moverse por nuestro contenido. Por ello, tiene tanta importancia la optimizaci\u00f3n de im\u00e1genes de cara al SEO de tu web.<\/p>\n

A la hora de incorporar im\u00e1genes a nuestro sitio web, siempre hemos tenido multitud de opciones, siendo .jpeg, .gif\u00a0 y .png las m\u00e1s utilizadas tradicionalmente. El formato .gif tiene la peculiaridad de reproducir contenido animado, mientras que .jpeg y .png son formatos de imagen que permiten una gran adaptabilidad y calidad, con el a\u00f1adido que el .png incluye un canal alfa para poder realizar interesantes juegos de transparencias. Esto permite una enorme flexibilidad creativa a la hora de afrontar un proyecto de dise\u00f1o web.<\/p>\n

\u00bfQu\u00e9 pueden hacer entonces las im\u00e1genes svg que no puedan estos otros formatos tradicionales?<\/h2>\n

La clave reside en la esencia misma de como son almacenadas las im\u00e1genes: mientras que en los formatos .jpeg, .gif\u00a0 y .png la imagen est\u00e1 compuesta de un n\u00famero limitado de p\u00edxeles, dependiente de la resoluci\u00f3n de la imagen durante su creaci\u00f3n (o \u201crasterizaci\u00f3n\u201d), los archivos .svg est\u00e1n formados por elementos geom\u00e9tricos vectoriales, curvas calculadas al vuelo matem\u00e1ticamente. Esto significa que las im\u00e1genes .svg pueden ser escalables en ambas direcciones sin perder un \u00e1pice de calidad, ya que se \u201cterminan de crear\u201d en el momento que las necesitamos. Por lo que lograr\u00e1s reducir el peso de la imagen sin que pierda calidad y adem\u00e1s reducir el tiempo de carga de tu p\u00e1gina web.<\/p>\n

Por supuesto el sistema exacto de funcionamiento en la creaci\u00f3n de una imagen vectorial excede en mucho el rango de conocimientos t\u00e9cnicos que buscamos en nuestro blog, as\u00ed que esto se trata de una super simplificaci\u00f3n del proceso. En cualquier caso, como se suele decir, una imagen vale m\u00e1s que mil palabras:<\/p>\n<\/div>

<\/div><\/div><\/div>
\"diferencia<\/span><\/div>

(Parad\u00f3gicamente, este ejemplo, no est\u00e1 en .svg, as\u00ed que se puede ver pixelada en algunos formatos)<\/p>\n<\/div>

<\/div><\/div><\/div>

Como puede apreciarse, las im\u00e1genes rasterizadas\u00a0 pierden calidad al modificar su tama\u00f1o original, mientras que una imagen .svg jam\u00e1s ver\u00e1 comprometida su calidad y legibilidad, vi\u00e9ndose perfectamente independientemente del dispositivo utilizado por el usuario. Para conseguir el mismo efecto con formatos tradicionales deber\u00edamos (como ocurre con las fotograf\u00edas) cargar en nuestra web diferentes versiones a diferentes tama\u00f1os de la misma imagen, e ir cambiando de unas a otras mediante \u201cmedia query\u201d o los saltos de formato que especifiquemos en el c\u00f3digo CSS.<\/p>\n

Cabe recalcar que como acabamos de comentar en el p\u00e1rrafo anterior, el formato .svg no es omnipotente. A d\u00eda de hoy no existe una forma rentable en tiempo o dinero de convertir fotograf\u00edas e im\u00e1genes reales a vectores, lo que nos obliga a depender de los formatos tradicionales para este tipo de contenido, a\u00fan a expensas de tener que cargar varias veces la misma imagen; simplemente no hay otra forma.
\nAhora bien, para todo lo dem\u00e1s, ya sean logotipos, botones, elementos gr\u00e1ficos abstractos, ilustraciones e incluso ciertos textos, el formato de im\u00e1genes svg nos ofrece infinitas ventajas que debemos aprovechar, no solo ya para nuestro dise\u00f1o web, sino para la imagen de marca de nuestro producto o negocio. \u00bfPor qu\u00e9 no dise\u00f1ar directamente nuestro logo y los elementos gr\u00e1ficos principales de nuestra marca, en formato vectorial? La capacidad de reescalabilidad del .svg no se limita \u00fanicamente a las p\u00e1ginas web, tambi\u00e9n permite ampliar y reducir a casi cualquier tama\u00f1o que necesit\u00e1ramos, desde la impresi\u00f3n de tarjetas de visita hasta plotter de gran formato. Lo que ocurre ahora es que simplemente el dise\u00f1o web ha descubierto que tambi\u00e9n puede beneficiarse de esta asombrosa capacidad.<\/p>\n<\/div>

<\/div><\/div><\/div>
\"formatos<\/span><\/div>

(Otro ejemplo de c\u00f3mo afecta el reescalado a una imagen, en este caso, m\u00e1s compleja)<\/p>\n<\/div>

<\/div><\/div><\/div>

Por tanto, el formato de im\u00e1genes .svg no es ning\u00fan descubrimiento milagroso ni \u00faltima tecnolog\u00eda de vanguardia, sino una vers\u00e1til herramienta de dise\u00f1o, redescubierta una d\u00e9cada despu\u00e9s de su creaci\u00f3n, en el centro de una revoluci\u00f3n para la que siempre estuvo preparada.<\/p>\n<\/div>

<\/div><\/div><\/div><\/div><\/div>
M\u00c1S SEO<\/span>\n<\/a>
<\/div><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":11803,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[167],"tags":[],"_links":{"self":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts\/11799"}],"collection":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/comments?post=11799"}],"version-history":[{"count":7,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts\/11799\/revisions"}],"predecessor-version":[{"id":11944,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts\/11799\/revisions\/11944"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/media\/11803"}],"wp:attachment":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/media?parent=11799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/categories?post=11799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/tags?post=11799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}