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

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

Respuestas (6)

La respuesta simple aquí es usar ambos.

El hecho de que haya nombrado SVG como una opción significa que podemos descartar gráficos fotográficos como un caso de uso previsto, porque los SVG solo son buenos para gráficos de arte lineal, como logotipos, íconos 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 gráficos donde SVG es una opción viable, SVG es la mejor opción con un respaldo de 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.

Comparándolos entre sí, PNG sin duda será compatible con más navegadores que SVG en este momento actual, pero las resoluciones de los dispositivos recién lanzados aumentan constantemente, lo que significa que los PNG deberán servirse en función de una amplia variedad de resoluciones diferentes. (a través de Media Queries, JavaScript o User Agent Sniffing) 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 construirse para que duren muchos años; dentro de 5 años, su hermoso sitio web compatible con versiones anteriores podría verse increíble para el 2% de los usuarios de Internet que aún usan navegadores antiguos, pero bastante pobre en los navegadores actualizados con resoluciones locas, por lo que es en gran medida una pila de decisiones difíciles sobre qué camino tomar. compromiso.

Sus opciones en noviembre de 2014

  1. Solo PNG

    • En aras de la calidad, deberá publicar al menos cinco versiones diferentes según los tamaños y las resoluciones de la pantalla, y esa es una estimación muy conservadora, podría terminar con 10 a 15 versiones de la misma imagen si quisiera ser extremadamente minucioso. . Esto también toma algún tiempo para implementar.

    • Si elige servir 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 escalado.

    • 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á muy bien en navegadores y dispositivos más antiguos, pero no tanto en los más nuevos.

  2. SVG con respaldo único PNG/JPEG/GIF

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

    • Si se compromete y acepta que los usuarios de 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 tomaría una cantidad de tiempo similar para implementar como las consultas de medios solo PNG, posiblemente incluso menos, lo que significa que probablemente sería aproximadamente el mismo precio.

    • Se verá muy bien en todos los dispositivos nuevos, y se harán sacrificios en la tecnología más antigua.

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

    • Puede servir SVG primero y luego PNG dependientes de la resolución para navegadores que no admiten SVG. Esta sería la opción más completa, 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.

Puede mencionar algo sobre el <picture>elemento que ayuda con varios tamaños de imagen.

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 admite SVG solo 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 completamente transparente, 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: manténgalas como SVG, pero expórtelas para la web como PNG. Estoy totalmente de acuerdo con esta solución.

-1 Svg todavía no es compatible a nivel mundial. No sugeriría el uso si no explica claramente dónde está funcionando y una alternativa alternativa en caso de que no funcione (lo más probable). Tenemos que considerar los estándares web que estamos tratando de lograr. Si la elección es para web y es para PNG o SVG, siempre debe ser PNG, hasta que SVG sea compatible globalmente con los navegadores de una generación anterior. Me encantaría usar la perfección SVG, pero aún no es una realidad.
Como escribí, IE no tiene soporte para SVG (solo en la futura versión 9 hasta ahora) y el navegador móvil también puede carecer de soporte.
@Littlemad: el voto negativo es un poco exagerado ya que 1- la respuesta nos dice que no es totalmente compatible (bueno, no hay tantos detalles pero, sin embargo, está dicho y no está mal, no merece un -1) 2- Canal alfa PNG tampoco es compatible con IE6 y 7 y ni una palabra al respecto? :)
@ClemDesm: Ah, buena pista, los IE más antiguos no son totalmente compatibles con PNG transparentes.
(Traté de eliminar el voto negativo, que entiendo que era más una opinión personal que falsa, pero ahora solo puedo votar negativo o positivo. Lo siento) PNG no está bien soportado solo en IE6 e IE7, y es reparable con el CSS propietario correcto para IE o agregando un comportamiento .htc. SVG no es compatible con muchos navegadores recientes (Referencia: codedread.com/svg-support.php ) y, a veces, necesita la instalación de complementos por parte del Cliente/Usuario, y no del desarrollador, para ser visualizado. El saldo para mí pende todavía en el PNG.
@Littlemad "no es compatible con muchos navegadores recientes" Esa parece ser una conclusión incorrecta, ya que en la referencia vinculada, solo hay un navegador, que no es capaz de manejar SVG (IE8). Tampoco necesita instalar complementos para usar SVG (nunca vi eso, tal vez en IE6). Lo que ve en rojo en la referencia vinculada son partes de SVG, que en su mayoría no usará (principalmente algún tipo de filtros u otros efectos). Lo básico funciona.
@feela el soporte muestra que el porcentaje es bajo. No han pasado 7 meses desde el post, pero IE8 sigue con nosotros. Lo único que puedes hacer es crear una alternativa para IE y otra para el resto. ¿Cuál es el punto de duplicar el código de las imágenes (uno para que no sea de apoyo y otro para que sea de apoyo) si no tiene un uso realmente bueno para SVG que justifique la duplicación cuando PNG es lo suficientemente bueno para manejar muchas cosas?
La compatibilidad con PNG en IE es difícil de clasificar. IE7 "soporta" PNG por completo, pero hay errores incluso en IE8, como un PNG semitransparente junto con la transparencia CSS.
@feeela: El soporte básico de los navegadores no es el único problema. Los navegadores interpretan cosas como la escala y otras cosas muy diferentes y para algunos navegadores es mejor con etiquetas img y en algunos con etiquetas de objetos. Pero confío en que dentro de algunos años SVG se pueda usar sin problemas.

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

