Web siteleri için tasarlanan görüntüleri kaydetmek için hangi biçim daha iyidir; PNG veya SVG?


Yanıtlar:


8

PNG'yi sadece SVG'den daha kabul edilmiş bir format gibi göründüğü için söyleyebilirim.


3
SVG kalitesi için daha iyidir, ancak pratikte tek gerçek çözüm PNG'dir çünkü SVG bu tarihte küresel olarak desteklenmemektedir.
Littlemad

@Littlemad SVG'yi oluşturmak ve görüntülemek, aynı zamanda görüntüyü PNG ile karıştırmaktan daha yavaştır.
Mateen Ulhaq

1
@ Littlemad zorunda değilsiniz. IE <9 için VML geçici çözümünü kullanabilir ya da sunucuda önceden önizleme yapabilir veya hatta IE'de işleyen bir flash tabanlı gömme kullanabilirsiniz. Tüm tarayıcılar (en azından büyük olanlar) SVG'yi destekliyor, yalnızca IE 6, 7 ve 8 bizimle aynı seviyede. Bu yüzden, sadece daha kötü bir site görürlerse, bu onların suçu, korkunç olmayan herhangi bir geçici çözüm kullanın. SDTV vs HDTV veya BluRay vs DVD gibi.
Camilo Martin

1
2014'te bu cevap muhtemelen SVG'lerin lehine olmalıdır.
Hanna

1
2015 caniuse.com/#search=svg - temelde sadece IE8 yok
goodship11

18

Buradaki basit cevap her ikisini de kullanmaktır.

SVG'yi bir seçenek olarak adlandırmanız gerçeği, fotoğraf grafiklerini kullanım amacı olarak dışlayabileceğimiz anlamına gelir - çünkü SVG'ler yalnızca logolar, simgeler ve küçük resim benzeri resimler gibi çizgi grafikler için iyidir.

Fotoğraf grafikleri için bu seçimi düşünüyorsanız, başka seçenek yoktur; PNG muhtemelen her zaman daha iyi olacak. SVG'nin uygulanabilir bir seçenek olduğu grafikler için SVG, PNG / JPEG geri dönüşüyle ​​en iyi seçenektir. PNG'nin birçok gücü var, ancak ölçeklenebilirlik ve dosya boyutunda, genellikle SVG ile eşleşmeyecek.

Yalnızca birini veya diğerini kullanarak, geriye dönük uyumluluktan veya aşamalı geliştirmeden fedakarlık etmeniz gerekecektir.

Bunları birbirlerine karşı tartıştıran PNG, kesinlikle şu anda bu noktada SVG'den daha fazla tarayıcı tarafından desteklenecek, ancak yeni çıkan cihazların kararları sonsuza kadar artacak, yani PNG'lerin ya çok çeşitli farklı çözünürlüklere dayanarak sunulması gerekecek (Medya Sorguları, JavaScript veya Kullanıcı Aracısı Sniffing yoluyla) veya tarayıcılar tarafından ölçeklendi;

Geleceğin neler tuttuğunu bildiğimize baktığımızda ; sonsuza dek yüksek çözünürlük, daha geniş destek ve SVG'lerin internet üzerinden daha geniş kullanımı; gelecek için inşa etmek mantıklı.

Genel olarak, web siteleri uzun yıllar sürecek şekilde kurulmalıdır; 5 yıl içinde geriye dönük uyumlu web siteniz hala eski tarayıcıları kullanan internet kullanıcılarının% 2'si için harika görünebilir, ancak çılgın çözünürlükteki güncel tarayıcılar için oldukça zayıf - bu yüzden bu yol için çok zor bir seçim yığını uzlaşmadır.


