Layar dengan kepadatan piksel tinggi dengan cepat menjadi standar. Kreator konten perlu beradaptasi dengan fakta ini. Ini adalah panduan singkat tentang cara menayangkan gambar berkualitas tinggi di web saat ini, tanpa polyfill, JavaScript, peretasan CSS, dan fitur browser yang belum diimplementasikan. Singkatnya: tanpa perubahan drastis pada alur kerja Anda.
Ada banyak proposal gambar responsif saat ini, banyak di antaranya melibatkan
perubahan signifikan bagi developer web. Atribut <img> jalur standar srcset
sulit diterapkan, terutama dengan
kompleksitas pemilihan berbasis area pandang tambahan srcset:
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
Meskipun properti CSS image-set hanya menggunakan devicePixelRatio untuk
menentukan gambar yang akan dimuat, properti ini tetap memaksa developer untuk menulis banyak
markup tambahan untuk setiap gambar.
Proposal lain, seperti elemen <picture> bahkan lebih panjang.
Selain itu, atribut tersebut tidak melacak standar, sehingga ketersediaannya
di mana-mana bahkan lebih jauh daripada atribut srcset. Solusi sisi server dan JavaScript adalah satu-satunya alternatif lain, tetapi pendekatan ini memiliki kekurangannya sendiri seperti yang dibahas dalam artikel lain.
Artikel ini akan membahas beberapa penggunaan gambar yang biasa ditemukan di
web dan mengusulkan solusi sederhana agar dapat berfungsi pada layar dengan kepadatan
piksel tinggi serta layar biasa. Untuk tujuan diskusi ini, perangkat apa pun yang melaporkan window.devicePixelRatio lebih besar dari 1 dapat dianggap sebagai DPI tinggi, karena itu berarti bahwa piksel CSS
tidak sama dengan piksel perangkat, dan gambar sedang ditingkatkan skalanya.
Berikut ini ringkasannya:
- Gunakan CSS/SVG, bukan gambar raster jika memungkinkan.
- Gunakan gambar yang dioptimalkan untuk tampilan dengan kepadatan tinggi secara default.
- Gunakan PNG untuk gambar sederhana dan seni piksel (misalnya logo).
- Gunakan JPEG terkompresi untuk gambar dengan berbagai warna (misalnya foto).
- Selalu tetapkan ukuran eksplisit (menggunakan CSS atau HTML) pada semua elemen gambar.
Gambar sederhana dan seni piksel
Gambar kecil sering kali bisa dihindari sepenuhnya dengan menggunakan fitur CSS atau SVG.
Anda tidak perlu menggunakan gambar untuk sudut lengkung, misalnya, karena
properti CSS border-radius didukung secara luas. Demikian pula, font kustom
didukung secara luas, jadi penggunaan teks "bergambar" tidak disarankan.
Namun, dalam beberapa kasus, seperti logo, gambar mungkin satu-satunya cara untuk maju. Misalnya, logo Chrome ini memiliki ukuran alami 256x256. Pada layar Retina, Anda dapat melihat alias garis pada diagonal dan kurva, yang terlihat tebal dan buruk, terutama jika dibandingkan dengan teks yang dirender dengan jelas:
Dimensi alami: 256x256px, ukuran aset: 31 kB, format: PNG
Yakin? Bagus. Sekarang mari kita gunakan gambar kepadatan tinggi. Anda mungkin tergoda untuk menghemat ruang dengan menyimpan logo sebagai JPEG, tetapi ini mungkin bukan ide yang baik, karena menyimpan logo dan grafik lain dalam format lossy cenderung memperkenalkan artefak. Dalam hal ini, saya telah melebih-lebihkan masalah dengan menggunakan kompresi yang sangat tinggi, tetapi perhatikan garis berwarna pada gradien, bintik pada latar belakang putih, dan garis yang berantakan:
Dimensi alami: 512x512px, ukuran aset: 13 kB, format: JPEG
Hal yang harus dilakukan untuk gambar yang relatif kecil adalah menggunakan PNG 2x. Perlu diketahui bahwa perbedaan ukuran antara PNG 1x dan 2x umumnya cukup tinggi (dalam hal ini 52 kB). Namun, untuk logo, logo adalah wajah situs web Anda dan hal pertama yang akan dilihat pengunjung. Dengan menghemat terlalu banyak kualitas sebagai ganti ukuran, hal tersebut juga akan menjadi hal terakhir yang akan dilihat pengunjung.
Berikut adalah logo Chrome dengan segala kejayaannya, yang ukurannya berkurang setengah dari dimensi alaminya untuk tampilan 2x:
Dimensi alami: 512x512px, ukuran aset: 83 kB, format: PNG
Markup untuk membuat render di atas adalah sebagai berikut:
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
Perhatikan bahwa saya telah menetapkan lebar dan tinggi pada gambar. Hal ini diperlukan karena ukuran alami gambar adalah 512 piksel. Performanya juga bagus karena mesin rendering memiliki pemahaman yang baik tentang ukuran elemen dan tidak perlu bekerja terlalu keras untuk menghitungnya.
Salah satu pengoptimalan yang mungkin berhasil adalah dengan mengurangi PNG 24-bit menjadi format 8-bit palet. Cara ini berfungsi untuk gambar dengan sedikit warna, termasuk logo Chrome. Untuk melakukan pengoptimalan ini, Anda dapat menggunakan alat seperti http://pngquant.org/. Anda dapat melihat sedikit garis berwarna di sini, tetapi file ini hanya berukuran 13 kB, yang merupakan penghematan ukuran 6x kekalahan dibandingkan dengan PNG 512x512 asli.
Dimensi alami: 512x512px, ukuran aset: 13 kB, format: PNG,
8-bit palette
Gambar dengan berbagai warna
Saya menulis artikel HTML5Rocks untuk menyurvei sejumlah teknik gambar responsif yang berbeda, dan melakukan riset seputar mengompresi 1x dan 2x JPEG serta membandingkan ukuran dan kualitas visual yang dihasilkan. Berikut adalah salah satu kartu tersebut dari artikel di atas:
Saya telah memberi label pada gambar berdasarkan tingkat kompresinya (ditunjukkan dengan kualitas JPEG), ukurannya (dalam byte), dan opini subjektif saya mengenai fidelitas visual komparatifnya (diberi peringkat berdasarkan angka). Bagian yang menarik di sini adalah gambar 2x yang dikompresi dengan tinggi (dilabeli 3) lebih kecil ukurannya dan terlihat lebih baik daripada gambar 1x yang tidak dikompresi (berlabel 4). Dengan kata lain, antara gambar 4 dan 3, kami telah berhasil meningkatkan kualitas gambar dengan menggandakan setiap dimensi dan secara signifikan meningkatkan kompresi, sekaligus mengurangi ukuran sebesar 2 kB.
Kompresi, dimensi, dan kualitas visual
Saya ingin mendapat lebih banyak insight tentang kompromi antara tingkat kompresi, dimensi gambar, kualitas visual, dan ukuran gambar. Saya menjalankan studi dengan hipotesis berikut berdasarkan studi di atas:
Hipotesis
Dengan kompresi yang cukup, gambar 2x akan terlihat setara dengan gambar yang sama dalam ukuran 1x pada beberapa kompresi (lebih rendah). Namun, dalam hal ini, gambar 2x yang dikompresi akan berukuran lebih kecil daripada gambar 1x.
Proses
- Jika ada gambar 2x, buat gambar 1x.
- Kompresi kedua gambar di berbagai tingkat.
- Buat halaman pengujian yang menampilkan kedua kumpulan gambar secara berdampingan.
- Temukan tempat di dua set yang gambarnya setara.
- Perhatikan ukuran gambar dan tingkat kompresi gambar yang setara.
- Cobalah pada layar 1x dan 2x.
Saya membuat aplikasi perbandingan gambar berdampingan yang mirip dengan tampilan bandingkan Lightroom. Tujuannya adalah untuk menampilkan gambar 1x dan 2x secara berdampingan, tetapi juga memungkinkan Anda memperbesar bagian mana pun dari gambar untuk mendapatkan detail lebih lanjut. Anda juga dapat memilih antara format JPEG dan WebP serta mengubah kualitas kompresi untuk melihat perbandingan ukuran file dan kualitas gambar. Idenya adalah menyesuaikan setelan pada beberapa gambar, mencari tahu kualitas kompresi, penskalaan, dan format vs. kualitas gambar yang nyaman bagi Anda, dan gunakan setelan tersebut untuk semua gambar Anda.
Alat itu sendiri tersedia untuk dimainkan. Anda dapat memperbesar gambar dengan memilih sub-area yang akan diperbesar.
Analisis
Saya akan mengatakan bahwa kualitas gambar adalah hal yang subjektif. Selain itu, kasus penggunaan khusus Anda kemungkinan akan menentukan letak prioritas Anda dalam spektrum fidelitas visual vs. ukuran file. Selain itu, berbagai jenis fitur gambar bereaksi berbeda terhadap penskalaan dan kualitas kompresi, sehingga solusi satu ukuran untuk semua mungkin belum tentu berfungsi di sini. Tujuan alat ini adalah membantu Anda membangun intuisi untuk kompresi, skala, format, dan kompresi kualitas gambar.
Dari bermain dengan zoomer gambar, beberapa hal dengan cepat menjadi jelas
bagi saya. Pertama, saya lebih memilih gambar quality=30 dpr=2x daripada quality=90
dpr=1x gambar untuk meningkatkan detail. Ukuran file ini juga sebanding (dalam kasus bidang, gambar 2x terkompresi adalah 76
kB sedangkan 1x yang tidak dikompresi adalah 80 kB).
Pengecualian untuk aturan ini adalah gambar terkompresi sangat (quality<30) dengan
gradien. Format ini cenderung mengalami garis berwarna, yang sama buruknya
terlepas dari skala gambarnya. Sampel burung dan mobil yang ditemukan pada
alat ini adalah contohnya.
Gambar WebP terlihat jauh lebih bersih daripada JPEG, terutama dengan tingkat kompresi rendah. Garis berwarna ini tampaknya tidak terlalu merepotkan. Terakhir, gambar WebP jauh lebih ringkas.
Peringatan dan sirip
Membuat gambar terlihat bagus pada layar dengan kepadatan tinggi hanyalah setengah dari masalah terkait gambar yang disebabkan oleh variasi layar yang besar. Dalam beberapa kasus, Anda mungkin ingin menampilkan gambar yang benar-benar berbeda bergantung pada ukuran area pandang. Misalnya, pasfoto mungkin sesuai untuk layar seukuran ponsel, tetapi stand di depannya dan bendera di belakangnya mungkin lebih cocok untuk layar laptop.
Saya sengaja menghindari topik "arah seni" ini untuk hanya berfokus pada gambar
DPI tinggi. Masalah ini dapat diselesaikan dengan sejumlah pendekatan
yang berbeda: menggunakan kueri media dan gambar latar, melalui JavaScript,
melalui beberapa fitur baru seperti image-set, atau di server. Topik ini
dibahas dalam Gambar DPI Tinggi untuk Kepadatan Piksel Variabel.
Saya akan keluar dengan beberapa masalah terbuka:
- Efek kompresi tinggi terhadap performa. Apa konsekuensi dari decoding gambar yang sangat terkompresi?
- Apa konsekuensi performa jika harus mengubah ukuran gambar ketika gambar 2x dimuat pada layar 1x?
Ringkasnya, pilih CSS dan SVG, bukan menggunakan gambar raster. Jika gambar raster diperlukan, gunakan PNG untuk gambar dengan palet terbatas dan banyak warna solid, serta gunakan JPEG untuk gambar dengan banyak warna dan gradien. Hal yang hebat tentang pendekatan ini adalah bahwa markup Anda hampir tidak berubah. Developer web hanya perlu membuat aset 2x dan menyesuaikan ukuran gambar dengan benar di DOM.
Untuk bacaan lebih lanjut, lihat artikel Scott Jehl tentang topik serupa. Semoga gambar terlihat tajam dan penggunaan data seluler rendah.