Apakah Anda ingin menyisipkan gambar di halaman web Anda, tapi Anda tidak tahu cara menyesuaikan ukurannya agar sesuai dengan desain? Apakah Anda ingin mempelajari cara menggunakan tag dan atribut HTML untuk mengubah lebar dan tinggi gambar? Tahukah Anda kelebihan dan kekurangan masing-masing metode? Jika jawabannya ya, artikel ini cocok untuk Anda.
Dalam artikel ini, Kami akan mengajari Anda cara menyesuaikan ukuran gambar dalam html, menggunakan berbagai opsi dan sumber daya yang memungkinkan Anda membuat gambar yang menarik dan optimal untuk situs web Anda. Kami juga akan menunjukkan kepada Anda kelebihan dan kekurangan masing-masing opsi, serta beberapa tip dan praktik baik untuk meningkatkan pekerjaan Anda.
Apa itu gambar dalam html dan bagaimana cara menyisipkannya
Gambar dalam html adalah elemen yang memungkinkan Anda untuk menampilkan representasi visual dari suatu objek, seseorang, lanskap, atau apa pun. Untuk menyisipkan gambar dalam html tag digunakan , yang merupakan tag kosong, mis. yang tidak ada penutupannya.
Label memiliki beberapa atribut yang memungkinkan Anda menentukan informasi dan karakteristik gambar. Yang paling penting adalah:
- src: adalah atribut yang menunjukkan jalur atau alamat file gambar. Ini bisa menjadi jalur yang relatif (dalam situs web yang sama) atau jalur absolut (di situs web lain). Misalnya: salah satu .
- alternatif: adalah atribut yang menunjukkan teks alternatif dari gambar, yaitu teks yang ditampilkan ketika gambar tidak dapat dimuat atau pembaca layar digunakan. Itu adalah atribut wajib dan harus menjelaskan isi atau fungsi gambar. Misalnya: .
- Judul: adalah atribut yang menunjukkan judul gambar, yaitu teks yang ditampilkan saat kursor diarahkan tentang gambar. Ini adalah atribut opsional dan dapat berbeda dari teks alternatif. Misalnya: .
Cara mengatur ukuran menggunakan atribut width dan height
Salah satu cara termudah untuk mengatur ukuran gambar di html adalah dengan menggunakan atribut lebar dan tinggi) yang memungkinkan Anda menentukan lebar dan tinggi gambar dalam piksel. Misalnya:
Atribut-atribut ini mempunyai beberapa kelebihan dan kekurangan:
- Manfaat:
- Mereka mudah digunakan dan tidak memerlukan pengetahuan tambahan.
- Mereka memungkinkan Anda untuk memesan ruang yang diperlukan untuk gambar sebelum memuatnya, yang mencegah halaman melompat atau berubah selama memuat.
- memberi Anda pilihan untuk sesuaikan ukuran gambar dengan desain halaman tanpa harus mengubah file asli.
- Kekurangan:
- Mereka dapat mendistorsi rasio aspek atau kualitas gambar jika menggunakan nilai selain ukuran aslinya.
- Itu tidak memungkinkan ukuran gambar disesuaikan dengan ukuran layar atau perangkat pengguna.
- Mereka tidak mengizinkan penerapan efek atau gaya tambahan pada gambar.
Cara mengubah ukuran gambar dalam html menggunakan CSS
Cara lain lebih maju dan fleksibel Untuk mengatur ukuran gambar dalam HTML adalah dengan menggunakan CSS (Cascading Style Sheets), yaitu bahasa yang memungkinkan Anda menentukan dan menerapkan gaya pada elemen HTML. Untuk menggunakan CSS Anda bisa menggunakan tag di dalam dokumen html, file eksternal dengan ekstensi .css. Misalnya:
img { width: 500px; height: 600px; } salah satu
Menggunakan CSS memiliki beberapa kelebihan dan kekurangan:
- Manfaat:
- Memungkinkan Anda menyesuaikan ukuran gambar secara proporsional, menggunakan properti kesesuaian objek atau fungsi calc().
- Mari sesuaikan ukuran gambar bergantung pada ukuran layar atau perangkat pengguna, menggunakan unit relatif (%, em, vw, vh) atau kueri media.
- Efek atau gaya tambahan dapat diterapkan pada gambar, seperti batas, bayangan, filter, atau transformasi.
- Kekurangan:
- Membutuhkan pengetahuan dan penguasaan bahasa CSS yang lebih besar.
- Dapat menimbulkan konflik atau inkonsistensi dengan gaya lain yang diterapkan pada halaman atau gambar.
- Ini dapat mempengaruhi kinerja atau kecepatan memuat halaman jika terlalu banyak gaya atau efek yang digunakan.
Cara mengatur ukuran menggunakan program eksternal
Opsi ketiga untuk menyesuaikan ukuran gambar dalam html adalah menggunakan program eksternal yang memungkinkan Anda mengubah ukuran file gambar sebelum memasukkannya ke halaman. Beberapa program tersebut adalah:
- GIMP: adalah program sumber terbuka dan gratis yang memungkinkan Anda mengedit dan memanipulasi gambar secara profesional. Dengan GIMP Anda dapat mengubah ukuran gambar Menggunakan opsi "Skala Gambar". dari menu “Gambar”. Anda juga dapat mengoptimalkan bobot dan kualitas gambar menggunakan opsi “Ekspor Sebagai” di menu “File”. Anda dapat mengunduh GIMP dari situs resminya.
- photoshop: adalah program berbayar dan rujukan yang memungkinkan Anda membuat dan mengedit gambar dengan cara tingkat lanjut. Dengan Photoshop Anda dapat mengubah ukuran gambar menggunakan opsi “Ukuran Gambar” di menu “Gambar”. Anda juga dapat mengoptimalkan bobot dan kualitas gambar menggunakan opsi "Simpan untuk web". dari menu "Berkas". Anda dapat mengunduh Photoshop dari situs resminya.
- Pengubah Ukuran Gambar Online: adalah alat online gratis yang memungkinkan Anda mengubah ukuran gambar tanpa harus menginstal program apa pun. Dengan Online Image Resizer Anda dapat mengunggah gambar dari komputer Anda atau dari URL, pilih lebar dan tinggi yang diinginkan, dan unduh gambar yang dimodifikasi. Anda dapat mengakses Online Image Resizer dari situs resminya.
Sesuaikan gambar sesuai keinginan Anda
Di artikel ini kami telah menunjukkan kepada Anda cara menyesuaikan ukuran gambar dalam HTML, menggunakan berbagai opsi dan sumber daya yang memungkinkan Anda membuat gambar yang menarik dan optimal untuk situs web Anda. Kami juga telah menunjukkan kepada Anda kelebihan dan kekurangan setiap opsi, serta beberapa tips dan praktik yang baik untuk meningkatkan pekerjaan Anda.
Kami berharap artikel ini bermanfaat bagi Anda dan Anda dianjurkan untuk mencoba opsi dan sumber daya ini untuk menyesuaikan ukuran gambar dalam HTML. Ingatlah bahwa yang terpenting adalah memilih pilihan yang paling sesuai dengan kebutuhan dan tujuan Anda.
Jika Anda menyukai artikel ini, bagikan dengan teman Anda. Dan jika Anda ingin mengetahui lebih banyak tips dan trik tentang html dan aplikasi lainnya, kunjungi website kami. Sampai jumpa!