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

Jawaban:

8

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

Philip Regan
sumber
3
Untuk kualitas SVG lebih baik, tetapi dalam praktiknya satu-satunya solusi nyata adalah PNG karena SVG tidak didukung secara global pada tanggal saat ini.
Littlemad
@Littlemad Rendering dan menampilkan SVG juga lebih lambat daripada hanya blitting gambar dengan PNG.
Mateen Ulhaq
1
@ Littlemad Anda tidak harus melakukannya. Anda dapat menggunakan solusi VML untuk IE <9, atau Anda dapat melakukan pra-render di server, atau bahkan menggunakan embed berbasis flash yang membuatnya di IE. Semua browser (setidaknya yang utama) mendukung SVG, hanya IE 6, 7 dan 8 yang mendukung kami. Jadi gunakan saja solusi yang tidak mengerikan, jika mereka melihat situs yang lebih buruk, itu kesalahan mereka. Ini seperti SDTV vs HDTV atau DVD vs BluRay.
Camilo Martin
1
Pada tahun 2014, jawaban ini mungkin lebih mendukung SVG.
Hanna
1
2015 caniuse.com/#search=svg - pada dasarnya tidak ada IE8
goodship11
18

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.

Dom
sumber
1
Anda mungkin menyebutkan sesuatu tentang <picture>elemen yang membantu dengan berbagai ukuran gambar
Zach Saucier
15

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.

Mnementh
sumber
-1 Svg masih belum didukung secara global Saya tidak akan menyarankan penggunaan jika Anda tidak menjelaskan dengan jelas di mana itu bekerja dan alternatif kembali dalam hal ini tidak berfungsi (kemungkinan besar). Kami harus mempertimbangkan standar web yang ingin kami capai. Jika pilihannya adalah untuk web dan untuk PNG atau SVG, itu harus selalu PNG, sampai SVG itu didukung secara global oleh peramban satu generasi yang lebih tua. Saya ingin menggunakan kesempurnaan SVG, tetapi belum menjadi kenyataan.
Littlemad
Seperti yang saya tulis, IE tidak memiliki dukungan SVG (hanya di versi 9 sekarang sampai sekarang) dan browser seluler mungkin juga tidak memiliki dukungan.
Mnementh
@Littlemad: downvote sedikit berlebihan karena 1 - jawabannya memberitahu kita itu tidak sepenuhnya didukung (ok, tidak begitu banyak detail, tetapi, itu diceritakan dan tidak salah, tidak layak -1) 2- saluran PNG alpha tidak didukung di IE6 & 7 baik dan tidak sepatah kata pun tentang itu? :)
Shikiryu
@ ClemDesm: Ah, petunjuk bagus, IE yang lebih lama tidak sepenuhnya mendukung PNG transparan.
Mnementh
1
@Littlemad "tidak didukung di banyak browser terbaru" Itu sepertinya kesimpulan yang salah, karena dalam referensi yang ditautkan, hanya ada satu browser, yang tidak mampu menangani SVG (IE8). Anda juga tidak perlu menginstal plugin untuk menggunakan SVG (tidak pernah melihatnya, mungkin di IE6). Apa yang Anda lihat dengan warna merah pada referensi yang ditautkan adalah bagian dari SVG, Anda sebagian besar tidak akan digunakan (sebagian besar semacam filter atau efek lainnya). Dasar-dasarnya bekerja.
feeela
5

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.

Komputeris
sumber
1
Solusi yang bagus untuk mempertahankan yang asli sebagai SVG dan mengekspornya ke PNG untuk web. Jika nanti SVG didukung dengan lebih baik, Anda dapat mengubahnya. Saya akan merekomendasikan solusi untuk gambar vektor.
Mnementh
2
"ini memiliki sedikit (jika ada) manfaat signifikan dibandingkan PNG" Apa? Bagaimana Anda memanipulasi PNG melalui CSS atau JavaScript? Bagaimana Anda mengukurnya, tanpa kehilangan resolusi? Bagaimana Anda menautkan bagian-bagian gambar (misalnya tautan negara di peta)? File SVG umumnya juga jauh lebih kecil daripada PNG (kecuali untuk ikon kecil).
feeela
3
SVG memiliki banyak keunggulan dibandingkan PNG untuk ilustrasi vektor.
DA01
0

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

nicolos
sumber
"ambil lebih banyak tempat dan rumit"? Bagaimana?
DA01
1
Saya cukup yakin ini dapat memengaruhi SEO Anda karena gambar Anda mungkin tidak muncul di Google dan saya tidak 100% yakin tetapi sering kali SVG membutuhkan waktu lebih lama untuk memuat
nicolos
2
Waktu untuk memuat didasarkan pada ukuran file, di mana SVG seringkali jauh lebih kecil. Dan jika pencarian gambar google penting untuk SEO situs Anda, ya, PNG mungkin lebih baik, tapi saya pikir itu lebih merupakan hal yang khusus.
DA01
1
Ya, maksud saya pada akhirnya tidak ada jawaban benar atau salah. Ukuran file sangat tergantung pada kompleksitas gambar Anda & ya pilihan Anda tergantung pada use case. Saya hanya menyatakan pro dan kontra dari berbagai jenis file :)
nicolos
-1

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

stancil21
sumber
Apakah Adobe Illustrator mengizinkan pngs atau svg atau keduanya atau apa tepatnya alasan untuk memberi nama Illustrator di sini? Dan mengapa menurut Anda svg tidak diterima secara global?
Mensch