Mengapa gambar png tidak berfungsi di html?

Untuk meletakkan gambar sederhana di halaman web, kami menggunakan elemen

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Itu

Catatan. Anda harus membaca untuk menyegarkan ingatan Anda tentang URL relatif dan absolut sebelum melanjutkan

Jadi misalnya, jika gambar Anda disebut

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="dinosaur.jpg" alt="Dinosaur" />

Jika gambar berada di subdirektori

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Dan seterusnya

Catatan. Mesin pencari juga membaca nama file gambar dan menghitungnya untuk SEO. Oleh karena itu, Anda harus memberikan nama file deskriptif pada gambar Anda;

Anda dapat menyematkan gambar menggunakan URL absolutnya, misalnya

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Tapi ini tidak dianjurkan. Anda harus menghosting gambar Anda sendiri, yang dalam penyiapan sederhana berarti menyimpan gambar untuk situs web Anda di server yang sama dengan HTML Anda. Dalam pengaturan lebih lanjut, Anda mungkin menggunakan CDN (Jaringan Pengiriman Konten) untuk mengirim gambar Anda

Peringatan. Jangan pernah mengarahkan atribut src Anda ke gambar yang dihosting di situs web orang lain tanpa izin. Ini disebut "hotlink". Hal ini umumnya dianggap tidak etis, karena orang lain akan membayar biaya bandwidth untuk mengirimkan gambar saat seseorang mengunjungi halaman Anda. Ini juga membuat Anda tidak memiliki kendali atas apakah gambar tersebut dihapus atau diganti dengan sesuatu yang memalukan

Secara umum, Anda harus menghosting gambar yang ingin Anda gunakan di situs Anda. Ingatlah bahwa banyak gambar yang Anda temukan di web memiliki hak cipta. Sebelum Anda menghosting gambar, Anda harus memastikan bahwa salah satunya berlaku

• Anda memiliki gambarnya
• Anda telah menerima izin tertulis yang jelas dari pemilik gambar
• Anda memiliki banyak bukti bahwa gambar tersebut sebenarnya berada di domain publik

Kode kami di atas akan memberi kami hasil sebagai berikut

Catatan. Elemen seperti

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

Catatan. Anda dapat menemukan contoh yang sudah selesai dari bagian ini yang berjalan di GitHub (lihat juga kode sumbernya. )

Atribut berikutnya yang akan kita lihat adalah

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

Cara termudah untuk menguji teks

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

Jadi, mengapa Anda pernah melihat atau membutuhkan teks alternatif?

• Pengguna tunanetra, dan menggunakan pembaca layar untuk membacakan web kepada mereka. Sebenarnya, memiliki teks alt yang tersedia untuk mendeskripsikan gambar berguna bagi sebagian besar pengguna
• Seperti dijelaskan di atas, ejaan nama file atau jalur mungkin salah
• Browser tidak mendukung jenis gambar. Beberapa orang masih menggunakan browser hanya teks, seperti Lynx, yang menampilkan teks alt gambar
• Anda mungkin ingin menyediakan teks untuk digunakan oleh mesin telusur;
• Pengguna telah mematikan gambar untuk mengurangi volume dan gangguan transfer data. Ini sangat umum terjadi pada ponsel, dan di negara-negara di mana bandwidth terbatas atau mahal

Apa sebenarnya yang harus Anda tulis di dalam atribut

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

• Dekorasi. Anda harus menggunakan gambar dekoratif, tetapi jika Anda harus menggunakan HTML, tambahkan

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth" />
  

  8 kosong. Jika gambar bukan bagian dari konten, pembaca layar tidak perlu membuang waktu untuk membacanya