Para calidad SVG es mejor, pero en la práctica la única solución real es PNG porque SVG no es compatible globalmente en la fecha actual.
@Littlemad Renderizar y mostrar SVG también es más lento que simplemente borrar la imagen con un PNG.
@muntoo Bueno, la imagen no solo está borrada. Debe descomprimirse, pero eso casi siempre es más rápido que renderizar un SVG.
@Littlemad Ja, eso me recordó que se planteó el mismo problema antes... Con PNG y GIF.
@CamiloMartin no puede esperar a que el navegador tenga un buen soporte para tecnologías mucho más rápidas de lo normal. Quiero usar SVG, me siento frustrado al depender de un png no escalable para logotipos
@Littlemad No tienes que hacerlo. Puede usar la solución VML para IE < 9, o puede renderizarlo previamente en el servidor, o incluso usar una inserción basada en flash que lo renderice en IE. Todos los navegadores (al menos los principales) son compatibles con SVG, solo IE 6, 7 y 8 están jodiendo con nosotros. Así que simplemente use cualquier solución que no sea horrible, si ven un sitio peor, es su culpa. Es muy parecido a SDTV vs HDTV o DVD vs BluRay.
En 2014, esta respuesta probablemente debería estar a favor de los SVG.
2015 caniuse.com/#search=svg -- básicamente sin IE8

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

Buena solución para mantener el original como SVG y exportarlo a PNG para web. Si SVG es más compatible más tarde, puede cambiarlo. Recomendaría esa solución para imágenes vectoriales.
"tiene pocos (si los hay) beneficios significativos sobre PNG" ¿Qué? ¿Cómo se manipulan los PNG a través de CSS o JavaScript? ¿Cómo escalarlos, sin perder resolución? ¿Cómo se vinculan partes de una imagen (por ejemplo, un vínculo de país en un mapa)? Los archivos SVG comúnmente también son mucho más pequeños que PNG (excepto por los íconos pequeños).
SVG tiene muchas ventajas sobre PNG para ilustraciones vectoriales.

Me quedaría con PNG para estar seguro. SVG todavía no es completamente aceptado por muchas grandes empresas 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 :)

"ocupar más espacio y complicar demasiado"? ¿Cómo es eso?
Estoy bastante seguro de que puede afectar su SEO, ya que es posible que sus imágenes no aparezcan en Google y no estoy 100% seguro, pero a menudo ocurre que los archivos SVG tardan más en cargarse.
El tiempo de carga se basa en el tamaño del archivo, de los cuales los SVG a menudo pueden ser mucho más pequeños. Y si la búsqueda de imágenes de Google es importante para el SEO de sus sitios, sí, PNG podría ser mejor, pero creo que es más una cuestión de nicho.
Sí, quiero decir que al final del día no hay una respuesta correcta o incorrecta. El tamaño del archivo depende mucho de la complejidad de su imagen y sí, su elección depende del caso de uso. Simplemente estaba indicando los pros y los contras de los diferentes tipos de archivos :)

Aunque SVG no se acepta a nivel mundial y algunas personas tienen un tiempo frustrante para escalar PNG, siempre he descubierto que crear un icono en Adobe Illustrator funciona mejor para escalar hacia arriba o hacia abajo una cantidad "razonable".

¿Adobe Illustrator permite png o svg o ambos o cuál es la razón exacta para nombrar a Illustrator aquí? ¿Y por qué crees que svg no se acepta globalmente?
Qué formato es mejor para guardar imágenes destinadas a sitios web; PNG o SVG?
RespuestasAquíPolítica de privacidad1y, 0v