Kapan menggunakan IMG vs. CSS background-image?

Dalam situasi apa lebih tepat menggunakan IMGtag HTML untuk menampilkan gambar, sebagai lawan dari CSS background-image, dan sebaliknya?

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

Penggunaan IMG dengan benar

1. Gunakan IMGjika Anda ingin orang mencetak halaman Anda dan Anda ingin gambar dimasukkan secara default. - JayTee
2. Gunakan IMG(dengan altteks) saat 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 secara pragmatis

1. Gunakan IMGatribut alt plus jika gambar tersebut merupakan bagian dari konten seperti logo atau diagram atau orang (orang sungguhan, bukan stok foto orang). - sanchothefat
2. Gunakan IMGjika Anda mengandalkan penskalaan browser untuk membuat gambar sesuai dengan ukuran teks.
3. Gunakan IMG untuk beberapa gambar overlay di IE6 .
4. Gunakan IMGdengan z-indexuntuk meregangkan gambar latar untuk mengisi seluruh jendelanya.
   Catatan, ini tidak lagi benar dengan ukuran latar belakang CSS3; lihat # 6 di bawah ini.
5. Menggunakan imgalih-alih background-imagedapat secara dramatis meningkatkan kinerja animasi di atas latar belakang.

Kapan menggunakan CSS background-image

1. Gunakan gambar latar belakang CSS jika gambar tersebut bukan bagian dari konten . - sanchothefat
2. Gunakan gambar latar belakang CSS saat melakukan penggantian gambar misalnya teks . paragraf / tajuk. - sanchothefat
3. Gunakan background-imagejika Anda ingin orang-orang mencetak halaman Anda dan Anda tidak ingin gambar dimasukkan secara default. - JayTee
4. Gunakan background-imagejika Anda perlu meningkatkan waktu unduhan, seperti halnya dengan sprite CSS .
5. Gunakan background-imagejika Anda hanya perlu sebagian gambar agar terlihat, seperti dengan sprite CSS.
6. Gunakan background-imagedengan background-size:coveruntuk meregangkan gambar latar belakang untuk mengisi seluruh jendelanya.

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

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

Saya terkejut belum ada yang menyebutkan ini: transisi CSS .

Anda dapat memindahkan divgambar latar belakang a secara asli:

#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 menghemat segala jenis JavaScript atau jQuery animasi memudar sebuah <img/>'s src.

Informasi lebih lanjut tentang transisi di MDN .

Jawaban di atas hanya mempertimbangkan aspek Desain. Saya mencantumkannya dalam aspek SEO.

Kapan harus digunakan <img />

1. Ketika Gambar Anda perlu diindeks oleh mesin pencari
2. Jika itu ada kaitannya dengan konten, jangan merancang.
3. Jika gambar Anda tidak terlalu kecil (bukan gambar ikonik).
4. Gambar tempat Anda dapat menambahkan altdan titleatribut.
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. Gambar Berulang (Dalam ikon penulis blog, ikon tanggal akan diulang untuk setiap artikel dll,).

Karena saya akan menggunakannya berdasarkan alasan ini. Ini adalah praktik yang baik dari Optimasi Mesin Pencari Gambar.

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

Jika Anda memiliki CSS di file eksternal, maka sering kali nyaman untuk menampilkan gambar yang sering digunakan di seluruh situs (seperti gambar header) sebagai gambar latar belakang, karena 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 adalah memperbarui CSS:

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

Jika tidak, Anda harus memperbarui srcatribut <img>tag yang sesuai 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 dapat menyimpan gambar (meskipun saya tidak perlu melakukan ini).

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, apakah elemen yang tersisa hanya milik konten? Jika demikian, saya melakukan pekerjaan saya dengan baik.

Beberapa jawaban memperumit skenario di sini. Ini adalah situasi sederhana yang mati.

Jawab saja pertanyaan ini setiap kali Anda ingin menempatkan gambar:

Apakah ini bagian dari konten atau bagian dari desain?

Jika Anda tidak dapat menjawab ini, Anda mungkin tidak tahu apa yang Anda lakukan atau apa yang ingin Anda lakukan!

Juga, JANGAN mempertimbangkan di samping kedua teknik ini, hanya karena Anda ingin menjadi "ramah printer" atau tidak. JANGAN sembunyikan konten dari sudut pandang SEO dengan CSS. Jika Anda menemukan diri Anda mengelola konten Anda dalam file CSS, Anda menembak diri sendiri. Ini hanya keputusan sepele tentang apa itu konten atau tidak. Setiap aspek lainnya harus diabaikan.

