Hola, buenas a todos, quería preguntarle a las personas con mas experiencia en desarrollo web ¿Es recomendable utilizar para la mayoría de imágenes un formato vectorial? Normalmente utilizo imágenes vectoriales para casi todo, exceptuando las imágenes grandes como fotografías y no se si es lo mas óptimo para la página.
Si alguien me explicara qué diferencias reales hay, me ayudaría bastante a proseguir mi camino. Digo diferencias reales ya que los datos técnicos de los formatos de imagen los comprendo pero por las experiencias que he tenido se que durante el desarrollo siempre suele fallar algo por no haberlo previsto con anterioridad.
La mayoría de páginas que hago van orientadas a diseño móvil es decir que trabajo bastante con diseños responsive.
Un saludo y gracias por vuestro tiempo.
Respuestas
Mi respuesta a tu pregunta sería un si rotundo. Sí que es recomendable utilizar imágenes en formato vectorial siempre que se pueda. Si encima dices que estás enfocado a móviles, con más razón todavía. El motivo es que las pantallas móviles son de alta definición y las imágenes PNG, JPG y GIF se van a ver mal a menos que crees imágenes de alta resolución, lo que hará que la página cargue muy lenta.
Otras ventajas muy interesantes en la práctica de las imágenes vectoriales (hablo en concreto del formato SVG) es que puedes cambiar dinámicamente sus propiedades. Por ejemplo, el color relleno de algunos trazos, por lo que puedes adaptar fácilmente esos archivos SVG (por ejemplo unos iconos) a cada diseño.
Además, el soporte de SVG en los navegadores modernos es increíble, por lo que también vas a poder hacer animaciones y aplicar efectos (desenfocado, gradientes, etc.) sin tener que usar JavaScript.
Resumiendo las cosas buenas: los SVG se ven de maravilla en cualquier dispositivo, se adaptan fácilmente a cualquier diseño y permiten efectos avanzados.
En cuando a cosas malas, no he visto análisis de cómo afectan al rendimiento de la página. Si tienes muchos SVG complejos, quizás al navegador le cueste más que mostrar unas simples imágenes PNG. No lo se y nunca he visto este tipo de análisis. Otra cosa mala es que la mayoría de editores SVG añaden información innecesaria que ocupa mucho espacio. Te recomiendo la aplicación svgo para reducir el tamaño sin perder ningún detalle.
Otro inconveniente es cuando incluyes texto en un archivo SVG y tienes que convertirlo en trazos para que se vea bien. En algunos editores tienes que hacerlo a mano y en todos ellos, la conversión de tipografía a trazo puede ocupar mucho porque lo hacen con mucha precisión. En algunos editores tienes que seleccionar el texto y pinchar en la opción "Simplificar trayecto" para conseguir un resultado muy parecido pero ocupando mucho menos.
@javiereguiluz
@javiereguiluz Gracias por la respuesta y por la recomendación de svgo, yo utilizo normalmente inkscape que guarda su contenido en svg por lo que me viene de lujo este programa.
Un saludo y buen día
@_Sound8