Imágenes vectoriales, por qué utilizarlas

Seguro que alguna vez habrás oido hablar de las imágenes vectoriales, pero no sabes que diferencia hay ente un vector y una imagen normal.

El uso de imágenes es importante de cara a la optimización de tu web, pero también lo es que se vea un diseño bonito. Con tanto formato de imagen te preguntarás ¿Cuál es el mejor formato para mi web?

Depende de tus necesidades puedes utilizar formatos clásicos como el JPEG o el PNG, si prefieres optimizar el rendimiento utilizarás formatos más actuales como el WebP. Sin embargo si buscas una ilustración en vez de una fotografía que tenga la mejor calidad de imagen y un peso ligero el formato SVG es lo que necesitas.

A continuación vamos a exponer un listado de pros y contras de el formato SVG:

Pros

SVG es un formato vectorial, ideal para el diseño responsive en donde se utilizan diferentes tamaños de imagen según el dispositivos. Ya que se ha creado en base a vectores, sin importar el tipo de modificaciones que se realicen, este formato no perderá calidad y se verá igual de nítido en todas las pantallas
El comportamiento de las imágenes en SVG son definidos a través de XML, esto implica que este formato puede ser indexado, comprimido y programado.
El tamaño estándar de un archivo SVG es bastante ligero y puede comprimirse aún más de ser necesario y si deseas mantener los tiempos de carga al mínimo.
Puedes cambiar el tamaño, aplicar filtros y modos de fusión, crear máscaras de capa, agregar sombras paralelas y realizar una gran cantidad de modificaciones en un archivo SVG. Las posibilidades son casi tan amplias como las de cualquier imagen en JPG o PNG.

Contras

No es el formato adecuado para fotografías.
Los navegadores y aplicaciones de correo electrónico más antiguos a veces no pueden leer SVG.
En navegadores como Safari, hay que asegurarse de que si hay un elemento tipográfico, este sea convertido en contorno para que sea un vector, si no la apariencia será distinta.
No son aptas para imprimir.
Se pueden generar archivos pesados si el diseño contiene muchos detalles, por ejemplo si la imagen consta de varias formas pequeñas. Recuerda que el SVG es mucho más útil en la web cuando se crean formas simples.

¿Cómo puedo utilizar imágenes vectoriales en WordPress?

Por defecto, WordPress no admite el formato SVG, pero hay plugins en su repositorio como Safe SVG que añaden el MIME correspondiente al htaccess de nuestra instalación, permitiendo su uso como si utilizases un JPEG o un PNG.

¿Qué diferencia hay entre un vector y una imagen basada en un mapade bits?

La diferencia entre la imagen de mapa de bits y la imagen vectorial es clara, y seguro que después de este artículo resulta más fácil distinguir una de otra.

Las imágenes de mapa de bits cuentan con una retícula perfectamente definida y, por tanto su calidad se mantiene fija. Si se amplía o disminuye la imagen, vemos como los píxeles que la forman se multiplican o dividen, lo que provoca una pérdida de calidad.

Por otro lado las imágenes vectoriales al estar basadas en fórmulas matemáticas, tienen una resolución infinita, y por tanto se pueden ampliar o reducir sin riesgo de que su calidad baje.

Aunque hay casos en los que resulta realmente complicado distinguir entre imágenes vectoriales y mapa de bits, si hacemos zoom sobre ellas nos resultará mucho más sencillo, ya que si nos encontramos con una retícula de píxeles se tratará de mapa de bits, mientras que si la definición no varía será vectorial.

A continuación presentamos pros y contras de utilizar un formato vectorial y un formato basado en mapa de bits:

Imagen vectorial

Pros:
Se pueden escalar sin riesgo a que pierdan nada de calidad.
Son la mejor opción para imprimir, ya que no pierden nada de calidad.
Al estar basadas en fórmulas matemáticas en vez de en píxeles, son capaces de almacenar la información más compleja sin ocupar demasiado espacio.
Contras:
La principal desventaja de los diferentes formatos de imagen vectorial, es que tienen muchas limitaciones para la creación de imágenes reales. Resulta muy complicado reproducir una fotografía a partir de vectores, aunque no es imposible. Existen imágenes vectorizadas que representan fotografías con una excelente calidad, aunque por lo general son archivos muy complejos y pesados.

Imagen de mapa de bits

Pros:
Tienen una gran capacidad para representar la realidad a la perfección.
Se muestran como la mejor opción para imágenes como fotografías, ya que destacan por el alto nivel de detalle que pueden alcanzar.
Contras:
Al hacer zoom sobre ellas o reducirlas es habitual que pierdan mucha calidad y acaben pixelándose.
Es posible que no tengan la calidad suficiente como para poder imprimirlas.
Un mapa de bits BMP o en otro formato de mucha calidad, puede ocupar un espacio excesivo.

¿Entonces si quiero añadir una fotografía que formato debo utilizar?

Como hemos dicho en la tabla de arriba las imágenes vectoriales no son idóneas para utilizar en fotografías debido a que estas son imágenes creadas a base de diferentes gráficos por tanto tendremos que utilizar formatos más clásicos, en CreandoWP recomendamos el uso de imágenes en JPEG a no ser que quieras que la fotografía tenga transparencia, solo en ese caso recomendamos el PNG para el uso en una página web.

El formato JPEG permite la compresión de la imagen perdiendo algo de calidad en favor de un menor tamaño, el formato PNG es un formato bastante más pesado. Para tener un JPEG en optimas condiciones para utilizar en una web y que esta imagen no sea un lastre para el rendimiento, recomendamos utilizar el tamaño adecuado, por lo general no mayor de 600px de anchura a no ser que queramos que sea una imagen destacada o que sea fullwidth, también recomendamos que vía Photoshop reducir la calidad de la imagen a 6, a esta calidad apenas se percibe perdida y el tamaño se reduce notablemente.