ควรใช้ IMG กับ CSS กับภาพพื้นหลังเมื่อใด

ในสถานการณ์ใดจะเหมาะสมกว่าที่จะใช้IMGแท็กHTML เพื่อแสดงรูปภาพซึ่งตรงข้ามกับ CSS background-imageและในทางกลับกัน

ปัจจัยอาจรวมถึงการเข้าถึงการสนับสนุนเบราว์เซอร์เนื้อหาแบบไดนามิกหรือข้อ จำกัด ทางเทคนิคหรือหลักการใช้งานใด ๆ

การใช้ IMG อย่างเหมาะสม

1. ใช้IMGหากคุณต้องการให้คนอื่นพิมพ์หน้าของคุณและคุณต้องการให้ภาพนั้นถูกรวมไว้โดยค่าเริ่มต้น - JayTee
2. ใช้IMG(มีaltข้อความ) เมื่อภาพมีความหมายที่สำคัญเช่นไอคอนเตือน สิ่งนี้ทำให้มั่นใจได้ว่าความหมายของภาพสามารถสื่อสารได้ในตัวแทนผู้ใช้ทั้งหมดรวมถึงโปรแกรมอ่านหน้าจอ

การใช้งานในทางปฏิบัติของ IMG

1. ใช้IMGคุณลักษณะ plus alt หากรูปภาพเป็นส่วนหนึ่งของเนื้อหาเช่นโลโก้หรือไดอะแกรมหรือบุคคล (บุคคลจริงไม่ใช่ภาพบุคคล) - sanchothefat
2. ใช้IMGหากคุณใช้การขยายขนาดของเบราว์เซอร์เพื่อแสดงภาพตามสัดส่วนข้อความ
3. ใช้IMG สำหรับภาพซ้อนทับหลายใน IE6
4. ใช้IMGกับz-indexเพื่อยืดภาพพื้นหลังเพื่อเติมเต็มทั้งหน้าต่าง
   หมายเหตุสิ่งนี้ไม่เป็นความจริงอีกต่อไปด้วยพื้นหลังขนาด CSS3 ดู # 6 ด้านล่าง
5. การใช้imgแทนที่จะbackground-imageสามารถปรับปรุงประสิทธิภาพของภาพเคลื่อนไหวบนพื้นหลังได้อย่างมาก

ควรใช้ภาพพื้นหลัง CSS เมื่อใด

1. ภาพพื้นหลังใช้ CSS หากภาพไม่ได้เป็นส่วนหนึ่งของเนื้อหา - sanchothefat
2. ใช้ภาพพื้นหลัง CSS เมื่อทำการเปลี่ยนรูปภาพของข้อความเช่น ย่อหน้า / หัว - sanchothefat
3. ใช้background-imageหากคุณต้องการให้คนอื่นพิมพ์หน้าของคุณและคุณไม่ต้องการให้มีการรวมรูปภาพโดยค่าเริ่มต้น - JayTee
4. ใช้background-imageถ้าคุณต้องการที่จะปรับปรุงเวลาในการดาวน์โหลดเช่นเดียวกับสไปรท์ CSS
5. ใช้background-imageหากคุณต้องการให้มองเห็นเพียงบางส่วนเช่นเดียวกับ CSS sprites
6. ใช้background-imageกับbackground-size:coverเพื่อยืดภาพพื้นหลังเพื่อเติมหน้าต่างทั้งหมด

มันเป็นการตัดสินใจขาวดำของฉัน หากรูปภาพเป็นส่วนหนึ่งของเนื้อหาเช่นโลโก้หรือไดอะแกรมหรือบุคคล (บุคคลจริงไม่ใช่บุคคลภาพถ่ายหุ้น) จากนั้นใช้<img />แท็กพร้อมกับแอตทริบิวต์ alt สำหรับทุกอย่างอื่นมีภาพพื้นหลัง CSS

เวลาอื่นที่จะใช้ภาพพื้นหลัง CSS คือเมื่อทำการแทนที่รูปภาพของข้อความ ย่อหน้า / หัว

ฉันประหลาดใจไม่มีใครกล่าวถึงนี้ยัง: เปลี่ยน CSS

คุณสามารถเปลี่ยนdivภาพพื้นหลังของ:

#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);
}

