Pilih dimensi gambar yang berguna untuk tampilan kepadatan tinggi

Kartu yang ditampilkan dengan lebar piksel CSS 800 dapat menggunakan kandidat gambar dengan lebar piksel gambar 1600 sebagai contoh 2x. Browser dapat memilih sumber yang sesuai berdasarkan tata letak, kepadatan perangkat, dan kondisi lainnya ketika situs web menyediakan markup gambar responsif. File piksel 1600 tidak berarti bahwa kartu harus menempati piksel CSS 1600 pada laman.

Ukur tata letak sebenarnya sebelum mengekspor. Kolom artikel, spanduk lebar penuh, dan kartu produk kecil jarang memerlukan ukuran sumber yang sama. Periksa juga tata letak ponsel, di mana gambar mungkin memiliki lebar berbeda atau menggunakan potongan berbeda. Membuat setiap file dua kali lebar viewport desktop terbesar dapat membuang-buang byte. Perlakukan ekspor dengan kepadatan lebih tinggi sebagai kandidat untuk penerapan yang benar-benar responsif, bukan hanya satu file berukuran besar yang harus diunduh oleh setiap perangkat.

Halaman ini dimulai dengan kotak pas WebP 1600 dengan piksel 1600. Ini adalah batasan ilustratif, jadi gantilah dengan nilai berdasarkan ukuran tampilan yang Anda ukur. Fit inside menjaga proporsi dan tidak memperbesar sumber yang lebih kecil. Misalnya, dokumen asli lebar mungkin mencapai piksel 1600, sedangkan potret sesuai dengan tingginya. Periksa dimensi keluaran sebenarnya.

Jika sumber hanya memiliki lebar 700 piksel, menulis ekspor piksel 1600 tidak menghasilkan detail asli yang lebih besar. Gunakan sumber yang lebih baik atau terima kandidat yang lebih kecil. Bandingkan Penajaman cahaya dengan Mati setelah mengubah ukuran dan periksa tekstur halus pada ukuran tampilan yang diinginkan. Untuk grafik transparan gunakan PNG, karena ekspor WebP saat ini di sini buram. Simpan desain atau foto aslinya agar Anda dapat membuat kandidat yang berbeda nantinya.

Konverter menghasilkan file; situs web Anda tetap perlu memilih dan menyajikannya dengan benar. Berikan kandidat sumber yang sesuai, petunjuk ukuran yang akurat, dan dimensi gambar yang dipesan dalam penerapannya. Ponsel tidak boleh menerima gambar terbesar hanya karena gambar itu ada. Periksa gambar yang diunduh di alat pengembang browser saat mengevaluasi halaman akhir, karena sistem pengelolaan konten dapat mengubahnya lagi.

Lihat halaman pada pengaturan layar biasa dan kepadatan tinggi, dan bandingkan detail dengan ukuran transfer. Gambar dengan resolusi lebih tinggi tidak secara otomatis merupakan tradeoff terbaik untuk kartu dekoratif kecil. Demikian pula, satu gambar yang terlalu kecil dapat terlihat buruk dalam tampilan produk yang besar. Uji konten yang bermakna seperti wajah dan label alih-alih hanya menilai latar belakang yang buram. Pertahankan prioritas pemuatan sesuai dengan posisi gambar, dan ukur halaman sebenarnya sebelum mengklaim peningkatan kecepatan atau Data Web Inti.

Misalkan kartu terluas Anda adalah piksel CSS 400 dan ilustrasi tetap jelas pada lebar tersebut. Kandidat piksel 800 adalah salah satu kemungkinan ekspor 2x jika sumber mendukungnya. Periksa juga kartu pada tata letak yang lebih sempit, karena gambar yang mencakup seluruh layar ponsel mungkin memiliki lebar tampilan yang berbeda dari kartu desktop. Ekspor dari yang asli untuk setiap kandidat yang dibutuhkan daripada memperbesar yang terkecil. Konfirmasikan file mana yang dipilih browser di halaman sebenarnya. Pemeriksaan seleksi terakhir itulah yang menghubungkan penghitungan dimensi lokal dengan byte yang sebenarnya diterima pengunjung untuk gambar tersebut.