Pilih dimensi imej berguna untuk paparan berketumpatan tinggi

Kad yang dipaparkan selebar 800 piksel CSS boleh menggunakan calon imej selebar 1600 piksel imej sebagai contoh 2x. Pelayar boleh memilih sumber sesuai berdasarkan susun atur, ketumpatan peranti dan keadaan lain apabila laman web menyediakan penanda imej responsif. Fail 1600 piksel tidak bermakna kad itu patut memenuhi 1600 piksel CSS pada halaman.

Ukur susun atur sebenar sebelum mengeksport. Lajur artikel, sepanduk lebar penuh dan kad produk kecil jarang memerlukan saiz sumber sama. Periksa juga susun atur telefon, tempat imej mungkin mengambil lebar berbeza atau menggunakan potongan lain. Membuat setiap fail dua kali lebar ruang pandang desktop terbesar boleh membazir bait. Anggap eksport ketumpatan lebih tinggi sebagai calon bagi pelaksanaan responsif sebenar, bukan satu fail terlalu besar yang mesti dimuat turun setiap peranti.

Halaman ini bermula dengan kotak muat WebP 1600×1600 piksel. Itu had contoh, jadi gantikannya dengan nilai berdasarkan saiz paparan yang anda ukur. Muat dalam mengekalkan nisbah dan tidak membesarkan sumber lebih kecil. Contohnya, imej asal lebar mungkin mencapai 1600 piksel melintang, manakala potret dimuatkan mengikut tinggi. Periksa dimensi output sebenar.

Jika sumber hanya selebar 700 piksel, menghasilkan eksport 1600 piksel tidak mencipta butiran imej asal lebih besar. Gunakan sumber lebih baik atau terima calon lebih kecil. Bandingkan penajaman Ringan dengan Mati selepas perubahan saiz dan periksa tekstur halus pada saiz paparan yang dimaksudkan. Untuk grafik lutsinar, gunakan PNG kerana eksport WebP semasa di sini legap. Simpan reka bentuk atau foto asal supaya anda boleh membuat calon lain kemudian.

Penukar menghasilkan fail; laman web masih perlu memilih dan memaparkannya dengan betul. Sediakan calon sumber sesuai, petunjuk saiz tepat dan ruang dimensi imej dalam pelaksanaan. Telefon tidak patut menerima imej terbesar semata-mata kerana fail itu ada. Periksa imej yang dimuat turun dalam alat pembangun pelayar semasa menilai halaman akhir kerana sistem pengurusan kandungan mungkin mengubahnya lagi.

Lihat halaman pada tetapan skrin biasa dan ketumpatan tinggi, dan bandingkan butiran dengan saiz pemindahan. Imej resolusi lebih tinggi tidak semestinya imbangan terbaik untuk kad hiasan kecil. Begitu juga, satu imej terlalu kecil boleh kelihatan buruk dalam paparan produk besar. Uji kandungan bermakna seperti wajah dan label, bukan hanya menilai latar kabur. Tetapkan keutamaan pemuatan sesuai dengan kedudukan imej dan ukur halaman sebenar sebelum mendakwa kelajuan atau Core Web Vitals bertambah baik.

Katakan kad terlebar anda ialah 400 piksel CSS dan ilustrasi kekal jelas pada lebar itu. Calon 800 piksel ialah satu eksport 2x yang mungkin apabila sumber menyokongnya. Periksa kad pada susun atur lebih sempit juga kerana imej selebar skrin telefon mungkin mempunyai lebar paparan berbeza daripada kad desktop. Eksport setiap calon yang diperlukan daripada imej asal, bukan membesarkan calon terkecil. Pastikan fail yang dipilih pelayar pada halaman sebenar. Pemeriksaan pilihan akhir itulah yang menghubungkan pengiraan dimensi setempat dengan bait imej yang benar-benar diterima pelawat.