นี้ช่วยประหยัดชนิดของ JavaScript หรือ jQuery การเคลื่อนไหวใด ๆ ที่จะจางหาย's<img/>src

ข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนในMDN

คำตอบข้างต้นพิจารณาเฉพาะด้านการออกแบบ ฉันกำลังแสดงรายการไว้ใน SEO

ควรใช้เมื่อไร <img />

1. เมื่อรูปภาพของคุณต้องได้รับการจัดทำดัชนีโดยเครื่องมือค้นหา
2. ถ้ามันมีความสัมพันธ์กับเนื้อหาที่จะไม่ออกแบบ
3. หากภาพของคุณไม่เล็กเกินไป (ไม่ใช่ภาพที่เป็นสัญลักษณ์)
4. รูปภาพที่คุณสามารถเพิ่มaltและtitleแอตทริบิวต์
5. รูปภาพจากเว็บเพจที่คุณต้องการพิมพ์โดยใช้สื่อสิ่งพิมพ์ css

ควรใช้ CSS เมื่อใด background-image

1. รูปภาพที่ใช้เพื่อการออกแบบอย่างหมดจด
2. ไม่มีความเกี่ยวข้องกับเนื้อหา
3. รูปภาพขนาดเล็กซึ่งเราสามารถเล่นกับ CSS3
4. ทำซ้ำรูปภาพ (ในไอคอนผู้เขียนบล็อก, ไอคอนวันที่จะถูกทำซ้ำสำหรับแต่ละบทความ ฯลฯ )

ฉันจะใช้มันตามเหตุผลเหล่านี้ นี่เป็นแนวทางปฏิบัติที่ดีของการเพิ่มประสิทธิภาพกลไกค้นหารูปภาพ

เบราว์เซอร์ไม่ได้ตั้งค่าให้พิมพ์ภาพพื้นหลังเสมอไป หากคุณต้องการให้คนอื่นพิมพ์หน้าของคุณ :)

หากคุณมี CSS ในไฟล์ภายนอกก็มักจะสะดวกในการแสดงภาพที่ใช้บ่อยในเว็บไซต์ (เช่นภาพส่วนหัว) เป็นภาพพื้นหลังเพราะคุณมีความยืดหยุ่นในการเปลี่ยนภาพในภายหลัง

ตัวอย่างเช่นสมมติว่าคุณมี HTML ดังต่อไปนี้:

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

... และ CSS:

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

ไม่กี่วันต่อมาคุณเปลี่ยนตำแหน่งของภาพ สิ่งที่คุณต้องทำคืออัปเดต CSS:

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

มิฉะนั้นคุณต้องอัปเดตsrcแอตทริบิวต์ของ<img>แท็กที่เหมาะสมในไฟล์ HTML ทุกไฟล์ (สมมติว่าคุณไม่ได้ใช้ภาษาสคริปต์ฝั่งเซิร์ฟเวอร์หรือCMSเพื่อทำให้กระบวนการทำงานโดยอัตโนมัติ)

ภาพพื้นหลังก็มีประโยชน์เช่นกันหากคุณไม่ต้องการให้ผู้ใช้สามารถบันทึกภาพได้ (แม้ว่าฉันไม่จำเป็นต้องทำเช่นนี้)

ประมาณเดียวกับคำตอบของ sanchothefatแต่จากแง่มุมที่ต่างออกไป ฉันมักจะถามตัวเอง: ถ้าฉันสมบูรณ์จะลบสไตล์ชีตจากเว็บไซต์ทำองค์ประกอบที่เหลือเพียงเป็นของเนื้อหาหรือไม่ ถ้าเป็นเช่นนั้นฉันทำงานได้ดี

คำตอบบางคำอธิบายสถานการณ์ที่นี่ซับซ้อนเกินไป นี่เป็นสถานการณ์ง่าย ๆ ที่ตายแล้ว

เพียงตอบคำถามนี้ทุกครั้งที่คุณต้องการวางภาพ:

เป็นส่วนหนึ่งของเนื้อหาหรือส่วนหนึ่งของการออกแบบนี้หรือไม่?

หากคุณไม่สามารถตอบคำถามนี้ได้คุณอาจไม่รู้ว่าคุณกำลังทำอะไรอยู่หรือต้องการทำอะไร!