• Isi. Jika gambar Anda memberikan informasi yang signifikan, berikan informasi yang sama dalam teks singkat

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  0 – atau bahkan lebih baik, dalam teks utama yang dapat dilihat semua orang. Jangan menulis teks berlebihan

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  _0. Seberapa menyebalkan bagi pengguna yang dapat melihat jika semua paragraf ditulis dua kali dalam konten utama?
• Tautan. Jika Anda memasukkan gambar ke dalam tag

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  3, untuk mengubah gambar menjadi tautan, Anda tetap harus memberikan. Dalam kasus seperti itu, Anda dapat, baik, menuliskannya di dalam elemen

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  3 yang sama, atau di dalam atribut

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  0 gambar – mana saja yang paling sesuai dengan kasus Anda
• Teks. Anda tidak boleh memasukkan teks Anda ke dalam gambar. Jika heading utama Anda membutuhkan drop shadow, misalnya, gunakan CSS untuk itu daripada memasukkan teks ke dalam gambar. Namun, jika Anda benar-benar tidak dapat menghindari melakukan ini, Anda harus memasukkan teks di dalam atribut

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  0

Intinya, kuncinya adalah memberikan pengalaman yang bermanfaat, bahkan saat gambar tidak terlihat. Ini memastikan semua pengguna tidak melewatkan konten apa pun. Coba matikan gambar di browser Anda dan lihat tampilannya. Anda akan segera menyadari betapa bermanfaatnya teks alternatif jika gambar tidak dapat dilihat

Catatan. Untuk informasi lebih lanjut, lihat panduan kami untuk

Anda dapat menggunakan atribut

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

Ini tidak menghasilkan banyak perbedaan pada tampilan, dalam keadaan normal. Namun jika gambar tidak ditampilkan, misalnya, pengguna baru saja membuka halaman, dan gambar belum dimuat, Anda akan melihat browser menyisakan ruang untuk gambar muncul

Ini adalah hal yang baik untuk dilakukan, sehingga pemuatan halaman menjadi lebih cepat dan lancar

Namun, Anda tidak boleh mengubah ukuran gambar menggunakan atribut HTML. Jika Anda menyetel ukuran gambar terlalu besar, Anda akan mendapatkan gambar yang terlihat kasar, tidak jelas, atau terlalu kecil, dan menghabiskan bandwidth untuk mengunduh gambar yang tidak sesuai dengan kebutuhan pengguna. Gambar mungkin juga terlihat terdistorsi, jika Anda tidak mempertahankan rasio aspek yang benar. Anda harus menggunakan editor gambar untuk menempatkan gambar Anda pada ukuran yang benar sebelum meletakkannya di halaman web Anda

Catatan. Jika Anda perlu mengubah ukuran gambar, sebaiknya gunakan CSS

Sebagai , Anda juga dapat menambahkan

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

Ini memberi kita tooltip pada mouse hover, seperti judul tautan

Namun, ini tidak disarankan —

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

Lebih baik memasukkan informasi pendukung tersebut dalam teks artikel utama, daripada dilampirkan pada gambar

Sekarang giliran Anda untuk bermain. Bagian pembelajaran aktif ini akan membuat Anda siap dengan latihan penyematan sederhana. Anda diberi tag

<img src="images/dinosaur.jpg" alt="Dinosaur" />

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Sebelumnya kami mengatakan untuk tidak pernah melakukan hotlink ke gambar di server lain, tetapi ini hanya untuk tujuan pembelajaran, jadi kami akan melepaskan Anda kali ini

Kami juga ingin Anda melakukannya

• Tambahkan beberapa teks alternatif, dan periksa apakah itu berfungsi dengan salah mengeja URL gambar
• Tetapkan gambar yang benar

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />
  

  6 dan

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />
  

  7 (petunjuk. lebarnya 200px dan tinggi 171px), lalu bereksperimenlah dengan nilai lain untuk melihat efeknya
• Tetapkan

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />
  

  _8 pada gambar

Jika Anda melakukan kesalahan, Anda selalu dapat mengatur ulang menggunakan tombol Reset. Jika Anda benar-benar buntu, tekan tombol Tampilkan solusi untuk melihat jawaban

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
<img>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
const output = document.querySelector('.output');
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">';
let solutionEntry = htmlSolution;

