Dasar teknis

Menyiapkan gambar untuk web

Sesuaikan ukuran dan potongan, tulis alternatif bermakna, dan simpan berkas asli serta lisensi. Berkas asli dari kamera sering jauh lebih besar daripada kebutuhan halaman web. Proyek arsitektur dapat memakai pratinjau ringan dan gambar besar hanya saat dibutuhkan. Berkas kecil tidak berguna jika detail penting hilang.

Menyiapkan gambar untuk web

Siapkan ukuran untuk tempat gambar ditampilkan

Berkas asli dari kamera sering jauh lebih besar daripada kebutuhan halaman web. Tentukan ukuran maksimum berdasarkan lebar komponen dan kepadatan layar yang masuk akal. Sediakan beberapa varian bila tampilan desktop dan ponsel berbeda jauh. Browser dapat memilih sumber yang sesuai melalui atribut gambar responsif, sehingga pengunjung ponsel tidak harus mengunduh versi terbesar.

Pilih pemotongan dengan memperhatikan subjek. Wajah, bangunan, atau produk penting tidak boleh hilang hanya karena rasio kotak berubah. Periksa hasil pada ukuran nyata sebelum menghapus berkas asli. Simpan sumber berkualitas tinggi di arsip yang terpisah dari aset publik agar versi baru dapat dibuat tanpa mengompres ulang berkas yang sudah rusak.

Sesuaikan format dan kualitas dengan isi

Foto biasanya cocok untuk format raster modern dengan kompresi yang sesuai. Logo dan ikon sederhana dapat memakai SVG yang bersih. Jangan mengubah setiap foto menjadi SVG atau menggunakan PNG sangat besar untuk foto tanpa kebutuhan transparansi. Periksa hasil kompresi pada tepi, teks kecil, dan permukaan bergradasi, bukan hanya ukuran berkas.

Gambar hero perlu prioritas yang cocok karena berpengaruh pada tampilan awal. Gambar di bagian bawah halaman dapat memakai lazy loading. Semua gambar harus memiliki dimensi atau rasio agar ruangnya sudah tersedia. Teks alternatif menjelaskan fungsi informasi; gambar dekoratif dapat mempunyai alt kosong. Nama berkas yang bagus tidak menggantikan alt yang tepat.

Simpan asal dan izin penggunaan

Catat sumber foto, lisensi, tanggal pengunduhan, serta perubahan yang dilakukan. Gambar yang ditemukan lewat pencarian belum tentu boleh digunakan secara komersial. Untuk hasil proyek atau foto pelanggan, pastikan persetujuan publikasi dan perhatikan informasi pribadi yang terlihat. Jangan memberi kesan bahwa foto stok adalah kantor atau pelanggan nyata.

Pada saat penyerahan, sertakan daftar aset dan tempat menyimpan versi sumber. Periksa tidak ada URL gambar eksternal yang rapuh jika gambar dapat disajikan dengan izin dari domain sendiri. Uji halaman dengan koneksi lambat dan gambar gagal dimuat. Isi penting harus tetap dapat dipahami, sedangkan tata letak tetap stabil tanpa mengandalkan foto sebagai satu-satunya penjelasan.

Daftar periksa praktis

  • Pilih rasio
  • Tetapkan dimensi
  • Tinjau kompresi

Contoh konkret: Proyek arsitektur dapat memakai pratinjau ringan dan gambar besar hanya saat dibutuhkan.

Batas yang perlu jelas: Berkas kecil tidak berguna jika detail penting hilang.

Langkah berikutnya

Ceritakan proyek Anda kepada Orvunweb

Bacaan terkait

Sumber