นอกจากนี้อย่าพิจารณาข้างเทคนิคทั้งสองเพียงเพราะคุณต้องการที่จะ "เป็นมิตรกับเครื่องพิมพ์" หรือไม่ อย่าซ่อนเนื้อหาจากมุมมอง SEO ด้วย CSS หากคุณพบว่าตัวเองจัดการเนื้อหาของคุณในไฟล์ CSS คุณยิงตัวเองเข้าที่ นี่เป็นเพียงการตัดสินใจเล็กน้อยของเนื้อหาหรือไม่ ควรละเว้นทุกด้านอื่น ๆ

ฉันจะเพิ่มอีกสองข้อโต้แย้ง:

• imgแท็กเป็นสิ่งที่ดีถ้าคุณจำเป็นต้องปรับขนาดภาพ เช่นถ้าภาพต้นฉบับเป็น 100px คูณ 100 px และคุณต้องการให้เป็น 80px โดย 80px คุณสามารถตั้งค่าความกว้างและความสูง CSS ของแท็ก img ฉันไม่รู้วิธีที่ดีในการทำสิ่งนี้โดยใช้ภาพพื้นหลัง แก้ไข: ตอนนี้สามารถทำได้ด้วยภาพพื้นหลังโดยใช้background-sizeแอตทริบิวต์ CSS3

• การใช้ภาพพื้นหลังเป็นสิ่งที่ดีเมื่อคุณต้องการแบบไดนามิกสลับไปมาระหว่างสไปรท์ เช่นถ้าคุณมีรูปปุ่มและคุณต้องการให้ภาพที่แยกต่างหากแสดงเมื่อเคอร์เซอร์วางตัวอยู่เหนือองค์ประกอบคุณสามารถใช้ภาพพื้นหลังที่มีทั้งสไปรต์ปกติและโฮเวอร์และเปลี่ยนตำแหน่งพื้นหลังแบบไดนามิก

ประโยชน์อีกประการหนึ่งจากการใช้แท็ก <IMG> เกี่ยวข้องกับ SEO - นั่นคือคุณสามารถให้ข้อมูลเพิ่มเติมเกี่ยวกับรูปภาพในแอตทริบิวต์ ALT ของแท็กรูปภาพในขณะที่ไม่มีวิธีให้ข้อมูลดังกล่าวเมื่อระบุรูปภาพผ่าน CSS และในนั้น กรณีเฉพาะชื่อไฟล์ภาพอาจถูกจัดทำดัชนีโดยเครื่องมือค้นหา แอตทริบิวต์ ALT ให้ประโยชน์จากแท็ก SEO <IMG> มากกว่าวิธีการ CSS นั่นเป็นเหตุผลที่ตามฉันมันจะดีกว่าที่จะระบุภาพที่คุณต้องการอันดับที่ดีในผลการค้นหาภาพ (เช่น Google ค้นหารูปภาพ) โดยใช้แท็ก <IMG>

เบื้องหน้า = img

พื้นหลัง = พื้นหลัง CSS

ใช้ภาพพื้นหลังเฉพาะเมื่อจำเป็นเช่นภาชนะที่มีภาพที่เรียงต่อกัน

หนึ่งในข้อดีที่สำคัญโดยใช้ภาพคือว่ามันเป็นที่ดีกว่าสำหรับ SEO

เมื่อใช้ภาพพื้นหลังคุณจำเป็นต้องระบุขนาดอย่างแน่นอน นี่อาจเป็นปัญหาสำคัญหากคุณไม่ทราบล่วงหน้าล่วงหน้าหรือไม่สามารถระบุได้

ปัญหาใหญ่กับการ<img />ซ้อนทับ ถ้าฉันต้องการเงาภายในของ CSS บนภาพของฉัน ( box-shadow:inset 0 0 5px rgb(0,0,0,.5)) ในกรณีนี้เนื่องจาก<img />ไม่มีองค์ประกอบลูกคุณต้องใช้การวางตำแหน่งและเพิ่มองค์ประกอบว่างซึ่งเท่ากับมาร์กอัปที่ไม่มีประโยชน์

สรุปแล้วมันค่อนข้างเป็นสถานการณ์

สองสถานการณ์อื่น ๆ ที่background-imageควรใช้:

