Pengelolaan Gambar (Images)

Folder assets/images berfungsi sebagai tempat penyimpanan terpusat untuk semua aset gambar yang digunakan dalam aplikasi web. Pengorganisasian gambar dilakukan dalam beberapa subfolder untuk memudahkan pengelolaan dan penggunaan, seperti:

[root]
   ├── app/
   ├── assets/
   │   ├── css/
   │   ├── fonts/
   │   ├── js/
   │   ├── brand/
   │   │     └── favicon.png
   ├── public/
   │   ├── exsampel/
   │   │── package.json
   │   └── index.html

backgrounds - untuk gambar latar belakang
icons - untuk ikon-ikon UI
content - untuk gambar konten
products - untuk gambar produk

Untuk mengoptimalkan performa website, beberapa hal yang perlu diperhatikan dalam pengelolaan gambar:

Gunakan format gambar yang tepat (JPG untuk foto, PNG untuk gambar dengan transparansi, WebP untuk optimasi)
Optimalkan resolusi gambar sesuai kebutuhan tampilan (1x untuk tampilan normal, 2x untuk perangkat retina)
Kompres gambar tanpa mengurangi kualitas visual secara signifikan

Untuk menggunakan file gambar eksternal dalam aplikasi, cukup gunakan format penulisan berikut:

Panduan penggunaan path gambar:

Awali path dengan "img/" untuk mengakses folder gambar
Ikuti dengan nama subfolder (jika ada), contoh: "img/brand/"
Akhiri dengan nama file gambar, contoh: "img/brand/favicon.png"
Pastikan menggunakan nama file yang tepat termasuk ekstensi (.jpg, .png, dll)

Dengan mengikuti struktur path yang benar, gambar akan dapat diakses dan ditampilkan dengan tepat di aplikasi web.

<img src="img/brand/favicon.png" alt="Image">


Output:
http://localhost/img/brand/favicon.png