Apakah format imej yang sesuai untuk laman web anda?

pemilihan format imej dan pengoptimuman: Amalan terbaik untuk imej laman web

mata utama

dengan betul memilih format imej dan mengoptimumkan imej adalah penting untuk penggunaan imej laman web yang betul. Penggunaan yang salah boleh membawa kepada prestasi laman web yang perlahan dan pengalaman pengguna yang lemah.
JPEG, GIF, PNG, SVG, dan WEBP biasa digunakan format imej laman web. JPEG, GIF, dan PNG adalah format yang lama digunakan, manakala SVG dan WebP agak baru, tetapi menjadi semakin popular kerana kesesuaian mereka untuk laman web responsif dan cepat.
Pemilihan format imej bergantung pada jenis imej, saiz fail, dan keserasian penyemak imbas. Sebagai contoh, JPEG sangat bagus untuk foto kerana kualiti dan pemampatannya, sementara PNG sangat bagus untuk logo dan ikon kerana sokongannya untuk ketelusan.
Webp adalah format imej moden yang dibangunkan oleh Google yang menggabungkan kelebihan JPEG dan PNG tanpa menghasilkan saiz fail yang besar, menjadikannya sesuai untuk kegunaan rangkaian. Walau bagaimanapun, ia tidak disokong secara universal oleh semua pelayar.

Artikel ini adalah sebahagian daripada siri artikel yang dibuat dengan kerjasama SiteGround. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Sehingga Mac 2017, imej menyumbang lebih daripada 65% kandungan web.

Tidak menghairankan: Imej menambah kecantikan, menyampaikan maklumat, menceritakan kisah dan berhubung dengan pelawat laman web anda.

Sebaliknya, jika digunakan secara tidak wajar, imej sering merupakan sebab utama untuk kelajuan laman web yang perlahan dan pengalaman pengguna yang lemah.

Penggunaan imej yang betul di Internet terutamanya melibatkan dua perkara:

Pilih format imej yang betul

• Imej yang dioptimumkan
Dalam artikel ini, saya akan membincangkan perkara pertama. Khususnya, saya akan merangkumi format imej terbaik di web dan jenis imej yang paling sesuai untuknya.

Tetapi sebelum perbincangan lanjut, mari kita jelaskan beberapa istilah secara ringkas.

imej radik/bitmap dan vektor

Imej radikal atau bitmap terdiri daripada grid piksel dua dimensi. Setiap piksel menyimpan warna dan nilai ketelusan.

Kesan zum imej raster tidak begitu baik: jika anda mengezum, ia kehilangan kejelasan dan kualiti. Jenis imej raster yang biasa digunakan pada rangkaian adalah format JPEG atau JPG, GIF, dan PNG.

Berikut adalah dua imej raster (JPGs) dari Apple. Yang pertama adalah saiz semula jadi imej. Yang kedua menunjukkan butiran versi yang sama diperbesar.

Contoh saiz semula jadi imej raster. Butiran imej raster yang lebih besar daripada saiz semula jadi.

Perhatikan bahawa versi imej yang diperbesar mempunyai kemerosotan kualiti berbanding salinan asal.

Sebaliknya, imej vektor terdiri daripada garis, bentuk, dan titik laluan. Maklumat vektor tidak disimpan dalam piksel. Sebaliknya, mereka disimpan dalam arahan lukisan matematik yang sama sekali tidak berkaitan dengan piksel. Alex Walker berkata dengan baik apabila dia menyebut SVG (format vektor yang paling popular di web):

SVG bukan format imej -ia lebih seperti "resipi" imej.

mengapa jpeg seperti pai epal McDonald (dan svg tidak)

Satu makna yang tidak berkaitan dengan resolusi adalah bahawa anda boleh skala imej vektor pada kehendak: mereka akan sentiasa kelihatan jelas dan cerah, sesuai untuk skrin retina.

grafik SVG skala kecil.

Zum dalam butiran grafik SVG.