• เมื่อคุณต้องการเปลี่ยนภาพเมื่อวางเมาส์ไว้
• เมื่อคุณต้องการเพิ่มมุมโค้งมนให้กับภาพ หากคุณใช้imgรูปภาพจะหลุดออกจากมุมมน

ใช้ CSS ภาพพื้นหลังในกรณีที่มีหลายสกินหรือรุ่นของการออกแบบ จาวาสคริปต์สามารถใช้ในการเปลี่ยนคลาสขององค์ประกอบแบบไดนามิกซึ่งจะบังคับให้แสดงภาพที่แตกต่าง ด้วยแท็ก IMG อาจเป็นเรื่องยุ่งยากมากขึ้น

นี่คือข้อพิจารณาทางเทคนิค: ภาพจะถูกสร้างขึ้นแบบไดนามิกหรือไม่? มันมีแนวโน้มที่จะสร้าง<img>แท็กใน HTML ได้ง่ายกว่าการพยายามแก้ไขคุณสมบัติ CSS แบบไดนามิก

ขนาดของภาพเป็นอย่างไร? ถ้าฉันใช้แท็ก img เบราว์เซอร์จะปรับขนาดภาพ ถ้าฉันใช้ css background เบราว์เซอร์ก็จะตัดอันจากภาพขนาดใหญ่

ในส่วนที่เกี่ยวกับการสร้างภาพเคลื่อนไหวโดยใช้ CSS TranslateX / Y (วิธีที่เหมาะสมในการสร้างภาพเคลื่อนไหว html) - หากคุณทำการบันทึก Chrome Timeline ของภาพพื้นหลัง CSS เป็นภาพเคลื่อนไหวและแท็ก IMG ที่เคลื่อนไหวคุณจะเห็นว่า พื้นหลังภาพ

มีอีกเหตุผล! หากคุณมีการออกแบบที่ตอบสนองและต้องการแยกการใช้รูปภาพระดับต่ำปานกลางและสูงสำหรับอุปกรณ์ผ่านการสืบค้นสื่อคุณควรใช้พื้นหลังเช่นกัน

นอกจากนี้ฉันยังมีส่วนแกลเลอรี่ที่มีขนาดภาพที่ไม่สอดคล้องกันดังนั้นแม้ว่าภาพเหล่านั้นจะถือว่าเป็นเนื้อหาที่เห็นได้ชัดฉันใช้ภาพพื้นหลังและจัดให้อยู่ใน divs ด้วยขนาดที่กำหนดไว้ นี่คล้ายกับสิ่งที่ facebook ทำในอัลบั้มของพวกเขา ..

imgเป็นแท็ก html ด้วยเหตุผลดังนั้นควรใช้ สำหรับการอ้างอิงหรือแสดงสิ่งต่าง ๆ ผู้คนเช่น: ในบทความ

นอกจากนี้หากภาพที่มีความหมายหรือจะต้องมีการคลิกได้imgดีกว่าพื้นหลัง CSS สำหรับสถานการณ์อื่น ๆ ฉันคิดว่าสามารถใช้พื้นหลัง cssได้

ถึงแม้ว่ามันจะเป็นเรื่องที่จะต้องมีการหารือกันซ้ำแล้วซ้ำอีก

เว็บนักศึกษาจาก Paris, France

เล็ก ๆ น้อย ๆ ที่จะเพิ่มคุณควรใช้แท็ก img หากคุณต้องการให้ผู้ใช้สามารถ 'คลิกขวา' และ 'บันทึกภาพ' / 'บันทึกภาพ' ดังนั้นหากคุณต้องการให้ภาพเป็นทรัพยากรสำหรับ คนอื่น ๆ

การใช้ภาพพื้นหลังจะ (เท่าที่ฉันทราบบนเบราว์เซอร์ส่วนใหญ่) ปิดใช้งานตัวเลือกเพื่อบันทึกภาพโดยตรง

อินพุตขนาดเล็กฉันมีปัญหาเกี่ยวกับภาพที่ตอบสนองทำให้การเรนเดอร์บน iphone ช้าลงถึงหนึ่งนาทีแม้จะเป็นภาพขนาดเล็ก:

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

แต่เมื่อเปลี่ยนไปใช้ภาพพื้นหลังปัญหาที่หายไปนี้จะทำงานได้ก็ต่อเมื่อกำหนดเป้าหมายเบราว์เซอร์ใหม่

