Bagaimana cara menggunakan logo png di html?

Question

Untuk merender gambar dengan latar belakang transparan, sertakan yang berikut ini di CSS Anda saat membuat gambar

Table of Contents Show

Bekerja dengan PNG saja
Butuh bantuan?
Bisakah kita menggunakan gambar PNG dalam HTML?
Mengapa PNG tidak muncul di HTML?
Bagaimana cara membuat PNG transparan dalam HTML?
Bagaimana cara menambahkan ikon logo di HTML?

body { 
  background-color: transparent;
}

Contoh

Gambar ini memiliki background-color: transparent;_ disetel pada body

Cobalah sendiri

Gambar URL

Saat membuat gambar dari URL. Lewati CSS yang sama di param CSS dan latar belakang akan dibuat transparan

Bekerja dengan PNG saja

Transparansi hanya didukung oleh format file PNG. Secara default, semua gambar dirender sebagai PNG. Jika Anda merender gambar sebagai JPG atau Webp, latar belakangnya akan berwarna putih

Butuh bantuan?

Bicaralah dengan manusia. support@htmlcsstoimage. com. Kami selalu merespon dalam waktu 24 jam. Dan seringkali, bahkan lebih cepat

Standar HTML tidak mencantumkan format gambar apa yang harus didukung, jadi agen pengguna mungkin mendukung format yang berbeda

Catatan. Panduan jenis dan format file Gambar memberikan informasi lengkap tentang format gambar dan dukungan browser webnya. Bagian ini hanyalah ringkasan

Format file gambar yang paling umum digunakan di web adalah

— Pilihan yang bagus untuk rangkaian animasi lossless (GIF kurang berkinerja)
— Pilihan bagus untuk gambar dan gambar animasi karena performa tinggi
— Pilihan bagus untuk gambar dan animasi sederhana
— Pilihan bagus untuk kompresi lossy gambar diam (saat ini yang paling populer)
— Pilihan bagus untuk kompresi gambar diam tanpa kehilangan (kualitas sedikit lebih baik daripada JPEG)
— Format gambar vektor. Gunakan untuk gambar yang harus digambar secara akurat pada berbagai ukuran
— Pilihan luar biasa untuk gambar dan gambar animasi

Format suka dan direkomendasikan karena kinerjanya jauh lebih baik daripada PNG, JPEG, GIF untuk gambar diam dan animasi. WebP didukung secara luas sementara AVIF tidak memiliki dukungan di Safari

SVG tetap menjadi format yang direkomendasikan untuk gambar yang harus digambar secara akurat pada berbagai ukuran

Jika terjadi kesalahan saat memuat atau merender gambar, dan pengendali peristiwa telah ditetapkan pada peristiwa

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

9, pengendali peristiwa itu akan dipanggil. Ini dapat terjadi dalam beberapa situasi, termasuk

Atribut src kosong (

<img src="favicon72.png" alt="MDN logo" srcset="favicon144.png 2x" />

1) atau

<img src="favicon72.png" alt="MDN logo" srcset="favicon144.png 2x" />

2

URL src sama dengan URL halaman tempat pengguna saat ini berada
Gambar rusak dalam beberapa cara yang mencegahnya dimuat
Metadata gambar rusak sedemikian rupa sehingga tidak mungkin untuk mengambil dimensinya, dan tidak ada dimensi yang ditentukan dalam atribut elemen <img>
Gambar dalam format yang tidak didukung oleh agen pengguna

Elemen ini termasuk atribut global

Menentukan deskripsi teks alternatif dari gambar

Catatan. Browser tidak selalu menampilkan gambar. Ada sejumlah situasi di mana browser mungkin tidak menampilkan gambar, seperti

Peramban non-visual (seperti yang digunakan oleh orang dengan gangguan penglihatan)
Pengguna memilih untuk tidak menampilkan gambar (menghemat bandwidth, alasan privasi)
Gambar tidak valid atau

Dalam kasus ini, browser dapat mengganti gambar dengan teks dalam atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

0 elemen. Untuk alasan ini dan lainnya, berikan nilai yang berguna untuk

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

0 jika memungkinkan

Menyetel atribut ini ke string kosong (

<img src="favicon72.png" alt="MDN logo" srcset="favicon144.png 2x" />

8) menunjukkan bahwa gambar ini bukan bagian penting dari konten (ini adalah dekorasi atau piksel pelacakan), dan bahwa browser non-visual dapat menghilangkannya dari perenderan. Peramban visual juga akan menyembunyikan ikon gambar rusak jika

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

0 kosong dan gambar gagal ditampilkan