Kedua -dua imej di atas adalah pandangan grafik vektor yang sama, tetapi dalam imej kedua, saiz rendering vektor lebih daripada dua kali lebih besar daripada imej pertama. Walau bagaimanapun, tidak ada kehilangan kualiti.

lossy dan tidak merosakkan

"lossy" dan "lossless" kedua -duanya merujuk kepada teknik mampatan fail yang digunakan untuk media digital (iaitu imej, audio dan video).

mampatan lossy:

Data digital tidak akan dikompresi kembali kepada 100% daripada data asal. Kaedah kehilangan boleh memberikan tahap mampatan yang tinggi dan menghasilkan fail termampat yang lebih kecil, tetapi beberapa jumlah piksel asal, gelombang bunyi, atau bingkai video akan hilang selama -lamanya.

pcmag.com Encyclopedia

Ini bermakna dalam amalan bahawa fail yang lebih lossy anda memampatkan, semakin kecil. Walau bagaimanapun, apabila saiz fail berkurangan, anda juga boleh kehilangan kualiti beberapa fail asal. Mampatan lossy melibatkan perdagangan antara saiz fail dan kualiti.

satu jenis imej yang lossy yang sering anda lihat di web adalah jpeg.

Sebaliknya, mampatan lossless tidak menyebabkan sebarang kehilangan data antara sumber termampat dan sumber asal. Ini bermakna mampatan tidak menyebabkan kualiti fail menurun. Walau bagaimanapun, kerana ini, format fail lossless biasanya lebih besar daripada yang mempunyai format fail lossy.

Format imej lossless yang anda dapat dengan mudah mencari di web adalah GIF dan PNG.

Maklumat awal ini sangat berguna apabila memutuskan format imej terbaik untuk kandungan.

Tiga jenis fail imej pertama yang saya ingin perkenalkan di bawah, iaitu JPG, GIF, dan PNG, telah digunakan di laman web untuk masa yang lama. Dua yang terakhir, iaitu SVG dan Webp, bukan format baru, tetapi belum menjadi arus perdana. Walau bagaimanapun, populariti mereka semakin meningkat kerana mereka sangat sesuai untuk permintaan untuk laman web yang responsif dan cepat.

jpeg

jpeg atau jpg adalah format imej yang lossy yang dibangunkan oleh kumpulan pakar imej bersama

Hampir 3% daripada semua jenis kandungan di laman web terdiri daripada imej JPG. Inilah sebabnya format imej ini begitu popular:

• Format JPG boleh memaparkan berjuta -juta warna. Ini menjadikannya pilihan yang ideal untuk memaparkan kerja fotografi di web
• Sebagai jenis fail lossy, anda boleh menggunakan mampatan untuk mengurangkan saiz failnya dengan ketara. Fail JPG menawarkan pelbagai tahap mampatan: kira -kira 60% sudah cukup untuk imej rangkaian, dan sebarang mampatan melebihi 75% akan mengakibatkan kemerosotan kualiti imej.
• Semua peranti yang dibolehkan Internet menyokong format imej JPG, yang memudahkannya digunakan di laman web.

Satu perkara yang jelas yang hilang dalam fail JPG adalah sokongan untuk ketelusan. Oleh itu, jika anda merancang untuk menggunakan latar belakang telus untuk menggabungkan imej dengan warna latar belakang atau tekstur di laman web, imej JPG bukan pilihan yang sesuai. Lebih baik memilih salah satu pilihan yang saya disenaraikan di bawah.

gif

GIF mewakili format pertukaran grafik. Ia adalah format lossless 8-bit yang menyokong sehingga 256 warna. Batasan ini menjadikan fail GIF tidak sesuai untuk memaparkan imej gamut dan fotografi yang luas.

Berikut adalah beberapa perkara utama yang memainkan peranan besar dalam penggunaan fail GIF jangka panjang di laman web anda:

