Qué formato es mejor para guardar imágenes destinadas a sitios web; PNG o SVG?

Al exportar / guardar imágenes con un fondo transparente destinadas a sitios web, ¿debo guardarlas como PNG o SVG? ¿Por qué?

Diría PNG simplemente por el hecho de que parece ser un formato más aceptado que SVG.

La respuesta simple aquí es usar ambos.

El hecho de que haya nombrado SVG como una opción, significa que podemos descartar los gráficos fotográficos como un caso de uso previsto, porque los SVG solo son buenos para gráficos de líneas, como logotipos, iconos e ilustraciones similares a imágenes prediseñadas.

Si está considerando esta opción para gráficos fotográficos, no hay otra opción; PNG probablemente siempre será mejor. Para los gráficos en los que SVG es una opción viable, SVG es la mejor opción con una reserva PNG / JPEG. PNG tiene muchos puntos fuertes, pero en escalabilidad y tamaño de archivo, a menudo no coincidirá con SVG.

Usar solo uno u otro significa que tendrá que sacrificar la compatibilidad con versiones anteriores o la mejora progresiva.

Al sopesarlos entre sí, PNG ciertamente será compatible con más navegadores que SVG en este momento actual, pero las resoluciones de los dispositivos lanzados recientemente aumentan para siempre, lo que significa que los PNG deberán ser atendidos en función de una amplia variedad de resoluciones diferentes ^{(a través de consultas de medios, JavaScript o inhalación de agente de usuario)} o escalado por los navegadores, lo que podría producir algunos resultados imperfectos.

Mirando lo que sabemos que nos depara el futuro; resoluciones siempre más altas, soporte más amplio y uso más amplio de SVG en Internet; tiene sentido construir para lo que viene.

En general, los sitios web deben estar diseñados para durar muchos años; dentro de 5 años, su sitio web compatible con versiones anteriores podría verse increíble para el 2% de los usuarios de Internet que todavía usan navegadores antiguos, pero bastante pobre en los navegadores actualizados con resoluciones locas, por lo que es una gran cantidad de opciones difíciles sobre cómo compromiso.

Sus opciones en noviembre de 2014

1. Solo PNG

   • En aras de la calidad, tendrá que servir al menos cinco versiones diferentes dependiendo del tamaño de la pantalla y las resoluciones, y esa es una estimación muy conservadora, podría terminar con 10-15 versiones de la misma imagen si quisiera ser extremadamente minucioso . Esto también lleva algún tiempo implementarlo.

   • Si elige publicar un solo gráfico y hacer que el navegador lo escale, los resultados probablemente serán menos que perfectos, e incluso podrían ser feos dependiendo de la cantidad de escala.

   • Una gran cantidad de consultas de medios podría inflar innecesariamente el CSS e impactar negativamente en las velocidades de carga de la página.

   • Se verá genial en los navegadores y dispositivos más antiguos, pero no tanto en los más nuevos

2. SVG con una sola reserva de PNG / JPEG / GIF

   • Puede usar SVG en todas partes y luego recurrir a otro formato para navegadores que no admiten SVG. La principal ventaja es que solo necesita un archivo para todas las diferentes resoluciones.

   • Si se compromete y acepta que los usuarios en navegadores obsoletos pueden vivir con gráficos escalados de manera imperfecta, solo necesitará otra versión de cada archivo en formato PNG, JPEG o GIF.

   • Esto llevaría una cantidad de tiempo similar para implementarse ya que las consultas de medios solo PNG PNG, posiblemente incluso menos, lo que significa que probablemente sería alrededor del mismo precio.

   • Se verá genial en todos los dispositivos nuevos, con sacrificios en tecnología más antigua.

3. SVG con múltiples fallos de PNG / JPEG / GIF dependiendo de la resolución y el tamaño de la pantalla

   • Primero puede servir SVG, y luego PNG dependientes de la resolución para navegadores que no admiten SVG. Esta sería la opción más exhaustiva, más compatible con versiones anteriores y posteriores, más consistente y más costosa .

   • Probablemente tomaría tanto tiempo como 1 y 2 combinados, más un poco más para resolver los problemas.

   • Se verá increíble en ^casi todos los dispositivos.

En resumen, creo que depende de si está buscando una mayor compatibilidad con versiones anteriores o una mejora más progresiva, y cuánto dinero tiene que gastar.

SVG es escalable, si tiene un gráfico vectorial que es una clara ventaja. Para gráficos de píxeles PNG es mejor. Una desventaja es que Internet Explorer solo admite SVG con la próxima versión 9 (antes con el complemento). Los navegadores móviles también pueden tener soporte limitado para SVG.

EDITAR : Como señala ClemDesm, las versiones anteriores de IE no admiten PNG totalmente transparentes, ya que IE8 es compatible. Los PNG no transparentes funcionan bien. La respuesta de Computerish tiene una gran solución para manejar imágenes vectoriales por ahora: guárdelas como SVG, pero expórtelas para la web como PNG. Estoy totalmente de acuerdo con esta solución.

Definitivamente use PNG para un sitio web. SVG simplemente no es lo suficientemente compatible y tiene pocos (si es que tiene) beneficios significativos sobre PNG para una exportación aplanada. Dicho esto, mantenga todas sus copias de trabajo en SVG.

Me quedaría con PNG para estar seguro. SVG todavía no es totalmente aceptado por muchas grandes compañías de internet y navegadores. Aunque los SVG son escalables y son vectores, a menudo son innecesarios, ocupan más espacio y complican demasiado el sitio web.

Espero que eso haya respondido tu pregunta :)

Aunque SVG no es aceptado globalmente y algunas personas tienen un tiempo frustrante para escalar PNG, siempre he encontrado que crear un ícono dentro de Adobe Illustrator funciona mejor para aumentar o disminuir una cantidad "razonable".