Analizamos las principales diferencias de los formatos de imagen, SVG y PNG para su uso en diseño web. ¿Qué opción es más recomendable?
En la eterna lucha por encontrar balance entre calidad y peso de las imágenes que utilizamos en nuestras páginas web, han surgido diversos formatos modernos que prestan una solución al dilema. Hoy en il Gatto Rosso nos centraremos en las diferencias entre SVG y PNG.
En diseño web se han utilizado en su gran mayoría, imágenes con el formato JPG, debido a la compresión que ofrecen. Claramente esa compresión va en detrimento de la calidad de la imagen en favor un peso menor. No obstante, muchos diseñadores han optado a utilizar el formato PNG por varias razones. La primera es que es un formato que nos proporciona un peso ligero de imagen y no reduce la calidad de ésta. Además, poder tener imágenes con transparencias, sobre todo para iconografía, nos permite tener una mayor versatilidad a la hora de diseñar y distribuir la información. Actualmente, con la mejora de resolución de pantallas, se puede ver una reducción muy clara de la calidad de las imágenes a 72ppp (píxeles por pulgada). Eso hace que debamos ampliar esa resolución a 144ppp, con el aumento de peso que conlleva.
¿Qué es un SVG?
El formato SVG es un formato que nos permite trabajar imágenes de manera vectorial, es decir, trabajamos imágenes de manera que podemos escalarla a tamaños impensables y que no pierda ni un ápice de calidad.
Esto se debe a que es un formato basado en código, es un formato estándar y abierto, creado por Adobe, basado en XML. En un principio, los navegadores antiguos no lo detectaban, pero a día de hoy, todos los navegadores leen este tipo de imágenes.
Como puedes estar imaginándote, las imágenes SVG tienen dos grandes beneficios. Son escalables y reducibles a cualquier tamaño y no pierden nada de calidad, y lo mejor, pesan muy poco. Además puedes animarlas mediante CSS.
Ahora que sabemos qué es un SVG, veamos las diferencias entre SVG y PNG.
¿Existe diferencia de peso entre un PNG y un SVG?
La diferencia es abismal. Una imagen en PNG que pueda ocupar 400kbs, en SVG podemos recudirlo por debajo de 50kbs. Claramente la diferencia es considerable.
En cuanto a la calidad, podemos hacer una prueba. Fíjate en estas dos imágenes. Compara tú mismo sus diferencias de calidad.
¿Qué otros beneficios tiene el formato SVG?
Además de su escalabilidad unida a calidad y bajo peso, el formato SVG trae consigo otra serie de beneficios.
Son interactivos. Es decir, mediante CSS podemos añadirles cambios de estilos basándonos en comportamientos de los usuarios. Podemos animar mediante JavaScript o CSS3 nuestras imágenes SVG. Una animación CSS3 es muy ligera en comparación a una imagen animada (GIF).
Son imágenes muy útiles para crear iconos responsive. Es decir, podemos manipular su forma y estado en función del tamaño del dispositivo mediante CSS. Esto nos facilita el trabajo y la propia experiencia (UX) del usuario.
Conclusión
Tras ver las diferencias entre ambos formatos, SVG es una apuesta segura para dar una imagen profesional, de calidad a nuestros usuarios. Desde il Gatto Rosso te recomendamos que uses SVG en tus páginas web, notarás una diferencia importante en el peso de la misma, y por tanto en los procesos de carga, y podrás despreocuparte de la pixelación. Eso con SVG no pasa.
Por último, decirte que WordPress por defecto no soporta el formato SVG, es decir, no te permite subir archivos en ese formato. Para poder subir archivos SVG en tu WordPress, debes añadir las siguientes líneas de código al functions.php de tu tema activo.
function add_svg_mime_types($mimes)
{
if (current_user_can('administrator'))
{
$mimes['svg'] = 'image/svg+xml';
}
return $mimes;
}
add_filter('upload_mimes', 'add_svg_mime_types');
¿Necesitas imágenes de calidad para tu página web?
En il Gatto Rosso te ofrecemos diseños de calidad, rompedores y creativos. Llámanos o envíanos un correo y pensamos cómo destacar tu web.
¿Tienes un proyecto en mente?
Ponte en contacto con nosotros a través de este formulario. Indícanos cuáles son tus necesidades y nos pondremos en contacto contigo lo antes posible para agendar una reunión.
