Optimasi JPEG untuk Web - Ultimate Guide

Kompresi gambar ditemukan di setiap format media asli. Namun perbedaan antara GIF, PNG, dan JPEG adalah bagaimana informasi dikompresi dan ditampilkan di layar. Ada begitu banyak tips untuk menyusun media gambar yang bagus yang diterbitkan di web, namun banyak desainer masih tidak mengerti beberapa hal mendasar..

Dalam panduan ini saya ingin berbagi beberapa ide untuk kompresi JPEG yang tepat. Anda ingin mengoptimalkan gambar Anda untuk mengurangi waktu pemuatan halaman web sementara juga memegang tingkat kualitas yang layak. Ini semua tentang menemukan keseimbangan antara ukuran file dan penggambaran layar. Tidak ada solusi sempurna untuk diikuti oleh para desainer. Dibutuhkan beberapa latihan awal, tetapi begitu Anda memahami kompresi JPEG, pengembangan situs web menjadi jauh lebih mudah di masa mendatang.

Hindari Selalu Menghemat 100%

Anda seharusnya hampir tidak pernah menyimpan gambar JPEG Anda pada kualitas 100%. Ini akan tidak menghasilkan yang paling mungkin “dioptimalkan” gambar. Ini sebenarnya menghitung melalui formula batas optimasi yang meningkatkan ukuran file Anda terlalu tinggi. Bahkan dibandingkan dengan kualitas 90% atau 95% Anda akan melihat penurunan ukuran file yang signifikan.

Sering kali Anda disarankan untuk menyimpan gambar dengan kualitas lebih rendah dari 90%. Jika Anda membuka kotak dialog Simpan untuk Web di Photoshop Anda akan melihat mereka menawarkan nilai yang telah Anda pilih. Saya menambahkan kemungkinan nilai JPEG di bawah ini - perhatikan konvensi penamaan yang melekat.

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

Bahkan dalam Adobe Photoshop kualitas gambar 60% dianggap 'tinggi'. Banyak pengembang web akan menjamin antara 50% - 70% adalah rentang aman untuk bertahan.

Seberapa Rendah Terlalu Rendah?

Nilai yang Anda pilih untuk pengoptimalan sepenuhnya bergantung pada proyek yang dihadapi. Anda harus mempertimbangkan jenis grafik mana yang akan menghasilkan ukuran file tertinggi - ini adalah yang benar-benar membutuhkan kompresi.

Saya berpendapat bahwa di bawah 30% Anda benar-benar memangkas kualitas gambar mendasar. Desainer lain akan bersumpah 50% sebagai a “membatasi” untuk mengurangi nilai optimal. Tetapi saran terbaik di sini adalah hanya mencoba pengaturan yang berbeda dan melihat apa yang terlihat terbaik! Anda tidak dapat salah dengan beberapa studi pengujian yang mengoptimalkan gambar JPEG untuk web.

Opsi Kompresi

Pertama-tama kita harus mengklarifikasi dua istilah 'kompresi' dan 'kualitas' yang merupakan kebalikan dari satu sama lain. Ini berarti jika Anda menyimpan JPEG pada kompresi 40% Anda akan mendapatkan kualitas 60% (dibandingkan dengan kualitas maksimum 100% tanpa kompresi).

Ini adalah opsi paling mendasar untuk digunakan - dan itu harus cukup saat menyimpan untuk web. Pengguna umum tidak melakukan kustomisasi yang jauh lebih dalam. Subsampling masuk ke masalah yang lebih rumit di mana Anda mengubah gambar RGB menjadi YCbCr (Luminance, Chroma Blue, Chroma Red).

(Sumber Gambar: Kara Monroe)

Itu pencahayaan atau pengaturan kecerahan selalu dipertahankan pada nilai setinggi mungkin dalam kompresi JPEG. Dengan nilai kecerahan ini pada saluran terpisah, lebih mudah untuk mengoptimalkan nilai warna individual Merah dan Biru. Ini juga dikenal sebagai subsampling kroma. Desainer yang tertarik untuk membuat tangan mereka kotor akan suka membaca sedikit lebih banyak tentang algoritma kompresi ini. Lihat posting blog yang luar biasa ini pada pengambilan sampel kroma yang secara khusus berfokus pada gambar JPEG.

(Sumber Gambar: Derek Hatfield)

Sebagai catatan menarik, Adobe Photoshop tidak selalu menggunakan subsampling untuk kompresi. Gambar apa pun yang disimpan melalui “Simpan untuk Web” dialog hanya akan menggunakan chroma subsampling di bawah nilai kualitas 50%.

Membedakan Media Web

Web juga penuh dengan berbagai jenis media gambar. Anda dapat memiliki foto, ikon, tombol, lencana, dan banyak grafik lainnya. Tetapi perlu dicatat bahwa membandingkan kualitas antara tombol dan foto tidak masuk akal.

Saat menggunakan foto atau gambar terperinci, pertimbangkan untuk menautkan ke file JPEG terpisah yang lebih kecil. Kemudian Anda dapat mengatur thumbnail di situs Anda dengan rasio kompresi yang lebih tinggi dan ukuran file yang jauh lebih kecil. Satu-satunya downside adalah bahwa Anda harus memberikan dua set gambar untuk galeri media. Perhatikan banyak grafik berbeda yang telah Anda jahit di seluruh situs web dan pertimbangkan teknik pengoptimalan untuk masing-masing secara individual.