Kasım 2014'teki seçenekleriniz

  1. Yalnızca PNG'ler

    • Kalite açısından, ekran boyutlarına ve çözünürlüklerine bağlı olarak en az beş farklı sürüm sunmanız gerekir - ve bu çok muhafazakar bir tahmindir. Son derece kapsamlı olmak istiyorsanız, aynı görüntünün 10 - 15 sürümleriyle sonuçlanabilir. . Bu da uygulanması biraz zaman alır.

    • Tek bir grafik sunmayı seçtiyseniz ve tarayıcının ölçeklendirmesini sağladıysanız, sonuçlar muhtemelen mükemmelden daha az olacaktır ve ölçekleme miktarına bağlı olarak çirkin de olabilir.

    • Çok sayıda medya sorgusu CSS'yi gereksiz yere şişirebilir ve sayfa yükleme hızlarını olumsuz etkileyebilir.

    • Eski tarayıcılarda ve cihazlarda harika görünecek, ancak yenileri için harika görünmeyecek.

  2. Tek PNG / JPEG / GIF geri dönüşlü SVG'ler

    • SVG'leri her yerde kullanabilir ve daha sonra SVG'yi desteklemeyen tarayıcılar için başka bir formata dönmesini sağlayabilirsiniz. Asıl avantaj, tüm farklı çözünürlükler için sadece bir dosyaya ihtiyacınız var.

    • Eski tarayıcılardaki kullanıcıların kusurlu şekilde ölçeklendirilmiş grafiklerle yaşayabileceklerini tehlikeye atarsanız ve kabul ederseniz, her dosyanın yalnızca bir sürümüne PNG, JPEG veya GIF biçiminde ihtiyacınız olacaktır.

    • Bu, PNG'nin yalnızca medya sorguları - muhtemelen daha da az olduğu gibi, aynı fiyat civarında olacağı anlamına gelmesi için de benzer bir zaman alacaktır.

    • Eski teknolojilerden fedakarlık ederek tüm yeni cihazlarda harika görünecek.

  3. Çözünürlük ve ekran boyutuna bağlı olarak çoklu PNG / JPEG / GIF geri dönüş özelliklerine sahip SVG

    • Önce SVG'yi, sonra da SVG'yi desteklemeyen tarayıcılar için çözünürlüğe bağlı PNG'leri sunabilirsiniz. Bu, en kapsamlı, en geriye ve ileriye uyumlu, en tutarlı ve en pahalı zaman alan seçenek olacaktır.

    • Muhtemelen 1 ve 2'nin bir araya gelmesi kadar zaman alacaktır, ayrıca akrabaları çözmek için biraz fazladan.

    • Hemen hemen her cihazda muhteşem görünecek .


Özetle, daha geriye dönük uyumluluk mu yoksa daha ilerici iyileştirme mi aradığına ve ne kadar para harcamak zorunda kaldığına bağlı olduğunu düşünüyorum.


1
<picture>Çeşitli görüntü boyutlarında yardımcı olan öğeyle ilgili bir şeyden bahsedebilirsiniz
Zach Saucier

15

Net bir avantaj olan bir vektör-grafiğiniz varsa, SVG ölçeklenebilir. Piksel grafikler için PNG daha iyidir. Bir dezavantajı, Internet Explorer’ın SVG’yi yalnızca gelecek sürüm 9 ile (eklenti olmadan) desteklemesidir. Mobil tarayıcılar ayrıca SVG için sınırlı bir desteğe sahip olabilir.

EDIT : ClemDesm'in işaret ettiği gibi, eski IE sürümleri IE8 desteklendiğinden beri tamamen şeffaf PNG'yi desteklememektedir. Şeffaf olmayan PNG'ler iyi çalışır. Computerish'in cevabı, vektör görüntülerini şimdilik kullanmak için mükemmel bir çözüme sahip: Onları SVG olarak saklayın, ancak web için PNG olarak dışa aktarın. Bu çözüme tamamen katılıyorum.


-1 Halen küresel olarak desteklenmiyorsa, nerede çalıştığını ve çalışmadığı durumda geriye dönüşün alternatif olduğunu açık bir şekilde açıklamamanız durumunda kullanmanızı öneririm (büyük olasılıkla). Elde etmeye çalıştığımız web standartlarını göz önünde bulundurmalıyız. Seçim web için ise ve PNG veya SVG için ise, SVG global olarak bir nesil daha eski tarayıcılar tarafından desteklenene kadar her zaman PNG olmalıdır. SVG mükemmellik kullanmayı çok isterdim ama bu henüz gerçek değil.
Littlemad

Yazdığım gibi, IE'nin SVG desteği yoktur (yalnızca şimdiki sürüm 9'da) ve mobil tarayıcıda da destek olmayabilir.
Mnementh