• saiz fail biasanya sangat kecil memandangkan batasan 256 warna
• Sokongan ketelusan
• Animasi sokongan. Ini menjadikannya sesuai untuk memaparkan imej animasi gelung seperti ikon, emojis, spanduk, dll.
• sesuai untuk imej mudah dengan warna rata, tetapi bukan untuk foto

png

PNG bermaksud grafik rangkaian mudah alih. Ia adalah format alternatif untuk GIF yang dibangunkan oleh W3C. Seperti GIF, ia menggunakan algoritma mampatan tanpa kehilangan dan mempunyai format 8-bit atau 24-bit. Kedua -dua format menyokong ketelusan. Walau bagaimanapun, ketelusan dalam imej PNG 24-bit dicapai menggunakan saluran alfa serta saluran merah, hijau dan biru. Jadi, sementara imej PNG GIF dan 8-bit sama ada benar-benar legap atau telus sepenuhnya, setiap piksel dalam imej PNG menyediakan sehingga 256 tahap opacity.

anda boleh menggunakan format PNG 24-bit untuk

• imej rangkaian dengan pelbagai tahap ketelusan
• Gambar dan Grafik Kompleks
• Grafik Anda perlu mengedit dan mengeksport kerap: Format lossless mereka memastikan tiada kemerosotan kualiti.

Tidak seperti format GIF, jenis imej PNG tidak menyokong animasi, dan saiz fail mereka mungkin agak besar.

svg

SVG bermaksud grafik vektor berskala, yang merupakan jenis fail vektor berasaskan XML. Walaupun ia telah wujud sejak tahun 2001, baru -baru ini menjadi sangat popular di kalangan pemaju web. Alasan cinta yang dilipat ini adalah bahawa SVG telah menikmati sokongan pelayar yang lemah selama bertahun -tahun. Mujurlah, saya gembira untuk mengatakan bahawa pada masa penulisan, SVG disokong dalam semua pelayar utama, walaupun terdapat beberapa ketidakkonsistenan dan pepijat.

Format SVG mempunyai banyak ciri dan boleh disyorkan sebagai pilihan yang sangat baik untuk format grafik web, terutamanya apabila digunakan untuk imej mudah seperti logo, peta, ikon, dan lain -lain. Ia amat sesuai.

Kelebihan Format SVG

• SVGs biasanya lebih kecil dalam saiz fail daripada rakan -rakan raster mereka, terutamanya jika anda mengoptimumkannya untuk rangkaian anda dan memberikannya dalam format gzip
• mereka berskala, yang bermaksud mereka kelihatan tajam tanpa mengira resolusi skrin
• anda boleh menggunakan kod svg dalam tag html dan simpan permintaan http
• kod SVG sendiri boleh disesuaikan menggunakan CSS
• Anda boleh menghidupkan imej SVG dan bahagian mereka menggunakan CSS dan JavaScript, yang sangat sejuk.

Kerana saiz fail mungkin menjadi agak besar, cuba mengelakkan imej SVG yang terlalu kompleks untuk penggunaan rangkaian. Akhirnya, untuk imej fotografi, SVG tidak berfungsi, dan anda lebih baik melekat dengan format JPG atau Webp.

WEBP

Walaupun ia telah wujud sejak tahun 2010, saya tidak akan mengatakan bahawa Webp masih terasa baru dan tidak begitu terkenal sebagai JPG atau PNG. Walau bagaimanapun, format imej ini mengandungi rangkaian dalam DNA: Ia direka untuk digunakan pada rangkaian, yang menjadikannya sangat menarik

Webp adalah format imej sumber terbuka yang dibangunkan oleh Google. Berikut adalah fungsi utamanya:

WEBP adalah format imej moden yang menyediakan pemampatan yang sangat lossy dan lossless untuk imej di rangkaian. ... Saiz imej Webp Lossless adalah 26% lebih kecil daripada PNG. Imej Lossy Webp adalah 25-34% lebih kecil daripada imej JPEG yang boleh dibandingkan ... Webp Lossless menyokong ketelusan ... hanya 22% tambahan bait diperlukan. Lossy Webp juga menyokong ketelusan untuk situasi di mana pemampatan RGB yang lossy boleh diterima, biasanya menawarkan 3 kali saiz fail yang lebih kecil daripada PNG.

