Mengelola Assets

Halaman HTML hanya separuh isi proyek Kedai Kopi Siti; separuh lainnya adalah assets: foto menu, logo, font khusus, sampai media lain. Jumlahnya tumbuh paling cepat, dan tidak bisa diberi komentar seperti HTML — nama berkasnya satu-satunya kesempatan menjelaskan isinya.

Chapter ini menuntaskan tiga hal: satu rumah untuk semua assets, penamaan deskriptif plus varian ukuran, dan gaya rujukan — relatif dokumen atau relatif root. Semuanya berpusat pada satu aturan: aset tidak boleh tersebar.

Satu Rumah untuk Assets #

Aturannya: semua berkas non-HTML masuk folder assets/ (atau img/ bila proyek hanya punya gambar — pilih satu nama lalu konsisten). Jangan menaruh gambar bebas di root: sepuluh berkas pertama terasa sepele, lima puluh berikutnya membuat root tak bisa dipindai.

Mekanismenya: satu folder berarti satu tempat mencari, membersihkan, dan dipindahkan saat berganti host. Berikut struktur lengkapnya:

kedai-kopi-siti/
├── index.html
├── menu.html
├── css/
│   └── style.css
└── assets/
    ├── logo.png
    ├── hero-utama.webp
    ├── menu/
    │   ├── kopi-susu-s-480.jpg
    │   ├── kopi-susu-l-1200.jpg
    │   └── kopi-tubruk-s-480.jpg
    └── font/
        └── catatan-toko.woff2

Rujukan dari HTML ke berkas-berkas itu kini pendek dan terbaca:

<img
  src="assets/menu/kopi-susu-l-1200.jpg"
  alt="Kopi susu gula aren dalam gelas kaca"
  width="1200"
  height="800">

Mari kita bedah:

1. assets/ (baris 6): satu rumah untuk semua aset; jenis baru tinggal menambah subfolder.
2. menu/ dan font/ (baris 8, 14): pengelompokan satu tingkat per tema; dua tingkat masih wajar, lebih dalam dari itu mulai sulit dirujuk.
3. kopi-susu-s-480.jpg dan kopi-susu-l-1200.jpg (baris 9-10): dua varian ukuran dari foto yang sama — akhiran -s-480 dan -l-1200 menyatakan ukurannya langsung.
4. src="assets/menu/kopi-susu-l-1200.jpg" (baris 2-3): rujukan relatif dokumen, dibaca dari lokasi index.html; atribut panjang dipecah per baris seperti chapter sebelumnya.

Struktur folder adalah keadaan di penyimpanan, bukan halaman yang bisa dirender — tidak ada demo yang relevan untuknya, karena yang tampil di browser hanyalah hasil rujukan src pada img. Susun foldernya pada proyek milikmu, tulis rujukan pendek seperti blok di atas, lalu biarkan panel Network memastikan semua berkasnya termuat.

Penamaan Deskriptif dan Varian #

Nama berkas adalah satu-satunya dokumentasi aset, jadi wajib deskriptif: hero-utama.webp menjelaskan dirinya sendiri, img001.png tidak. Kamera dan ponsel menamai berkas otomatis — biasakan mengganti namanya saat berkas masuk proyek. Aturan lengkapnya:

Varian ukuran dipakai saat satu foto muncul di beberapa tempat: kartu menu cukup versi 480 px, halaman detail perlu 1200 px. Pasangan srcset di Section Images memakai varian ini persis.

Relatif Dokumen atau Relatif Root #

Ada dua gaya rujukan: relatif dokumen (assets/hero-utama.webp, dibaca dari lokasi berkas HTML) dan relatif root (/assets/hero-utama.webp, selalu dari akar proyek). Mekanisme bedanya sudah dibahas di chapter Absolute dan Relative URL.

Kebiasaan yang harus dipegang: satu proyek satu gaya, konsisten di semua halaman. Mencampur keduanya membuat rujukan berperilaku berbeda begitu sebuah halaman pindah ke subfolder — setengah gambar tampil, setengah lagi pecah. Untuk proyek statis kecil, relatif dokumen paling sederhana karena bisa dibuka lewat file:// tanpa server.

Optimasi Ringkas #

Aset gambar penyumbang unduhan terbesar. Dua kebiasaan penutup: format tepat (WebP untuk foto web, PNG untuk logo transparan — lihat Section Images, khususnya chapter Elemen picture) dan kompresi sebelum berkas masuk proyek. Foto kamera 5 MB terkompresi jadi 150 KB tetap tajam di layar ponsel.

Ringkasan #

• Semua berkas non-HTML masuk satu folder assets/, dikelompokkan per tema maksimal satu-dua tingkat.
• Nama berkas deskriptif, kebab-case, dan menyatakan varian ukuran (-s-480, -l-1200).
• Pilih satu gaya rujukan — relatif dokumen atau relatif root — lalu konsisten sepanjang proyek.
• Format tepat plus kompresi menjaga halaman tetap ringan.

Markup rapi dan aset tertata — tinggal satu kebiasaan penutup: menyiapkan HTML agar siap distyle CSS.