Gambar Lokal dan Eksternal

Alamat pada src boleh menunjuk ke mana saja — folder proyek kita atau domain milik orang lain. Kedua pilihan itu menghasilkan gambar yang sama di layar, tetapi konsekuensinya jauh berbeda: pilihan pertama menempatkan nasib halaman sepenuhnya di tangan kita, pilihan kedua membaginya dengan pihak ketiga.

Gambar Lokal #

Aturannya: gambar lokal disimpan pada folder proyek sendiri — lazimnya assets/ atau img/. Kita mengendalikan keberadaan berkasnya, formatnya, ukurannya, dan versinya bersama kode di Git; berkas ikut terkirim ke server yang sama dengan halaman; dan browser memuatnya dari satu domain sehingga tidak membuka koneksi tambahan.

Struktur folder yang rapi untuk aset gambar tampak seperti ini:

kedai/
├── index.html
├── menu/
│   └── index.html
└── assets/
    └── img/
        ├── logo.svg
        ├── hero.webp
        └── menu/
            └── espresso.jpg

Referensinya dari beranda:

<img src="assets/img/logo.svg" alt="Kedai Kopi Siti">
<img
  src="assets/img/hero.webp"
  alt="Barista Kedai Kopi Siti menuangkan kopi susu gula aren"
  width="1600"
  height="900">

Gambar Eksternal #

Gambar eksternal dirujuk dengan URL lengkap ke domain lain:

<img
  src="https://cdn.example.com/kedai/interior.webp"
  alt="Ruang duduk Kedai Kopi Siti dengan tanaman gantung"
  width="1200"
  height="800">

Cara ini praktis karena kita tidak perlu mengunduh dan menyimpan berkasnya, tetapi tiga risiko melekat. Berkas bisa hilang sewaktu-waktu karena pemiliknya menghapus atau memindahkannya. Pemuatan bisa lambat karena browser harus menghubungi domain lain. Dan memakai bandwidth orang lain — praktik hotlinking — dinilai kurang sopan sehingga sebagian server memblokirnya; gambar kita kemudian tampil gagal termuat tanpa peringatan.

Kedua pola menghasilkan gambar yang sama di layar — perbedaannya sama sekali tidak terlihat dari tampilannya, hanya dari tempat berkasnya berada:

Pada demo, kedua gambar memakai placeholder SVG — termasuk yang menggambarkan pola eksternal — karena demo tidak boleh bergantung pada berkas di domain lain; struktur markupnya sama persis.

Perbandingan ringkas kedua pilihan:

Ringkasan #

• Gambar lokal memberi keandalan, kecepatan satu domain, dan kendali penuh atas format serta versi.
• Gambar eksternal praktis, tetapi berisiko hilang, lambat, dan terblokir karena hotlinking.
• Tata aset pada satu folder khusus agar rujukan mudah dirawat.

Masalah berikutnya lahir bahkan dari gambar lokal sekalipun: satu berkas yang sama dikirim ke semua ukuran layar — dan cara browser memilih kandidat yang pas lewat srcset.