Atribut ini juga digunakan saat menyalin dan menempelkan gambar ke teks, atau menyimpan gambar yang ditautkan ke bookmark

Menunjukkan apakah pengambilan gambar harus dilakukan menggunakan permintaan CORS. Data gambar dari gambar berkemampuan CORS yang dikembalikan dari permintaan CORS dapat digunakan kembali di elemen

<img
  src="clock-demo-200px.png"
  alt="Clock"
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

1 tanpa ditandai ""

Jika atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_1 tidak ditentukan, maka permintaan non-CORS dikirim (tanpa header permintaan

<img
  src="clock-demo-200px.png"
  alt="Clock"
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

3), dan browser menandai gambar sebagai tercemar dan membatasi akses ke data gambarnya, mencegah penggunaannya dalam elemen

<img
  src="clock-demo-200px.png"
  alt="Clock"
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

1

Jika atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_1 ditentukan, maka permintaan CORS dikirim (dengan header permintaan

<img
  src="clock-demo-200px.png"
  alt="Clock"
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

3);

Nilai yang diizinkan

<img
  src="clock-demo-200px.png"
  alt="Clock"
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

_9

Permintaan CORS dikirim dengan kredensial dihilangkan (yaitu, tanpa cookie, X. 509 sertifikat, atau

<img alt="image" src="penguin.jpg" />

0 header permintaan)

<img alt="image" src="penguin.jpg" />

1

Permintaan CORS dikirim dengan kredensial apa pun yang disertakan (yaitu, cookie, X. 509 sertifikat, dan header permintaan

<img alt="image" src="penguin.jpg" />

0). Jika server tidak ikut serta dalam berbagi kredensial dengan situs asal (dengan mengirimkan kembali header tanggapan

<img alt="image" src="penguin.jpg" />

3), maka browser akan menandai gambar sebagai tercemar dan membatasi akses ke data gambarnya

Jika atribut memiliki nilai yang tidak valid, browser menanganinya seolah-olah nilai

<img
  src="clock-demo-200px.png"
  alt="Clock"
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

9 digunakan. Lihat atribut pengaturan CORS untuk informasi tambahan

Memberikan petunjuk decoding gambar ke browser. Nilai yang diizinkan

<img alt="image" src="penguin.jpg" />

6

Dekode gambar secara sinkron, untuk presentasi atomik dengan konten lain

<img alt="image" src="penguin.jpg" />

7

Dekode gambar secara asinkron, untuk mengurangi keterlambatan dalam menyajikan konten lain

<img alt="image" src="penguin.jpg" />

8

Bawaan. tidak ada preferensi untuk mode decoding. Browser memutuskan apa yang terbaik bagi pengguna

Menandai gambar untuk pengamatan oleh

<img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg" />

0 API. Nilai yang diberikan menjadi pengenal untuk elemen gambar yang diamati. Lihat juga halaman atribut

<img alt="image" src="penguin.jpg" />

_9

Eksperimental

Memberikan petunjuk tentang prioritas relatif untuk digunakan saat mengambil gambar. Nilai yang diizinkan

<img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg" />

_3

Memberi sinyal pengambilan prioritas tinggi relatif terhadap gambar lain

<img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg" />

_4

Memberi sinyal pengambilan dengan prioritas rendah relatif terhadap gambar lain

<img alt="image" src="penguin.jpg" />

8

Bawaan. Memberi sinyal penentuan otomatis prioritas pengambilan relatif terhadap gambar lain

Tinggi intrinsik gambar, dalam piksel. Harus berupa bilangan bulat tanpa satuan

Catatan. Menyertakan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_4 dan memungkinkan rasio aspek gambar dihitung oleh browser sebelum gambar dimuat. Rasio aspek ini digunakan untuk mencadangkan ruang yang diperlukan untuk menampilkan gambar, mengurangi atau bahkan mencegah pergeseran tata letak saat gambar diunduh dan dilukis ke layar. Mengurangi pergeseran tata letak adalah komponen utama dari pengalaman pengguna dan kinerja web yang baik

Atribut Boolean ini menunjukkan bahwa gambar tersebut merupakan bagian dari a. Jika demikian, koordinat tempat pengguna mengklik gambar dikirim ke server

Catatan. Atribut ini hanya diperbolehkan jika elemen <img> adalah turunan dari elemen

<img src="mdn.svg" alt="MDN logo" role="img" />

1 dengan atribut yang valid. Ini memberi pengguna tanpa menunjuk perangkat tujuan mundur

Menunjukkan bagaimana browser harus memuat gambar

<img src="mdn.svg" alt="MDN logo" role="img" />

