+34 650908608 contacto@creandowp.es
Seleccionar página
Siteground inicio perfil de usuario

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:

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:

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

Biblioteca de imágenes

La gran mayoría de imágenes que utilizamos en esta web son SVG.

Para la descarga tanto de imágenes vectoriales como de fotografías una plataforma dónde encontrar miles de recursos como Freepik.