IMGโหลดครั้งแรกเพราะsrcอยู่ในไฟล์ html ตัวเองในขณะที่ในกรณีของbackground-imageแหล่งที่มากล่าวถึงในสไตล์ชีตดังนั้นภาพโหลดหลังจากโหลดสไตล์ชีทล่าช้าการโหลดของหน้าเว็บ

HTML สำหรับเนื้อหาและ CSS สำหรับการออกแบบ ภาพจำเป็นหรือไม่และต้องมีการหยิบขึ้นมาโดยโปรแกรมอ่านหน้าจอ? หากคำตอบคือใช่ให้ใส่ภาพใน HTML หากเป็นการออกแบบสไตล์คุณสามารถใช้คุณสมบัติภาพพื้นหลังใน CSS เพื่อฉีดภาพได้ เช่นเดียวกับที่ผู้คนจำนวนมากที่นี่พูดถึงไปแล้วคุณสามารถใช้องค์ประกอบหลอกในภาพได้หากคุณต้องการ

นอกจากนี้โปรดทราบว่าสไปเดอร์ของเครื่องมือค้นหาส่วนใหญ่จะไม่สร้างดัชนีรูปภาพพื้นหลัง CSS ดังนั้นภาพพื้นหลังจะถูกละเว้นและคุณจะไม่สามารถรับปริมาณการเข้าชมจากเครื่องมือค้นหา (ไม่มีประโยชน์ SEO ในระยะสั้น)

โดยที่ภาพทั้งหมดที่กำหนดด้วยแท็กจะได้รับการจัดทำดัชนี (ยกเว้นการยกเว้นด้วยตนเอง) และสามารถนำปริมาณการเข้าชมจากเครื่องมือค้นหาหากชื่อ / แอตทริบิวต์ alt และชื่อไฟล์ของพวกเขาได้รับการปรับให้เหมาะสมอย่างเหมาะสม

คุณสามารถใช้แท็ก IMG หากคุณต้องการให้ภาพเป็นของเหลวและขนาดตามขนาดหน้าจอที่แตกต่างกัน สำหรับฉันรูปภาพเหล่านี้ส่วนใหญ่เป็นเนื้อหา สำหรับองค์ประกอบส่วนใหญ่ที่ไม่ได้เป็นส่วนหนึ่งของเนื้อหาฉันใช้สไปรต์ CSS เพื่อทำให้ขนาดการดาวน์โหลดน้อยที่สุดเว้นแต่ฉันจะต้องการไอคอนแอนนิเมชั่น ฯลฯ

ฉันใช้ภาพแทนภาพพื้นหลังเมื่อฉันต้องการทำให้ยืดหยุ่นได้ 100% ซึ่งรองรับในเบราว์เซอร์ส่วนใหญ่

หากคุณต้องการเพิ่มภาพสำหรับเนื้อหาพิเศษในหน้าหรือสำหรับหน้าเดียวคุณควรใช้แท็ก IMG และหากคุณต้องการใส่ภาพมากกว่าหนึ่งหน้าคุณควรใช้ภาพพื้นหลัง CSS

Another background-image PRO: ภาพพื้นหลังสำหรับ<ul>/ <ol>รายการ

ใช้ภาพพื้นหลังหากเป็นส่วนหนึ่งของการออกแบบโดยรวมและทำซ้ำในหลาย ๆ หน้า โดยเฉพาะอย่างยิ่งในรูปแบบเทพดาพื้นหลังสำหรับการเพิ่มประสิทธิภาพ

ใช้แท็กสำหรับรูปภาพทั้งหมดที่ไม่ได้เป็นส่วนหนึ่งของการออกแบบโดยรวมและมีแนวโน้มว่าจะวางเพียงครั้งเดียวเช่นรูปภาพเฉพาะสำหรับบทความบุคคลและรูปภาพสำคัญที่ควรเพิ่มไว้ในรูปภาพ Google

** ภาพซ้ำ ๆ ที่ฉันใส่ไว้ใน<img>แท็กคือโลโก้ของไซต์ / บริษัท เพราะคนมักจะคลิกเพื่อไปที่หน้าแรกดังนั้นคุณจึงห่อด้วย<a>แท็ก