4

Memuat gambar dengan segera, terlepas dari apakah gambar saat ini berada dalam viewport yang terlihat atau tidak (ini adalah nilai default)

<img src="mdn.svg" alt="MDN logo" role="img" />

5

Tunda pemuatan gambar hingga mencapai jarak yang dihitung dari viewport, seperti yang ditentukan oleh browser. Tujuannya adalah untuk menghindari bandwidth jaringan dan penyimpanan yang diperlukan untuk menangani gambar hingga cukup yakin bahwa itu akan diperlukan. Ini umumnya meningkatkan kinerja konten di sebagian besar kasus penggunaan umum

Catatan. Memuat hanya ditangguhkan saat JavaScript diaktifkan. Ini adalah tindakan anti-pelacakan, karena jika agen pengguna mendukung pemuatan lambat saat skrip dinonaktifkan, situs masih dapat melacak perkiraan posisi gulir pengguna selama sesi, dengan menempatkan gambar secara strategis di markup halaman sedemikian rupa sehingga

Sebuah string yang menunjukkan perujuk mana yang akan digunakan saat mengambil sumber daya

<img src="mdn.svg" alt="MDN logo" role="img" />

7. Header

<img src="mdn.svg" alt="MDN logo" role="img" />

_8 tidak akan dikirim

<img src="mdn.svg" alt="MDN logo" role="img" />

_9. Header

<img src="mdn.svg" alt="MDN logo" role="img" />

_8 tidak akan dikirim ke asal tanpa TLS (HTTPS)

<img>_1. Perujuk yang dikirim akan dibatasi pada asal halaman rujukan. skema, host, dan portnya
<img>_2. Perujuk yang dikirim ke asal lain akan dibatasi pada skema, host, dan port. Navigasi pada asal yang sama akan tetap menyertakan jalur
<img>_3. Perujuk akan dikirim untuk asal yang sama, tetapi permintaan lintas asal tidak akan berisi informasi perujuk
<img>_4. Hanya kirim asal dokumen sebagai perujuk ketika tingkat keamanan protokol tetap sama (HTTPS→HTTPS), tetapi jangan kirimkan ke tujuan yang kurang aman (HTTPS→HTTP)
<img>_5 (standar). Kirim URL lengkap saat melakukan permintaan asal yang sama, hanya kirim asal saat tingkat keamanan protokol tetap sama (HTTPS→HTTPS), dan jangan kirimkan header ke tujuan yang kurang aman (HTTPS→HTTP)
<img>_6. Perujuk akan menyertakan asal dan jalur (tetapi bukan fragmen, kata sandi, atau nama pengguna). Nilai ini tidak aman, karena membocorkan asal dan jalur dari sumber daya yang dilindungi TLS ke asal yang tidak aman

Satu atau lebih string yang dipisahkan dengan koma, menunjukkan sekumpulan ukuran sumber. Setiap ukuran sumber terdiri dari

SEBUAH. Ini harus dihilangkan untuk item terakhir dalam daftar
Nilai ukuran sumber

Kondisi Media menjelaskan properti viewport, bukan gambar. Misalnya, <img>_8 mengusulkan untuk menggunakan sumber dengan lebar 1000px, jika viewport tidak lebih tinggi dari 500px

Nilai ukuran sumber menentukan ukuran tampilan gambar yang diinginkan. Agen pengguna menggunakan ukuran sumber saat ini untuk memilih salah satu sumber yang disediakan oleh atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

6, ketika sumber tersebut dijelaskan menggunakan deskriptor lebar (<img>0). Ukuran sumber yang dipilih memengaruhi ukuran intrinsik gambar (ukuran tampilan gambar jika gaya CSS tidak diterapkan). Jika atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_6 tidak ada, atau tidak berisi nilai dengan deskriptor lebar, maka atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

5 tidak berpengaruh

URL gambar. Wajib untuk elemen <img>. Pada browser yang mendukung

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

6, src diperlakukan seperti gambar kandidat dengan deskriptor kerapatan piksel <img>7, kecuali gambar dengan deskriptor kerapatan piksel ini sudah ditentukan dalam

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

6, atau kecuali

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

6 berisi deskriptor <img>0

Satu atau lebih string dipisahkan dengan koma, menunjukkan kemungkinan sumber gambar untuk digunakan agen pengguna. Setiap string terdiri dari

URL ke gambar
Secara opsional, spasi putih diikuti oleh salah satu dari
- Deskriptor lebar (bilangan bulat positif langsung diikuti oleh <img>0). Deskriptor lebar dibagi dengan ukuran sumber yang diberikan dalam atribut
```
<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>
```
  5 untuk menghitung kerapatan piksel efektif