Saya akan menambahkan dua argumen lain:

• Sebuah img tag baik jika Anda perlu untuk mengubah ukuran gambar. Misalnya, jika gambar aslinya 100px x 100 px, dan Anda menginginkannya 80px x 80px, Anda dapat mengatur lebar dan tinggi CSS dari tag img. Saya tidak tahu cara yang baik untuk melakukan ini menggunakan gambar latar belakang. EDIT: Ini sekarang dapat juga dilakukan dengan gambar latar belakang, menggunakan background-sizeatribut CSS3.

• Menggunakan gambar latar belakang adalah baik ketika Anda harus secara dinamis beralih di antara sprite . Misalnya jika Anda memiliki gambar tombol, dan Anda ingin gambar yang terpisah ditampilkan ketika kursor melayang di atas elemen, Anda dapat menggunakan gambar latar belakang yang berisi sprite normal dan hover, dan secara dinamis mengubah posisi latar belakang.

Satu lagi manfaat dari menggunakan tag <IMG> terkait dengan SEO - yaitu Anda dapat memberikan informasi tambahan tentang gambar dalam atribut ALT dari tag gambar, sementara tidak ada cara untuk memberikan informasi seperti itu ketika menentukan gambar melalui CSS dan dalam hal itu hanya kasus nama file gambar dapat diindeks oleh mesin pencari. Atribut ALT pasti memberikan keunggulan SEO tag <IMG> atas pendekatan CSS. Karena itu menurut saya lebih baik untuk menentukan gambar yang ingin Anda rangking dengan baik dalam hasil pencarian gambar (mis. Google Image Search) menggunakan tag <IMG>.

Foreground = img.

Background = latar belakang CSS.

Gunakan gambar latar hanya jika diperlukan misalnya wadah dengan gambar yang ubin.

Salah satu PROS utama dengan menggunakan GAMBAR adalah lebih baik untuk SEO .

Menggunakan gambar latar belakang, Anda perlu menentukan dimensi secara mutlak. Ini bisa menjadi masalah yang signifikan jika Anda tidak benar-benar mengenal mereka sebelumnya atau tidak dapat menentukannya.

Masalah besar dengan <img />overlay. Bagaimana jika saya ingin bayangan bagian dalam CSS pada gambar saya ( box-shadow:inset 0 0 5px rgb(0,0,0,.5))? Dalam hal ini, karena <img />tidak dapat memiliki elemen anak, Anda perlu menggunakan penentuan posisi dan menambahkan elemen kosong yang sama dengan markup yang tidak berguna.

Kesimpulannya, ini cukup situasional.

Beberapa skenario lain di mana background-imageharus digunakan:

• Ketika Anda ingin gambar berubah ketika mouse berada di atasnya.
• Saat Anda ingin menambahkan sudut bulat ke gambar. Jika Anda menggunakan img, gambar bocor keluar dari sudut membulat.

Gunakan CSS background-image untuk beberapa skin atau versi desain. Javascript dapat digunakan untuk mengubah kelas elemen secara dinamis, yang akan memaksanya untuk membuat gambar yang berbeda. Dengan tag IMG, itu mungkin lebih rumit.

Berikut ini pertimbangan teknis: apakah gambar akan dihasilkan secara dinamis? Ini cenderung jauh lebih mudah untuk menghasilkan <img>tag dalam HTML daripada mencoba mengedit properti CSS secara dinamis.

Bagaimana dengan ukuran gambar? Jika saya menggunakan tag img, browser akan menskala gambar. Jika saya menggunakan latar belakang css, browser hanya memotong sebagian dari gambar yang lebih besar.

Sehubungan dengan menganimasikan gambar menggunakan CSS TranslateX / Y (Cara yang tepat untuk menghidupkan html) - Jika Anda melakukan perekaman Chrome Timeline dari gambar latar belakang CSS yang dianimasikan vs tag IMG yang dianimasikan, Anda akan melihat waktu cat secara drastis lebih pendek untuk CSS gambar latar belakang.

Ada alasan lain! Jika Anda memiliki desain yang responsif dan ingin membagi penggunaan gambar yang rendah, sedang, dan beresolusi tinggi untuk perangkat melalui permintaan media, Anda harus menggunakan latar belakang juga.