Merencanakan Model Grafik

Anda ingin memiliki sistem file terorganisir yang cukup mudah untuk mencari-cari. Beberapa webmaster akan memilih untuk meng-host foto mereka di tempat lain di web - seperti Flickr atau Picasa. Namun Anda masih ingin menggunakan beberapa alat kompresi untuk mengurangi ukuran gambar, tetapi cara Anda menampilkannya di situs Anda akan bervariasi. Hal ini terutama berlaku dengan meningkatnya popularitas perangkat seluler dengan akses ke Internet.

Saya menemukan artikel menarik yang membahas pengkodean JavaScript JPEG yang akan terjadi pada kode frontend Anda. Tidak ada banyak manfaat untuk galeri gambar berkualitas tinggi tetapi dapat mengurangi waktu pemuatan untuk pengunjung seluler Anda. Ini juga akan menjadi teknik yang berguna saat menautkan gambar atau memotong ulang gambar mini secara dinamis.

Alat mewah lain untuk memeriksa adalah Yahoo! Smush.it. Ini adalah aplikasi web berbasis browser tempat Anda dapat mengunggah gambar dan Smush.it akan menghapus semua byte tambahan yang tidak perlu untuk mengoptimalkan ukuran file. Ini 100% lossless artinya kualitas gambar tidak akan menurun sama sekali. Dan lebih baik lagi Anda dapat mengunggah gambar dari URL langsung jika Anda membuatnya di-host di situs web Anda atau server pihak ke-3.

Alat tambahan

Ada banyak perangkat lunak untuk dicoba dalam hal manipulasi gambar. Setiap byte tambahan yang dapat Anda kurangi ukurannya sangat penting. Tidak ada banyak perangkat lunak di luar sana, tetapi opsi yang tersedia luar biasa.

IrfanView

Perangkat lunak gratis untuk Windows ini memungkinkan Anda untuk melihat dan mengoptimalkan serangkaian gambar besar. Saya terutama menyukai perangkat lunak ini karena mendukung konversi batch dari gambar di banyak direktori. Anda dapat menerapkan fungsi yang sama di atas ratusan gambar JPEG secara otomatis.

Apa yang lebih baik adalah dukungan plugin dari pengembang pihak ke-3. Salah satu contohnya adalah RIOT (Radical Image Optimization Tool). Plugin ini berfungsi untuk editor grafis open-source serupa lainnya seperti GIMP. Ini menawarkan tampilan gambar ganda di mana Anda dapat secara manual menyesuaikan parameter kompresi untuk setiap gambar Anda.

Dukungan perangkat lunak luar biasa dan fitur RIOT sangat mudah digunakan. Seiring dengan kompresi gambar, Anda juga memiliki akses untuk menghapus metadata tambahan seperti EXIF dan Adobe XMP. Bit data tambahan ini hanya dapat ditambahkan ke total file Anda dan jarang dibutuhkan.

ImageOptim untuk Mac

Jika Anda menjalankan OS X dan membutuhkan aplikasi kompresi yang kuat, maka tidak perlu mencari lagi. ImageOptim adalah alat yang ampuh untuk memampatkan gambar untuk web - terkadang bahkan lebih baik daripada Photoshop.

Seluruh aplikasi mendukung fungsionalitas drag-and-drop sehingga mudah untuk mengoptimalkan set gambar yang besar. Anda juga dapat menjalankan perintah langsung dari dalam Terminal dan mengatur skrip shell. Periksa halaman kode Google untuk informasi lebih lanjut dan dukungan teknis.

Ada beberapa masalah kecil dengan rilis stabil 1.3.3 terbaru dalam rendering gambar JPEG piksel di Opera. Coba periksa semua gambar yang dioptimalkan di 4 browser utama - Chrome, Safari, Firefox, dan Opera (dan mungkin IE). Jika ada yang tampak miring, Anda dapat mencoba mengunduh ImageOptim 1.3.0 yang mengubah sedikit lebih bersih.

Sumber Daya Bermanfaat

JPEG 101: Panduan Crash Course tentang JPEG
Pengaturan kompresi yang tepat untuk menyimpan gambar JPG untuk WordPress
Teknik Optimasi JPEG yang Pintar
Bagaimana cara mengoptimalkan gambar JPEG untuk situs web
Semua yang Perlu Anda Ketahui Tentang Kompresi Gambar

Kesimpulan

Kompresi JPEG rumit karena Anda perlu menemukan keseimbangan yang tepat antara kualitas dan substansi. Bahkan ketika kecepatan koneksi internet modern kita meningkat, masih ada kebutuhan untuk mengurangi ukuran halaman web. Kerangka kerja baru seperti jQuery dan Typekit dapat menempel pada ratusan kilobyte tambahan, bahkan pada desain yang dioptimalkan dengan baik.

Saya masih harus merekomendasikan Adobe Photoshop sebagai perangkat lunak pengedit gambar perdana saya. Ada contoh lain yang mungkin lebih baik untuk proses optimasi JPEG. Tetapi desainer web dapat bertahan dengan solusi open source yang bahkan kurang dikenal. Jika Anda memiliki trik atau ide serupa pada kompresi JPEG, silakan berbagi dengan kami di area diskusi pos di bawah ini.