Format mana yang lebih baik untuk menyimpan gambar yang ditujukan untuk situs web; PNG atau SVG?

Saat mengekspor / menyimpan gambar dengan latar belakang transparan yang ditujukan untuk situs web, haruskah saya menyimpannya sebagai PNG atau SVG? Mengapa?

Saya akan mengatakan PNG hanya karena tampaknya format yang lebih diterima daripada SVG.

Jawaban sederhana di sini adalah menggunakan keduanya.

Fakta bahwa Anda telah menamai SVG sebagai opsi, berarti kami dapat mengesampingkan grafik foto sebagai kasus penggunaan yang dimaksudkan - karena SVG hanya baik untuk grafis garis seni seperti logo, ikon, dan ilustrasi seperti clip-art.

Jika Anda mempertimbangkan pilihan ini untuk grafik foto, tidak ada pilihan; PNG mungkin akan selalu lebih baik. Untuk grafik di mana SVG adalah opsi yang layak, SVG adalah opsi terbaik dengan mundur PNG / JPEG. PNG memiliki banyak kekuatan, tetapi pada skalabilitas dan ukuran file, sering tidak cocok dengan SVG.

Hanya menggunakan satu atau yang lain berarti Anda harus mengorbankan kompatibilitas mundur atau peningkatan progresif.

Menimbang mereka satu sama lain, PNG tentu akan didukung oleh lebih banyak browser daripada SVG pada saat ini, tetapi resolusi perangkat yang baru dirilis selamanya meningkat, artinya PNG perlu dilayani berdasarkan berbagai resolusi yang berbeda. ^{(via Kueri Media, JavaScript, atau Pengendalian Agen Pengguna)} atau diskalakan oleh browser, yang dapat menghasilkan beberapa hasil yang tidak sempurna.

Melihat apa yang kita tahu masa depan berlaku; resolusi yang lebih tinggi untuk selamanya, dukungan yang lebih luas dan penggunaan SVG yang lebih luas di internet; masuk akal untuk membangun apa yang akan datang.

Secara umum, situs web harus dibangun untuk bertahan selama bertahun-tahun; dalam waktu 5 tahun, situs web Anda yang kompatibel dengan indah mungkin terlihat luar biasa untuk 2% pengguna internet yang masih menggunakan browser lama, namun cukup buruk pada browser terbaru dengan resolusi gila - jadi sangat banyak tumpukan pilihan sulit untuk menuju ke mana. kompromi.

Pilihan Anda pada November 2014

1. Hanya PNG

   • Demi kualitas, Anda harus melayani setidaknya lima versi yang berbeda tergantung pada ukuran dan resolusi layar - dan itu adalah perkiraan yang sangat konservatif, Anda dapat menghasilkan 10 - 15 versi gambar yang sama jika Anda ingin menjadi sangat teliti. . Ini juga membutuhkan waktu untuk diimplementasikan.

   • Jika Anda memilih untuk menyajikan satu grafik dan mengatur skala perambannya, hasilnya mungkin akan kurang sempurna, dan bahkan bisa jelek tergantung pada jumlah penskalaan.

   • Sejumlah besar pertanyaan media dapat mengasapi CSS secara tidak perlu dan berdampak negatif pada kecepatan pemuatan halaman.

   • Akan terlihat bagus di browser dan perangkat yang lebih lama, tetapi tidak terlalu bagus untuk yang lebih baru.

2. SVG dengan satu fallback PNG / JPEG / GIF

   • Anda dapat menggunakan SVG di mana-mana dan kemudian mengembalikannya ke format lain untuk browser yang tidak mendukung SVG. Keuntungan utama adalah Anda hanya perlu satu file untuk semua resolusi yang berbeda.

   • Jika Anda berkompromi dan menerima bahwa pengguna pada browser yang sudah ketinggalan zaman dapat hidup dengan grafik dengan skala tidak sempurna, Anda hanya perlu satu versi lain dari setiap file dalam format PNG, JPEG atau GIF.

   • Ini akan membutuhkan waktu yang hampir sama untuk diterapkan karena hanya pertanyaan media dari PNG - mungkin bahkan lebih sedikit, artinya mungkin sekitar harga yang sama.

   • Akan terlihat bagus di semua perangkat baru, dengan pengorbanan yang dilakukan pada teknologi yang lebih tua.

3. SVG dengan beberapa fallback PNG / JPEG / GIF tergantung pada resolusi dan ukuran layar

   • Anda bisa melayani SVG terlebih dahulu, dan kemudian PNG yang bergantung pada resolusi untuk browser yang tidak mendukung SVG. Ini akan menjadi yang paling menyeluruh, paling belakang dan ke depan yang kompatibel, yang paling konsisten dan paling mahal memakan waktu pilihan.

   • Mungkin akan memakan waktu sebanyak 1 & 2 digabungkan, ditambah sedikit tambahan untuk menyelesaikan ketegaran.

   • Akan terlihat luar biasa di ^hampir setiap perangkat.

Singkatnya, saya pikir itu tergantung pada apakah Anda mencari kompatibilitas yang lebih terbelakang atau peningkatan yang lebih progresif, dan berapa banyak uang yang harus Anda keluarkan.

SVG scalable, jika Anda memiliki vektor-grafis yang merupakan keuntungan yang jelas. Untuk piksel-grafik, PNG lebih baik. Kelemahannya adalah, bahwa Internet Explorer hanya mendukung SVG dengan versi 9 yang akan datang (sebelum dengan plugin). Browser seluler mungkin juga memiliki dukungan terbatas untuk SVG.

EDIT : Seperti yang ditunjukkan ClemDesm, versi IE yang lebih lama tidak mendukung PNG yang sepenuhnya transparan, karena IE8 yang didukung. PNG yang tidak transparan berfungsi dengan baik. Jawaban Computerish memiliki solusi hebat untuk menangani gambar vektor untuk saat ini: Simpanlah sebagai SVG, tetapi ekspor mereka untuk web sebagai PNG. Saya sepenuhnya setuju dengan solusi ini.

Jelas menggunakan PNG untuk situs web. SVG tidak didukung secara luas dan memiliki sedikit (jika ada) manfaat signifikan dibandingkan PNG untuk ekspor yang merata. Karena itu, simpan semua copy pekerjaan Anda di SVG.

Saya akan tetap dengan PNG untuk berada di sisi yang aman. SVG masih belum sepenuhnya diterima oleh banyak perusahaan internet & browser besar. Meskipun SVG dapat diukur dan merupakan vektor, seringkali tidak diperlukan, membutuhkan lebih banyak ruang dan membuat situs web terlalu rumit.

Saya harap itu menjawab pertanyaan Anda :)

Meskipun SVG tidak diterima secara global dan beberapa orang merasa frustasi saat melakukan penskalaan PNG, saya selalu menemukan bahwa membuat ikon di dalam Adobe Illustrator berfungsi paling baik untuk menaikkan atau menurunkan jumlah yang "masuk akal".