Pengoptimuman JPEG untuk Web - Panduan Ultimate

Pemampatan imej terdapat dalam setiap format media asli. Walau bagaimanapun perbezaan antara GIF, PNG, dan JPEG adalah bagaimana maklumat itu dimampatkan dan dipaparkan pada skrin. Terdapat banyak tip untuk menyusun media imej yang hebat yang diterbitkan di web, namun banyak pereka masih tidak memahami beberapa asas.

Dalam panduan ini saya ingin berkongsi beberapa idea untuk pemampatan JPEG yang sesuai. Anda ingin mengoptimumkan imej anda untuk mengurangkan masa beban laman web sementara juga mempunyai tahap kualiti yang baik. Ini semua tentang mencari keseimbangan antara saiz fail dan gambaran skrin. Tidak ada penyelesaian sempurna untuk pereka mengikutinya. Ia mengambil beberapa amalan awal, tetapi apabila anda memahami pemampatan JPEG ia menjadi lebih mudah membangunkan laman web pada masa akan datang.

Elakkan Sentiasa Menjimatkan pada 100%

Anda hampir tidak boleh menyimpan gambar JPEG anda pada kualiti 100%. Ini akan tidak menghasilkan yang paling mungkin “dioptimumkan” gambar. Ia sebenarnya mengira melalui formula had pengoptimuman yang meningkatkan saiz fail anda dengan ketara. Malah berbanding 90% atau 95% kualiti anda akan melihat penurunan besar dalam saiz fail.

Kebanyakan kali anda akan disyorkan untuk menjimatkan imej lebih rendah daripada kualiti 90%. Jika anda membuka kotak dialog Simpan untuk Web di Photoshop, anda akan melihat bahawa mereka menawarkan nilai pratetap yang boleh anda pilih. Saya menambah nilai JPEG yang mungkin di bawah - perhatikan konvensyen penamaan semula.

Rendah - 10%
Sederhana - 30%
Tinggi - 60%
Sangat tinggi - 80%
Maksimum - 100%

Walaupun dalam kualiti imej Adobe Photoshop 60% dianggap 'tinggi'. Ramai pemaju web akan menjamin antara 50% - 70% adalah julat keselamatan untuk dilekatkan.

Bagaimana Rendah Terlalu Rendah?

Nilai-nilai yang anda pilih untuk pengoptimuman bergantung sepenuhnya pada projek di tangan. Anda perlu mempertimbangkan jenis grafik yang akan menghasilkan saiz fail tertinggi - ini adalah yang benar-benar memerlukan pemampatan.

Saya akan berhujah bahawa di bawah 30% anda benar-benar memotong kualiti gambar asas. Pereka lain akan bersumpah 50% sebagai “had” untuk mengurangkan nilai optimum. Tetapi nasihat terbaik di sini adalah hanya mencuba tetapan yang berbeza dan melihat apa yang kelihatan paling baik! Anda tidak boleh salah dengan beberapa kajian ujian mengoptimumkan imej JPEG untuk web.

Pilihan Mampatan

Kita perlu terlebih dahulu mengklarifikasi kedua-dua istilah 'mampatan' dan 'kualiti' yang berlawanan antara satu sama lain. Ini bermakna jika anda menyimpan JPEG sebanyak 40% mampatan anda akan mendapat 60% kualiti (berbanding dengan kualiti 100% maksimum tanpa mampatan).

Ini adalah pilihan yang paling asas untuk digunakan - dan mereka harus cukup ketika menyimpan untuk web. Pengguna umum tidak masuk ke penyesuaian lebih mendalam. Subsampling masuk ke perkara yang lebih rumit di mana anda menukar imej RGB ke YCbCr (Luminance, Chroma Blue, Chroma Red).

(Sumber Imej: Kara Monroe)

The luminance atau tetapan kecerahan selalu diadakan pada nilai tertinggi dalam pemampatan JPEG. Dengan nilai kecerahan ini pada saluran berasingan, lebih mudah untuk mengoptimumkan nilai warna individu Merah dan Biru. Ini juga dikenali sebagai chroma subsampling. Pereka yang berminat untuk mendapatkan kotor tangan mereka akan suka membaca sedikit lebih lanjut tentang algoritma pemampatan ini. Lihat postingan blog hebat ini pada pensampelan kroma yang khusus difokuskan pada imej JPEG.

(Sumber Imej: Derek Hatfield)

Sebagai nota sampingan yang menarik Adobe Photoshop tidak selalu menggunakan subampling untuk pemampatan. Mana-mana imej yang disimpan melalui “Simpan untuk Web” dialog hanya akan menggunakan kroma subsampling di bawah nilai kualiti 50%.

Media Web yang berbeza

Web ini juga penuh dengan pelbagai jenis media imej. Anda boleh mempunyai gambar, ikon, butang, lencana, dan banyak grafik lain. Tetapi, ketara yang membandingkan kualiti antara butang dan gambar tidak masuk akal.

Apabila menggunakan gambar atau imej terperinci mempertimbangkan menghubungkan ke fail JPEG yang kurang dimampatkan yang berasingan. Kemudian anda boleh menetapkan thumbnail di laman web anda dengan nisbah mampatan yang lebih tinggi dan saiz fail yang lebih kecil. Satu-satunya kelemahan ialah anda perlu menyediakan dua set imej untuk galeri media. Ambil perhatian banyak grafik yang berbeza yang telah dijahit di seluruh laman web dan pertimbangkan teknik pengoptimuman untuk setiap individu.

