Imágenes para web: ¿vector o raster?

He creado una imagen vectorial en Adobe Illustrator. Es básicamente un esquema simple. Me gustaría que este esquema se publicara en una página web, pero ¿qué tipo de imagen debo seleccionar, rasterizada o vectorial? Según tengo entendido, el vector es mejor debido a la mejor calidad, debería ocupar menos espacio ya que no necesita guardar cada píxel, y las formas se guardan utilizando algoritmos que conservan la proporcionalidad. Pero en realidad no puedo encontrar ninguna imagen vectorial utilizada en las páginas web. ¿Por qué?

Si decido guardar la imagen en raster para web, necesito entender los beneficios de ambos. Suponiendo que la resolución de la mayoría de los monitores es de 1280 x 1024, me gustaría ajustar mi imagen a la mitad del tamaño del monitor y hacer que tenga un tamaño de resolución de aproximadamente 640 x 512.

Respuestas (1)

El uso de imágenes vectoriales en sitios web ha tenido un crecimiento un poco atrofiado debido a la débil compatibilidad con los navegadores. No fue hasta la versión 9 (lanzada en 2011) que Internet Explorer incluyó compatibilidad nativa con SVG . Para IE 8 y versiones anteriores, es necesario utilizar un respaldo para garantizar la coherencia entre los navegadores. Ese es un paso adicional que disuadió el uso de imágenes vectoriales; hubo poca recompensa por ese trabajo extra.

El panorama ha cambiado un poco en los últimos años. Ahora hay un incentivo para usar gráficos vectoriales en el diseño web. Las pantallas de mayor densidad están aumentando en popularidad debido a las pantallas retina de Apple y al soporte mejorado de Windows para escalar la interfaz de usuario. El diseño receptivo también puede hacer un gran uso de imágenes vectoriales. Es posible que vea gráficos vectoriales utilizados en toda la web, simplemente no lo sabe. Este mismo sitio web utiliza imágenes vectoriales (con alternativas) para su logotipo y muchos de los íconos.

Elegir cuándo usar imágenes vectoriales en lugar de ráster puede depender de algunos factores. Hay muchos casos en los que usar vector simplemente no tiene sentido . Las fotografías son el ejemplo obvio. Otro es para íconos pequeños (menos de 32px); el vector se amplía muy bien, pero no necesariamente se reduce muy bien.

Ya sea que necesite o no una alternativa, es otra opción que no siempre será sencilla. Debe tener en cuenta su grupo demográfico objetivo al decidir si necesita o no implementar uno. Actualmente, IE 8 tiene un uso de ~11 % a nivel mundial , pero esa estadística puede ser diferente para su audiencia.

Mi filosofía personal es: si puede ser vectorial, debería ser vectorial. Me parece que su ejemplo, un esquema simple, aprovecharía mucho lo que el vector tiene para ofrecer.

"Otro es para íconos pequeños (menos de 32 px); el vector se escala muy bien, pero no necesariamente se reduce muy bien". ... Si pasa algún tiempo "empujando píxeles" (como lo haría con un ícono de trama de todos modos ). Puede hacer que una imagen vectorial se vea tan bien como un pequeño icono de trama. ¡Pero podría ser más difícil ya que a menudo hay mucho ensayo y error involucrado!
@diemaus cierto, no es imposible tener una imagen vectorial que se reduzca bien. Pero ciertamente no es el caso de todas las imágenes vectoriales. Además, ¡bienvenido al sitio!
su respuesta sugiere un poco que usar imágenes vectoriales pequeñas sería una mala idea, pero a menudo es muy viable. :) ¡Gracias por su amable bienvenida! Pensé en unirme a un intercambio más centrado en el desarrollo de front-end. :)