- Deskriptor kerapatan piksel (angka floating point positif langsung diikuti oleh src4)

Jika tidak ada deskriptor yang ditentukan, sumber diberi deskriptor default <img>7

Mencampur deskriptor lebar dan deskriptor kerapatan piksel dalam atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

6 yang sama adalah salah. Deskriptor duplikat (misalnya, dua sumber dalam

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

6 yang sama yang keduanya dijelaskan dengan src8) juga tidak valid

Jika atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_6 menggunakan deskriptor lebar, atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

5 juga harus ada, atau

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

6 itu sendiri akan diabaikan

Agen pengguna memilih salah satu sumber yang tersedia atas kebijakannya sendiri. Ini memberi mereka kelonggaran yang signifikan untuk menyesuaikan pilihan mereka berdasarkan hal-hal seperti preferensi pengguna atau kondisi bandwidth. Lihat tutorial gambar Responsif kami sebagai contoh

Lebar intrinsik gambar dalam piksel. Harus berupa bilangan bulat tanpa satuan

Sebagian URL (dimulai dengan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_04) dari peta gambar yang terkait dengan elemen

Catatan. Anda tidak dapat menggunakan atribut ini jika elemen <img> berada di dalam elemen

<img src="mdn.svg" alt="MDN logo" role="img" />

1 atau

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

07

Tidak digunakan lagi

Sejajarkan gambar dengan konteks sekitarnya. Gunakan properti CSS

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_09 dan/atau ________1______10 alih-alih atribut ini. Nilai yang diizinkan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_11

Setara dengan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

12 atau

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

13

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_14

Setara dengan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_15

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_16

Standarnya, setara dengan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_17 atau

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

18

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_19

Setara dengan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_20

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_21

Setara dengan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_22

Tidak digunakan lagi

Lebar batas di sekitar gambar. Gunakan properti CSS

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_23 sebagai gantinya

Tidak digunakan lagi

Jumlah piksel ruang putih di kiri dan kanan gambar. Gunakan properti CSS

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_26 sebagai gantinya

Tidak digunakan lagi

Tautan ke deskripsi gambar yang lebih detail. Nilai yang mungkin adalah URL atau elemen

Catatan. Atribut ini disebutkan dalam versi W3C terbaru, , tetapi telah dihapus dari WHATWG. Ia memiliki masa depan yang tidak pasti;

Tidak digunakan lagi

Nama untuk elemen. Gunakan atribut sebagai gantinya

Tidak digunakan lagi

Jumlah piksel ruang putih di atas dan di bawah gambar. Gunakan properti CSS

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_26 sebagai gantinya

<img>_ adalah elemen yang diganti; . Anda dapat mengatur properti seperti

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_23/

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

40,

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

41/

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

26,

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

3,

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

4, dll. pada sebuah gambar

<img>_ tidak memiliki garis dasar, jadi ketika gambar digunakan dalam konteks pemformatan sebaris dengan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

10

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

47, bagian bawah gambar akan ditempatkan pada garis dasar teks

Anda dapat menggunakan properti

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

48 untuk memosisikan gambar di dalam kotak elemen, dan properti

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

49 untuk menyesuaikan ukuran gambar di dalam kotak (misalnya, apakah gambar harus sesuai dengan kotak atau mengisinya meskipun kliping diperlukan)

Bergantung pada jenisnya, sebuah gambar mungkin memiliki lebar dan tinggi intrinsik. Namun, untuk beberapa jenis gambar, dimensi intrinsik tidak diperlukan. Gambar SVG, misalnya, tidak memiliki dimensi intrinsik jika elemen

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

50 akarnya tidak memiliki

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

3 atau

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

4 di atasnya

Contoh berikut menyematkan gambar ke dalam halaman dan menyertakan teks alternatif untuk aksesibilitas

<img src="favicon144.png" alt="MDN logo" />

Contoh ini dibuat berdasarkan contoh sebelumnya, menunjukkan cara mengubah gambar menjadi tautan. Untuk melakukannya, tempatkan tag <img> di dalam

<img src="mdn.svg" alt="MDN logo" role="img" />

1. Anda harus membuat teks alternatif menjelaskan sumber daya yang ditunjuk tautan, seolah-olah Anda menggunakan tautan teks

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_

Dalam contoh ini kami menyertakan atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_6 dengan referensi ke logo versi resolusi tinggi; . Gambar yang direferensikan dalam atribut src_ dihitung sebagai kandidat <img>7 di agen pengguna yang mendukung

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