laman web webp

Kelebihan Webp ialah ia menggabungkan kelebihan format JPG dan PNG tanpa membuat saiz fail yang besar.

Pada masa ini, sokongan penyemak imbas sangat baik: Pelayar berasaskan berkelip telah menyokongnya dari awal, selepas semua, Webp adalah salah satu produk Google. Untuk keserasian mundur penyemak imbas yang tidak disokong (iaitu IE/Edge, Firefox, dan Safari), beberapa orang pintar telah merancang penyelesaian yang sesuai.

Berikut adalah beberapa sumber yang hebat dari mana anda boleh mengetahui lebih lanjut mengenai Webp dan bagaimana untuk melaksanakannya sekarang:

• FAQ WEBP
• Apakah format imej WEBP (dan mengapa ia penting)?
• bagaimana memilih format imej yang sempurna untuk mengoptimumkan laman web anda
• Panduan untuk menggunakan imej Webp: Kajian Kes
• menggunakan imej WEBP

Kesimpulan

Dalam artikel ini, saya menggariskan format imej rangkaian dan membincangkan secara ringkas jenis imej yang mereka lebih sesuai.

JPG, GIF dan PNG sangat popular dan telah digunakan untuk masa yang lama. SVG dan Webp adalah alternatif yang lebih baru dan menarik. SVG sangat bagus untuk ilustrasi dan imej mudah, dan Webp sangat bagus untuk semua kes di mana JPG dan PNG boleh digunakan.

Adakah anda menggunakan SVG atau Webp dalam kerja pembangunan anda? Apa cabaran yang anda hadapi? Pernahkah anda mengalami keuntungan prestasi yang signifikan?

Klik pada kotak komen untuk dikongsi!

Soalan Lazim Mengenai Format Imej Laman Web (FAQ)

Apakah faktor utama yang perlu dipertimbangkan ketika memilih format imej laman web?

Memilih format imej untuk laman web anda bergantung kepada beberapa faktor. Pertama, pertimbangkan jenis imej yang anda sedang kerjakan. Sebagai contoh, foto terbaik disimpan dalam format JPEG untuk kualiti dan mampatan terbaik, manakala logo dan ikon boleh digunakan dalam format PNG untuk menyokong ketelusan. Kedua, pertimbangkan saiz fail. Saiz fail yang lebih kecil memuat lebih cepat, yang meningkatkan kelajuan dan prestasi laman web anda. Akhirnya, pertimbangkan keserasian penyemak imbas. Walaupun kebanyakan pelayar moden menyokong format seperti JPEG, PNG, dan GIF, format baru seperti WebP tidak disokong oleh semua pelayar.

Bagaimana format imej mempengaruhi SEO laman web saya?

Format imej boleh menjejaskan SEO laman web anda dengan ketara. Enjin carian seperti Google mengutamakan tapak yang memuat lebih cepat, sementara saiz fail imej yang lebih kecil dapat membantu mencapai matlamat ini. Di samping itu, Google lebih suka format imej tertentu seperti JPEG 2000, JPEG XR, dan WEBP kerana sifat mampatan dan kualiti mereka. Menggunakan format ini boleh meningkatkan kedudukan enjin carian laman web anda.

Apakah perbezaan antara mampatan lossy dan mampatan tanpa kehilangan?

lossy dan lossless adalah dua jenis mampatan data yang digunakan dalam format imej. Mampatan lossy mengurangkan saiz fail dengan menghapuskan bit data "tidak perlu", tetapi ini boleh menyebabkan kemerosotan kualiti imej. JPEG adalah format kerugian biasa. Mampatan tanpa kehilangan, sebaliknya, mengurangkan saiz fail tanpa mengorbankan kualiti imej, tetapi menghasilkan

Atas ialah kandungan terperinci Apakah format imej yang sesuai untuk laman web anda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!