Merancang Model Grafik

Anda mahu mempunyai sistem fail terorganisir yang cukup mudah untuk dikendalikan. Beberapa webmaster akan memilih untuk menjadi tuan rumah foto mereka di tempat lain di web - seperti Flickr atau Picasa. Namun, anda masih mahu menggunakan beberapa alat pemampatan untuk mengurangkan saiz imej, tetapi bagaimana anda memaparkannya di laman web anda akan berbeza-beza. Hal ini terutama berlaku dengan peningkatan peranti mudah alih yang popular dengan akses ke Internet.

Saya dapati satu artikel yang menarik membincangkan pengekodan JPEG JavaScript yang akan berlaku dalam kod frontend anda. Tidak banyak manfaat untuk galeri imej berkualiti tinggi tetapi ia boleh mencukur masa muat turun untuk pelawat mudah alih anda. Ia juga akan menjadi teknik yang berguna apabila imej pautan panas atau menanam kembali imej secara dinamik.

Satu lagi alat mewah untuk diperiksa ialah Yahoo! Smush.it. Ia adalah aplikasi web berasaskan pelayar di mana anda boleh memuat naik imej dan Smush.it akan mengeluarkan semua bait tambahan yang tidak perlu untuk mengoptimumkan saiz fail. Ia adalah 100% lossless yang bermaksud kualiti imej tidak akan merosot sama sekali. Dan lebih baik lagi anda boleh mengunggah gambar dari URL langsung jika anda telah dihoskan di laman web anda atau pelayan pihak ke-3.

Alat Tambahan

Terdapat banyak perisian untuk mencuba mengenai manipulasi imej. Mana-mana bait tambahan yang anda boleh mencukur setiap saiz fail adalah penting. Tidak banyak perisian di luar sana, tetapi pilihan yang tersedia sangat mengagumkan.

IrfanView

Perisian percuma untuk Windows ini membolehkan anda melihat dan mengoptimumkan sebarang set imej yang besar. Saya terutamanya suka perisian ini kerana ia menyokong penukaran batch dari imej dalam pelbagai direktori. Anda boleh memohon fungsi yang sama beratus-ratus imej JPEG secara automatik.

Apa yang lebih baik adalah sokongan plugin dari pemaju pihak ke-3. Contohnya ialah RIOT (Alat Pengoptimuman Imej Radikal). Plugin ini berfungsi untuk editor grafik sumber terbuka yang lain seperti GIMP. Ia menawarkan paparan dwi-gambar di mana anda boleh menyesuaikan parameter mampatan secara manual untuk setiap imej anda.

Sokongan perisian sangat bagus dan ciri-ciri RIOT sangat mudah digunakan. Bersama-sama dengan pemampatan imej anda juga mempunyai akses untuk mengeluarkan metadata tambahan seperti EXIF dan Adobe XMP. Bit data tambahan ini hanya boleh menambah jumlah fail anda dan jarang diperlukan.

ImageOptim untuk Mac

Sekiranya anda menjalankan OS X dan memerlukan aplikasi pemampatan yang kuat maka jangan lagi melihatnya. ImageOptim adalah alat yang berkuasa untuk memampatkan imej untuk web - pada masa yang lebih baik daripada Photoshop.

Seluruh aplikasi menyokong fungsi drag-and-drop sehingga mudah untuk mengoptimumkan set gambar yang besar. Anda juga boleh menjalankan arahan dari Terminal Terminal dan skrip shell persediaan. Lihat laman kod Google untuk maklumat lanjut dan sokongan teknikal.

Terdapat beberapa masalah kecil dengan 1.3.3 pembebasan stabil terkini dalam membuat gambar JPEG pixelated di Opera. Cuba semak semua imej yang dioptimumkan dalam 4 pelayar utama - Chrome, Safari, Firefox, dan Opera (dan mungkin IE). Jika apa-apa kelihatan miring anda boleh cuba memuat turun ImageOptim 1.3.0 yang menukar sedikit pembersih.

Sumber yang Berguna

JPEG 101: Panduan Kursus Kejam pada JPEG
Tetapan mampatan kanan untuk menyimpan imej JPG untuk WordPress
Teknik Pengoptimuman JPEG yang pandai
Bagaimana untuk mengoptimumkan imej JPEG untuk laman web
Segala-galanya yang perlu anda ketahui mengenai pemampatan imej

Kesimpulannya

Mampatan JPEG adalah rumit kerana anda perlu mencari keseimbangan yang tepat antara kualiti dan bahan. Walaupun kelajuan sambungan Internet moden kami semakin meningkat, masih terdapat keperluan untuk mengurangkan saiz halaman web. Rangka kerja baru seperti jQuery dan Typekit dapat menangani ratusan kilobyte tambahan, walaupun pada reka bentuk yang dioptimalkan dengan baik.

Saya masih harus mencadangkan Adobe Photoshop sebagai perisian penyuntingan imej perdana saya. Terdapat contoh lain yang mungkin lebih baik untuk proses pengoptimuman JPEG. Tetapi pereka web boleh mendapatkan dengan penyelesaian sumber terbuka yang kurang dikenali. Jika anda mempunyai helah atau idea yang serupa mengenai pemampatan JPEG, sila kongsi dengan kami di kawasan perbincangan pos di bawah.