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

Respuestas:

8

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

Philip Regan
fuente
3
Para SVG de calidad es mejor, pero en la práctica la única solución real es PNG porque SVG no es compatible globalmente en esta fecha actual.
Littlemad
@Littlemad Renderizar y mostrar SVG también es más lento que simplemente borrar la imagen con un PNG.
Mateen Ulhaq
1
@Littlemad No tienes que hacerlo. Puede usar una solución alternativa de VML para IE <9, o puede pre-renderizarla en el servidor, o incluso usar una incrustación basada en flash que la procese en IE. Todos los navegadores (al menos los principales) son compatibles con SVG, solo IE 6, 7 y 8 nos están contactando. Así que solo use cualquier solución alternativa que no sea horrible, si ven un sitio peor, es su culpa. Es muy parecido a SDTV vs HDTV o DVD vs BluRay.
Camilo Martin el
1
En 2014, esta respuesta probablemente debería estar a favor de los SVG.
Hanna
1
2015 caniuse.com/#search=svg - básicamente no hay IE8
merchandising11
18

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.

Dom
fuente
1
Puede mencionar algo sobre el <picture>elemento que ayuda con varios tamaños de imagen
Zach Saucier
15

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.

Mnementh
fuente
-1 Svg todavía no es compatible a nivel mundial No recomendaría el uso si no explicas claramente dónde está funcionando y una alternativa alternativa en el caso de que no esté funcionando (lo más probable). Tenemos que considerar los estándares web que estamos tratando de lograr. Si la opción es para web y es para PNG o SVG, siempre debe ser PNG, hasta que SVG sea compatible globalmente con navegadores de una generación anterior. Me encantaría usar la perfección SVG, pero aún no es una realidad.
Littlemad
Como escribí, IE no tiene soporte SVG (solo en la futura versión 9 hasta ahora) y el navegador móvil también puede carecer de soporte.
Mnementh
@Littlemad: el voto a favor está un poco exagerado ya que 1- la respuesta nos dice que no es totalmente compatible (ok, no hay tantos detalles pero, sin embargo, está dicho y no está mal, no merece un canal alfa -1) 2- PNG ¿tampoco es compatible con IE6 y 7 y ni una palabra al respecto? :)
Shikiryu
@ClemDesm: Ah, buena sugerencia, los IE antiguos no admiten PNG transparentes por completo.
Mnementh
1
@Littlemad "no es compatible con muchos navegadores recientes" Eso 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 lo vi, tal vez en IE6). Lo que ve en rojo en la referencia vinculada son partes de SVG, que generalmente no usará (en su mayoría algún tipo de filtro u otros efectos). Lo básico funciona.
feeela
5

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.

Computarizado
fuente
1
Buena solución para mantener el original como SVG y exportarlo a PNG para web. Si SVG es más compatible, puede cambiarlo. Recomendaría esa solución para imágenes vectoriales.
Mnementh
2
"tiene pocos (si alguno) beneficios significativos sobre PNG" ¿Qué? ¿Cómo manipulas PNG a través de CSS o JavaScript? ¿Cómo los escala, sin perder resolución? ¿Cómo se vinculan partes de una imagen (por ejemplo, un enlace de país en un mapa)? Los archivos SVG también suelen ser mucho más pequeños que PNG (a excepción de pequeños iconos).
feeela
3
SVG tiene muchas ventajas sobre PNG para ilustraciones vectoriales.
DA01
0

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 :)

nicolos
fuente
"ocupar más espacio y complicarse demasiado"? ¿Cómo es eso?
DA01
1
Estoy bastante seguro de que puede afectar su SEO como las imágenes pueden no aparecer en Google y no estoy 100% seguro, pero es a menudo el caso de que el IVS tardan más en cargarse
Nicolos
2
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 un nicho.
DA01
1
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 :)
nicolos
-1

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

stancil21
fuente
¿Adobe Illustrator permite pngs o svg o ambos o cuál es exactamente la razón para nombrar a Illustrator aquí? ¿Y por qué crees que svg no es aceptado globalmente?
Mensch