6

<img src="favicon72.png" alt="MDN logo" srcset="favicon144.png 2x" />

Atribut src diabaikan di agen pengguna yang mendukung

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

6 ketika deskriptor <img>0 disertakan. Ketika kondisi media

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_63 cocok, gambar selebar 200 piksel akan dimuat (gambar yang paling cocok dengan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

64), jika tidak, gambar lain akan dimuat

<img
  src="clock-demo-200px.png"
  alt="Clock"
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

_

Catatan. Untuk melihat tindakan pengubahan ukuran, lihat contoh di halaman terpisah, sehingga Anda benar-benar dapat mengubah ukuran area konten

Meskipun elemen <img> memiliki kegunaan yang tidak berbahaya, mereka dapat memiliki konsekuensi yang tidak diinginkan untuk keamanan dan privasi pengguna. Lihat Tajuk perujuk. masalah privasi dan keamanan untuk informasi lebih lanjut dan mitigasi

Nilai atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_0 harus menjelaskan konten gambar dengan jelas dan ringkas. Seharusnya tidak menjelaskan keberadaan gambar itu sendiri atau nama file dari gambar tersebut. Jika atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_0 sengaja dihilangkan karena gambar tidak memiliki padanan tekstual, pertimbangkan metode alternatif untuk menyajikan apa yang coba dikomunikasikan oleh gambar

Jangan

<img alt="image" src="penguin.jpg" />

Mengerjakan

<img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg" />

Saat atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_0 tidak ada pada gambar, beberapa pembaca layar mungkin mengumumkan nama file gambar sebagai gantinya. Ini bisa menjadi pengalaman yang membingungkan jika nama file tidak mewakili konten gambar

Alt Decision Tree • Gambar • Tutorial Aksesibilitas Web WAI
Alt-teks. Panduan Utama — Axess Lab
Cara Mendesain Teks Alt yang Hebat. Sebuah Pengantar. Deque
Memahami Kriteria Sukses 1. 1. 1. W3C Memahami WCAG 2. 0

Karena bug VoiceOver, VoiceOver tidak mengumumkan gambar SVG sebagai gambar dengan benar. Sertakan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_69 ke semua <img> elemen dengan file sumber SVG untuk memastikan teknologi pendukung mengumumkan SVG sebagai konten gambar dengan benar

<img src="mdn.svg" alt="MDN logo" role="img" />

Atribut bukan merupakan pengganti yang dapat diterima untuk

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

0 atribut. Selain itu, hindari duplikasi nilai atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_0 dalam atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

71 yang dideklarasikan pada gambar yang sama. Melakukannya dapat menyebabkan beberapa pembaca layar membacakan deskripsi dua kali, menciptakan pengalaman yang membingungkan

Atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

71 juga tidak boleh digunakan sebagai informasi teks tambahan untuk menyertai deskripsi

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

0 gambar. Jika gambar memerlukan teks, gunakan elemen

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

77 dan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

78

Nilai atribut

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

_71 biasanya disajikan kepada pengguna sebagai tooltip, yang muncul segera setelah kursor berhenti bergerak di atas gambar. Meskipun ini dapat memberikan informasi tambahan kepada pengguna, Anda tidak boleh berasumsi bahwa pengguna akan pernah melihatnya. pengguna mungkin hanya memiliki keyboard atau layar sentuh. Jika Anda memiliki informasi yang sangat penting atau berharga bagi pengguna, sajikan informasi itu sebaris menggunakan salah satu metode yang disebutkan di atas daripada menggunakan

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>

71

Bisakah kita menggunakan gambar PNG dalam HTML?

Anda dapat menggunakan file gambar PNG, JPEG, atau GIF sesuai kenyamanan Anda, tetapi pastikan Anda menentukan nama file gambar yang benar di atribut src . Nama gambar selalu peka huruf besar-kecil.

Mengapa PNG tidak muncul di HTML?

Mengapa PNG tidak muncul di HTML? . Anda perlu memastikan bahwa nama ekstensi, nama file, nama jalur, dan sintaks HTML sudah benar . Anda tidak perlu lagi khawatir file PNG tidak dapat dibuka di Windows 10/11.

Bagaimana cara membuat PNG transparan dalam HTML?

Transparansi tidak dilakukan dalam HTML, tetapi merupakan bagian dari gambar itu sendiri. Browser akan melihat gambar sebagai PNG dan menampilkannya sebagai PNG secara otomatis. Untuk menambahkan transparansi pada gambar, Anda harus mengedit file dengan editor grafis seperti Photoshop . Simpan jawaban ini.