@ Littlemad: Aşağıya doğru oy biraz fazla abartılıyor, çünkü cevap 1- tam olarak desteklenmediğini söylüyor (tamam, çok fazla ayrıntı değil ama yine de söylendi ve yanlış değil, -1 hak etmiyor) 2- PNG alfa kanalı IE6 ve 7’de de desteklenmiyor ve bununla ilgili bir kelime yok mu? :)
Shikiryu

@ClemDesm: Ah, iyi bir ipucu, eski IE'ler tamamen şeffaf PNG'leri desteklemiyor.
Mnementh

1
@Littlemad "son zamanlarda pek çok tarayıcıda desteklenmiyor" Bu, hatalı bir sonuç gibi görünüyor, çünkü bağlantılı referansta, SVG'yi (IE8) kullanamayan tek bir tarayıcı var. Ayrıca SVG kullanmak için eklentiler yüklemeniz gerekmez (bunu belki IE6'da hiç görmedim). Bağlantılı referansta kırmızı olarak gördüğünüz şey SVG'nin parçalarıdır, çoğunlukla kullanmazsınız (çoğunlukla bir tür filtre veya başka efektler). Temeller işe yarıyor.
feeela

5

Bir web sitesi için kesinlikle PNG kullanın. SVG, yeterince geniş bir şekilde desteklenmemektedir ve PNG'ye göre yassı bir ihracat için (eğer varsa) önemli yararları yoktur. Bununla birlikte, tüm çalışma kopyalarınızı SVG'de saklayın.


1
Orijinali SVG olarak tutmak ve web için PNG'ye vermek için iyi bir çözüm. SVG daha sonra daha iyi destekleniyorsa, onu değiştirebilirsiniz. Vektör görüntüleri için bu çözümü tavsiye ederim.
Mnementh

2
“PNG'ye göre çok az (varsa) önemli faydası var” Ne? PNG'leri CSS veya JavaScript ile nasıl değiştirirsiniz? Çözünürlüğü kaybetmeden onları nasıl ölçeklendirirsiniz? Bir resmin kısımlarını nasıl bağlarsınız (örn. Haritadaki bir ülke bağlantısı)? SVG dosyaları genellikle PNG'den çok daha küçük (küçük simgeler hariç).
feeela

3
SVG, vektör çizimleri için PNG'ye göre birçok avantaja sahiptir.
DA01

0

PNG'ye güvenli tarafta kalırım. SVG hala birçok büyük internet şirketi ve tarayıcı tarafından tam olarak kabul görmemektedir. SVG'ler ölçeklenebilir ve vektörler olmasına rağmen genellikle gereksizdir, daha fazla yer kaplar ve web sitesini karmaşık hale getirir.

Umarım sorunuza cevap vermişsiniz :)


"daha fazla yer kaplar ve karmaşık hale getirir"? Nasıl yani?
DA01

1
Resimleriniz Google’da görünmeyebileceğinden ve% 100 emin olmadığımdan
SEO’nuzu

2
Yükleme süresi, SVG'lerin genellikle daha küçük olabileceği dosya boyutuna bağlıdır. Google resim arama sitenizin SEO'su için önemliyse, evet, PNG daha iyi olabilir, ama bence bu daha çok daha önemli bir şey.
DA01

1
Evet, demek istediğim günün sonunda doğru ya da yanlış cevap yok. Dosya boyutu, görüntünüzün karmaşıklığına bağlıdır ve evet, seçiminiz kullanım durumuna bağlıdır. Sadece farklı dosya türlerinin artılarını ve eksilerini belirttim :)
nicolos

-1

SVG dünya çapında kabul görmese ve bazı insanlar PNG'leri ölçeklendirmede sinir bozucu bir zamana sahip olsalar da, her zaman Adobe Illustrator'da bir simge oluşturmanın "makul" bir tutarı artırmada ya da azaltmada en iyi sonucu bulduğunu buldum.


Adobe Illustrator, pngs veya svg veya her ikisine de izin veriyor mu veya Illustrator'ı burada adlandırmanın nedeni tam olarak nedir? Ve neden svg'nin küreselliğin kabul edilmediğini düşünüyorsunuz?
Mensch
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.