Pertanyaan Kapan menggunakan IMG vs. CSS background-image?


Dalam situasi apa itu lebih tepat untuk menggunakan HTML IMG tag untuk menampilkan gambar, dibandingkan dengan CSS background-image, dan sebaliknya?

Faktor-faktor dapat mencakup aksesibilitas, dukungan browser, konten dinamis, atau segala jenis batasan teknis atau prinsip-prinsip kegunaan.


780
2017-09-23 23:58


asal


Jawaban:


Penggunaan IMG yang tepat

  1. Menggunakan IMG jika kamu ingin memilikinya orang-orang cetak halaman Anda dan Anda ingin gambar disertakan secara default. -JayTee
  2. Menggunakan IMG (dengan alt teks) ketika gambar memiliki makna semantik yang penting, seperti ikon peringatan. Ini memastikan bahwa makna gambar dapat dikomunikasikan di semua agen pengguna, termasuk pembaca layar.

Penggunaan IMG pragmatis

  1. Menggunakan IMG ditambah atribut alt jika gambar aku s bagian dari konten seperti logo atau diagram atau orang (orang asli, bukan orang foto stok). -sanchothefat
  2. Menggunakan IMG jika Anda mengandalkan skala browser untuk membuat gambar dalam proporsi ukuran teks.
  3. Menggunakan IMG  untuk beberapa gambar overlay di IE6.
  4. Menggunakan IMG dengan z-index dalam urutan untuk peregangan gambar latar belakang untuk mengisi seluruh jendelanya.
    Perhatikan, ini tidak lagi berlaku dengan ukuran latar belakang CSS3; lihat # 6 di bawah ini.
  5. Menggunakan img dari pada background-image dapat secara dramatis meningkatkan kinerja animasi di latar belakang.

Kapan menggunakan gambar latar belakang CSS

  1. Gunakan gambar latar belakang CSS jika gambar bukan bagian dari konten. -sanchothefat
  2. Gunakan gambar latar belakang CSS saat perbuatan pengganti gambar teks misalnya. paragraf / header. -sanchothefat
  3. Menggunakan background-image jika kamu ingin memilikinya orang-orang cetak halaman Anda dan Anda tidak ingin gambar dimasukkan secara default. -JayTee
  4. Menggunakan background-image jika Anda perlu meningkatkan waktu unduh, sebagai dengan Sprite CSS.
  5. Menggunakan background-image jika Anda membutuhkan hanya sebagian dari gambar yang akan terlihat, seperti dengan sprite CSS.
  6. Menggunakan background-image dengan background-size:cover untuk meregangkan gambar latar belakang untuk mengisi seluruh jendelanya.

671
2018-01-29 18:31



Ini keputusan hitam dan putih untukku. Jika gambar adalah bagian dari konten seperti logo atau diagram atau orang (orang asli, bukan orang foto stok) maka gunakan <img /> tag plus atribut alt. Untuk yang lainnya ada gambar latar belakang CSS.

Waktu lain untuk menggunakan gambar latar belakang CSS adalah ketika melakukan penggantian gambar teks misalnya. paragraf / header.


271
2018-01-29 18:32



Saya terkejut belum ada yang menyebut ini: Transisi CSS.

Anda dapat melakukan transisi secara native a divgambar latar belakang:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

Ini menyimpan segala jenis JavaScript atau animasi jQuery untuk memudar <img/>'s src.

Informasi lebih lanjut tentang transisi MDN.


96
2018-04-10 06:18



Jawaban di atas hanya mempertimbangkan aspek Desain. Saya daftar itu dalam aspek SEO.

Kapan digunakan <img /> 

  1. Kapan Gambar Anda harus diindeks oleh mesin pencari
  2. Jika ada kaitannya dengan konten tidak untuk desain.
  3. Jika gambar Anda tidak terlalu kecil (bukan gambar ikonik).
  4. Gambar tempat Anda dapat menambahkan alt dan title atribut.
  5. Gambar dari halaman web yang ingin Anda cetak menggunakan media cetak css

Kapan menggunakan CSS background-image

  1. Gambar Murni Digunakan untuk Desain.
  2. Tidak Ada Hubungan Dengan Konten.
  3. Gambar kecil yang bisa kita mainkan dengan CSS3.
  4. Mengulangi Gambar (Dalam ikon penulis blog, ikon tanggal akan diulang untuk setiap artikel, dll.).

Karena saya akan menggunakannya berdasarkan alasan-alasan ini. Ini adalah praktik yang baik dari Pengoptimalan Mesin Telusur Gambar.


55
2018-04-20 17:01



Browser tidak selalu diatur untuk mencetak gambar latar belakang secara default; jika Anda ingin orang mencetak halaman Anda :)


48
2018-05-22 18:03



Jika Anda memiliki CSS dalam file eksternal, maka sering kali mudah untuk menampilkan gambar yang sering digunakan di situs (seperti gambar header) sebagai gambar latar belakang, karena kemudian Anda memiliki fleksibilitas untuk mengubah gambar nanti.

Misalnya, Anda memiliki HTML berikut:

<div id="headerImage"></div>

... dan CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

Beberapa hari kemudian, Anda mengubah lokasi gambar. Yang harus Anda lakukan hanyalah memperbarui CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

Jika tidak, Anda harus memperbarui src atribut yang sesuai <img> tag di setiap file HTML (dengan asumsi Anda tidak menggunakan bahasa skrip sisi server atau CMS untuk mengotomatiskan proses).

Juga gambar latar belakang berguna jika Anda tidak ingin pengguna untuk dapat menyimpan gambar (meskipun saya tidak pernah perlu melakukan ini).


44
2018-02-13 18:29



Hampir sama dengan jawaban sanchothefat, tetapi dari aspek yang berbeda. Saya selalu bertanya pada diri sendiri: jika saya benar-benar menghapus stylesheet dari situs web, lakukan elemen yang tersisa hanya milik konten? Jika demikian, saya melakukan pekerjaan saya dengan baik.


39
2018-02-02 22:30