Juga, saya memiliki bagian galeri yang memiliki ukuran gambar tidak konsisten sehingga meskipun gambar-gambar itu jelas dianggap konten, saya menggunakan gambar latar belakang dan memusatkannya dalam divs dengan ukuran yang ditetapkan. Ini mirip dengan apa yang dilakukan facebook di album mereka ..

img adalah tag html karena suatu alasan, oleh karena itu harus digunakan. Untuk referensi atau untuk mengilustrasikan sesuatu, orang misalnya: dalam artikel.

Juga jika gambar memiliki arti atau harus dapat diklik, img lebih baik daripada latar belakang css . Untuk semua situasi lain, saya pikir, latar belakang css dapat digunakan.

Meskipun, itu adalah subjek yang perlu dibahas berulang kali.

Pelajar Web dari Paris, Prancis

Hanya yang kecil untuk ditambahkan, Anda harus menggunakan tag img jika Anda ingin pengguna dapat 'klik kanan' dan 'save-image' / 'save-picture', jadi jika Anda ingin memberikan gambar sebagai sumber daya untuk lainnya.

Menggunakan gambar latar belakang akan (sejauh yang saya ketahui di sebagian besar browser) menonaktifkan opsi untuk menyimpan gambar secara langsung.

Masukan kecil, saya punya masalah dengan gambar responsif memperlambat rendering pada iphone hingga satu menit, bahkan dengan gambar kecil:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

Tetapi ketika beralih menggunakan gambar latar belakang masalahnya hilang, ini hanya layak jika menargetkan browser yang lebih baru.

IMGmemuat pertama karena srcada dalam file html itu sendiri sedangkan dalam kasus background-imagesumber disebutkan dalam stylesheet sehingga gambar dimuat setelah stylesheet dimuat, menunda pemuatan halaman web.

HTML untuk konten dan CSS untuk desain. Apakah gambar perlu dan perlu diambil oleh pembaca layar? Jika jawabannya ya, maka letakkan gambar dalam HTML. Jika ini murni untuk penataan, maka Anda dapat menggunakan properti gambar latar di CSS untuk menyuntikkan gambar. Sama seperti banyak orang di sini telah disebutkan, Anda kemudian dapat menggunakan elemen pseudo pada gambar jika Anda mau.

Perhatikan juga bahwa kebanyakan spider mesin pencari tidak mengindeks gambar latar belakang CSS karena itu gambar latar belakang akan diabaikan dan Anda tidak akan dapat memperoleh lalu lintas dari mesin pencari (singkatnya tidak ada manfaat SEO).

Sedangkan semua gambar yang didefinisikan dengan tag diindeks (kecuali dikecualikan secara manual) dan dapat mendatangkan traffic dari mesin pencari jika atribut judul / alt dan nama file dioptimalkan dengan benar (wrt some keyword).

Anda dapat menggunakan tag IMG jika Anda ingin gambar menjadi cair dan skala ke ukuran layar yang berbeda. Bagi saya gambar-gambar ini sebagian besar merupakan bagian dari konten. Untuk sebagian besar elemen yang bukan bagian dari konten, saya menggunakan sprite CSS untuk menjaga ukuran unduhan minimal kecuali saya benar-benar ingin menghidupkan ikon dll.

Saya menggunakan gambar daripada gambar latar ketika saya ingin membuatnya 100% dapat diregangkan yang didukung di sebagian besar browser.

Jika Anda ingin menambahkan gambar hanya untuk konten khusus pada halaman atau hanya satu halaman, Anda harus menggunakan tag IMG dan jika Anda ingin menempatkan gambar pada lebih dari satu halaman maka Anda harus menggunakan CSS Background Image.

PRO latar belakang-gambar lain: Gambar latar belakang untuk <ul>/ <ol>daftar.

Gunakan gambar latar belakang jika mereka adalah bagian dari keseluruhan desain dan diulangi pada beberapa halaman. Lebih disukai dalam bentuk sprite latar belakang untuk optimasi.

Gunakan tag untuk semua gambar yang bukan bagian dari keseluruhan desain, dan kemungkinan besar ditempatkan sekali, seperti gambar khusus untuk artikel, orang, dan gambar penting yang layak ditambahkan ke gambar google.

** Satu-satunya gambar berulang yang saya sertakan dalam <img>tag adalah logo situs / perusahaan. Karena orang cenderung mengekliknya untuk membuka beranda, jadi Anda membungkusnya dengan <a>tag.