reset.addEventListener('click', () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', () => {
  if (solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Berbicara tentang teks, ada beberapa cara untuk menambahkan teks agar sesuai dengan gambar Anda. Misalnya, tidak akan ada yang menghentikan Anda melakukan ini

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Ini bagus. Ini berisi konten yang Anda butuhkan, dan ditata dengan baik menggunakan CSS. Tapi ada masalah di sini. tidak ada yang secara semantik menautkan gambar ke keterangannya, yang dapat menyebabkan masalah bagi pembaca layar. Misalnya, jika Anda memiliki 50 gambar dan keterangan, keterangan mana yang sesuai dengan gambar yang mana?

Solusi yang lebih baik, adalah dengan menggunakan elemen HTML

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Elemen

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Catatan. Dari sudut pandang aksesibilitas, keterangan dan teks memiliki peran yang berbeda. Teks bermanfaat bahkan bagi orang yang dapat melihat gambar, sedangkan teks menyediakan fungsi yang sama dengan gambar yang tidak ada. Oleh karena itu, keterangan dan teks

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Sosok tidak harus berupa gambar. Ini adalah unit konten independen yang

• Ungkapkan maksud Anda dengan cara yang ringkas dan mudah dipahami
• Bisa masuk ke beberapa tempat di aliran linier halaman
• Memberikan informasi penting yang mendukung teks utama

Angka dapat berupa beberapa gambar, cuplikan kode, audio, video, persamaan, tabel, atau yang lainnya

Di bagian pembelajaran aktif ini, kami ingin Anda mengambil kode yang sudah selesai dari bagian pembelajaran aktif sebelumnya, dan mengubahnya menjadi angka

1. Bungkus dalam elemen

   <img src="images/dinosaur.jpg" alt="Dinosaur" />
   

   _7
2. Salin teks dari atribut

   <img
     src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
     width="400"
     height="341" />
   

   _8, hapus atribut

   <img
     src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
     width="400"
     height="341" />
   

   8, dan letakkan teks di dalam elemen

   <img
     src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum" />
   

   5 di bawah gambar

Jika Anda melakukan kesalahan, Anda selalu dapat mengatur ulang menggunakan tombol Reset. Jika Anda benar-benar buntu, tekan tombol Tampilkan solusi untuk melihat jawaban

<img src="images/dinosaur.jpg" alt="Dinosaur" />

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Anda juga dapat menggunakan CSS untuk menyematkan gambar ke dalam halaman web (dan JavaScript, tapi itu cerita lain sepenuhnya). Properti

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Gambar tersemat yang dihasilkan bisa dibilang lebih mudah diposisikan dan dikontrol daripada gambar HTML. Jadi mengapa repot-repot dengan gambar HTML? . Jika Anda hanya ingin menambahkan sesuatu yang cantik ke halaman Anda untuk menyempurnakan visual, ini bagus. Padahal, gambar seperti itu tidak memiliki makna semantik sama sekali. Mereka tidak dapat memiliki padanan teks apa pun, tidak terlihat oleh pembaca layar, dan sebagainya. Di sinilah gambar HTML bersinar

Menyimpulkan. jika sebuah gambar memiliki arti, dalam hal konten Anda, Anda harus menggunakan gambar HTML. Jika sebuah gambar murni hiasan, Anda harus menggunakan gambar latar CSS

Catatan. Anda akan belajar lebih banyak tentang gambar latar belakang CSS dalam topik CSS kami

Anda telah mencapai bagian akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? . gambar HTML

Itu saja untuk saat ini. Kami telah membahas gambar dan keterangan secara rinci. Di artikel berikutnya, kita akan meningkatkannya, melihat cara menggunakan HTML untuk menyematkan konten video dan audio di halaman web

Apakah gambar PNG berfungsi dalam HTML?

Bagaimana cara menampilkan gambar PNG dalam HTML?

Ringkasan Bab .

Use the HTML element to define an image..

Gunakan atribut src HTML untuk menentukan URL gambar

Gunakan atribut alt HTML untuk menentukan teks alternatif untuk gambar, jika tidak dapat ditampilkan

Mengapa gambar saya tidak berfungsi di HTML?

Mengapa gambar PNG saya tidak berfungsi?