รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์

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

โชคดีที่ CSS ให้เครื่องมือแก่คุณในการป้องกันปัญหานี้

จํากัดรูปภาพ

ในสไตล์ชีต คุณสามารถใช้ max-inline-size เพื่อประกาศว่าจะแสดงผลรูปภาพในขนาดที่กว้างกว่าองค์ประกอบที่มีไม่ได้

การสนับสนุนเบราว์เซอร์

• 57
• 79
• 41
• 12.1

แหล่งที่มา

img {
  max-inline-size: 100%;
  block-size: auto;
}

หมายเหตุ: หากต้องการ คุณจะใช้ max-width แทน max-inline-size ก็ได้ แต่เราขอแนะนำให้คำนึงถึงเป็นนิสัยของคุณสมบัติเชิงตรรกะ

คุณสามารถใช้กฎเดียวกันนี้กับเนื้อหาที่ฝังประเภทอื่นๆ ได้เช่นกัน เช่น วิดีโอและ iframe

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

เมื่อใช้กฎนี้ เบราว์เซอร์จะลดขนาดรูปภาพให้พอดีกับหน้าจอโดยอัตโนมัติ

การจำกัดรูปภาพช่วยให้ผู้ใช้เห็นภาพทั้งหมดโดยไม่ต้องเลื่อน

การเพิ่มค่า block-size เป็น auto หมายความว่าเบราว์เซอร์จะรักษาสัดส่วนภาพของรูปภาพไว้เมื่อมีการปรับขนาด

บางครั้ง ระบบจัดการเนื้อหา (CMS) หรือระบบการส่งเนื้อหาอื่นๆ จะกำหนดขนาดของรูปภาพ หากการออกแบบของคุณต้องการสัดส่วนภาพที่ต่างจากค่าเริ่มต้นของ CMS คุณสามารถใช้พร็อพเพอร์ตี้ aspect-ratio เพื่อคงการออกแบบของเว็บไซต์ไว้ ดังนี้

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

ต้องขออภัยที่มักหมายความว่าเบราว์เซอร์จะต้องบีบหรือขยายรูปภาพ เพื่อให้พอดีกับพื้นที่ที่กำหนด

การเปลี่ยนสัดส่วนภาพทำให้รูปภาพดูเป็น แบบย่อหรือยืด

หากต้องการป้องกันการบีบและยืด ให้ใช้พร็อพเพอร์ตี้ object-fit

การสนับสนุนเบราว์เซอร์

• 32
• 79
• 36
• 10

แหล่งที่มา

ค่า object-fit contain จะบอกให้เบราว์เซอร์รักษาสัดส่วนภาพของรูปภาพไว้ โดยเว้นพื้นที่ว่างรอบๆ รูปภาพไว้หากจำเป็น

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

ค่า object-fit cover จะบอกให้เบราว์เซอร์รักษาสัดส่วนภาพของรูปภาพไว้ โดยจะครอบตัดรูปภาพหากจำเป็น

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

รูปภาพเดียวกันที่ใช้ "object-fit" ที่ต่างกัน 2 ค่า รายการที่ 1 มีค่า "object-fit" เป็น "contain" รายการที่ 2 มีค่า "object-fit" เป็น "cover"

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

การสนับสนุนเบราว์เซอร์

• 32
• 79
• 36
• 10

แหล่งที่มา

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

คุณสามารถตั้งค่า object-position ให้ครอบตัดรูปภาพเพียงด้านเดียวได้

นำส่งรูปภาพ

กฎ CSS เหล่านี้จะบอกเบราว์เซอร์ว่าคุณต้องการให้แสดงผลอย่างไร คุณยังใส่คำแนะนำใน HTML เกี่ยวกับวิธีที่เบราว์เซอร์ควรจัดการกับรูปภาพเหล่านั้นได้ด้วย

คำแนะนำสำหรับการปรับขนาด

หากคุณทราบขนาดของรูปภาพ ให้ระบุแอตทริบิวต์ width และ height เสมอ แม้ว่ารูปภาพจะแสดงผลเป็นขนาดอื่นเนื่องจากกฎ max-inline-size ของคุณ แต่เบราว์เซอร์จะยังคงทราบอัตราส่วนความกว้างต่อความสูงและสามารถกำหนดพื้นที่ที่เหมาะสมได้ วิธีนี้จะช่วยป้องกันไม่ให้เนื้อหาอื่นๆ เล่นวนไปมาเมื่อโหลดรูปภาพ

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

วิดีโอแรกแสดงเลย์เอาต์ที่ไม่มีการกำหนดขนาดรูปภาพไว้ สังเกตว่าข้อความข้ามเมื่อโหลดรูปภาพ ในวิดีโอที่ 2 ได้มีการระบุขนาดรูปภาพ ไว้ ดังนั้นเบราว์เซอร์จึงเหลือพื้นที่ให้รูปภาพและข้อความ ไม่กระตุกเมื่อโหลดรูปภาพ

คำแนะนำสำหรับการโหลด

ใช้แอตทริบิวต์ loading เพื่อบอกเบราว์เซอร์ว่าจะหน่วงเวลาการโหลดรูปภาพไว้จนกว่าจะอยู่ในหรือใกล้กับวิวพอร์ต สำหรับรูปภาพที่อยู่ครึ่งหน้าล่าง ให้ใช้ค่า lazy เบราว์เซอร์จะไม่โหลดรูปภาพแบบ Lazy Loading จนกว่าผู้ใช้จะเลื่อนลงมาไกลพอที่จะเห็นรูปภาพ หากผู้ใช้ไม่เลื่อนเลย รูปภาพก็จะไม่โหลด

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

รูปภาพที่โหลดแบบ Lazy Loading จะรอให้โหลดจนกว่าผู้ใช้จะเลื่อนลงไปยังหน้าดังกล่าว

สำหรับรูปภาพหลักในครึ่งหน้าบน อย่าใช้ loading หากเว็บไซต์ใช้แอตทริบิวต์ loading="lazy" โดยอัตโนมัติ คุณสามารถตั้งค่า loading เป็นค่าเริ่มต้น eager เพื่อป้องกันไม่ให้รูปภาพโหลดแบบ Lazy Loading ได้

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

ลำดับความสำคัญของการดึงข้อมูล

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

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

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

อย่างไรก็ตาม เมื่อคุณขอให้เบราว์เซอร์จัดลำดับความสำคัญในการดาวน์โหลดทรัพยากร 1 รายการ เช่น รูปภาพ เบราว์เซอร์จะต้องลดลำดับความสำคัญของทรัพยากรอื่น เช่น สคริปต์หรือไฟล์แบบอักษร ตั้งค่า fetchpriority="high" บนรูปภาพเฉพาะในกรณีที่มีความสำคัญจริงๆ เท่านั้น

คำแนะนำสำหรับการโหลดล่วงหน้า

ทางที่ดีที่สุดคือหลีกเลี่ยงการโหลดล่วงหน้าทุกครั้งที่ทำได้โดยใส่รูปภาพทั้งหมดไว้ในไฟล์ HTML เริ่มต้น อย่างไรก็ตาม รูปภาพบางรูปอาจใช้ไม่ได้ เช่น รูปภาพที่เพิ่มโดย JavaScript หรือภาพพื้นหลัง CSS

คุณสามารถใช้การโหลดล่วงหน้าเพื่อให้เบราว์เซอร์ดึงรูปภาพที่สำคัญเหล่านี้ล่วงหน้า สำหรับรูปภาพที่สำคัญมาก คุณอาจรวมการโหลดล่วงหน้านี้กับแอตทริบิวต์ fetchpriority ดังนี้

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

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

บางเบราว์เซอร์รองรับการโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้า ตาม srcset โดยใช้แอตทริบิวต์ imagesrcset และ imagesizes เช่น

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

การยกเว้น href สำรองจะทำให้มั่นใจได้ว่าเบราว์เซอร์ที่ไม่รองรับ srcset จะยังคงโหลดรูปภาพที่ถูกต้องไว้ล่วงหน้า

คุณไม่สามารถโหลดรูปภาพรูปแบบต่างๆ ล่วงหน้าตามการรองรับเบราว์เซอร์ในบางรูปแบบได้ การทำเช่นนี้อาจทำให้มีการดาวน์โหลดเพิ่มขึ้นซึ่งทำให้ผู้ใช้สูญเปล่า

การถอดรหัสรูปภาพ

นอกจากนี้ คุณยังเพิ่มแอตทริบิวต์ decoding ลงในองค์ประกอบ img ได้ด้วย คุณจะบอกเบราว์เซอร์ว่าถอดรหัสรูปภาพแบบไม่พร้อมกันได้เพื่อให้ถอดรหัสเนื้อหาอื่นๆ ก่อนได้

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
>

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

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 decoding="sync"
>

แอตทริบิวต์ decoding ไม่ได้เปลี่ยนความเร็วในการถอดรหัสรูปภาพ ซึ่งจะมีผลเฉพาะกับการที่เบราว์เซอร์รอให้การถอดรหัสรูปภาพนี้เกิดขึ้นก่อนแสดงเนื้อหาอื่นๆ เท่านั้น

ในกรณีส่วนใหญ่ การดำเนินการนี้จะไม่มีผลมากนัก แต่บางครั้งอาจทำให้เบราว์เซอร์แสดงรูปภาพหรือเนื้อหาอื่นๆ ได้เร็วขึ้นเล็กน้อย ตัวอย่างเช่น สำหรับเอกสารขนาดใหญ่ที่มีองค์ประกอบจำนวนมากที่ใช้เวลาในการแสดงผล และรูปภาพขนาดใหญ่ที่ใช้เวลาถอดรหัสนาน การตั้งค่า sync ในรูปภาพที่สำคัญจะบอกให้เบราว์เซอร์รอรูปภาพและแสดงผลทั้ง 2 แบบพร้อมกัน หรือจะตั้งค่า async เพื่อให้เบราว์เซอร์แสดงเนื้อหาได้เร็วขึ้นโดยไม่ต้องรอให้รูปภาพถอดรหัส

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

รูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณาซึ่งมี srcset

ด้วยการประกาศ max-inline-size: 100% ดังกล่าว รูปภาพของคุณจึงไม่สามารถแยกออกจากคอนเทนเนอร์ แต่หากผู้ใช้มีหน้าจอขนาดเล็กและเครือข่ายแบนด์วิดท์ต่ำ การทำให้ผู้ใช้ดาวน์โหลดรูปภาพขนาดเดียวกับผู้ใช้ที่มีหน้าจอขนาดใหญ่จะสูญเสียข้อมูล

หากต้องการแก้ไขปัญหานี้ ให้เพิ่มรูปภาพเดียวกันหลายๆ เวอร์ชันที่มีขนาดต่างกัน และใช้แอตทริบิวต์ srcset เพื่อบอกเบราว์เซอร์ว่ามีขนาดเหล่านี้อยู่และควรใช้เมื่อใด

ข้อบ่งชี้ความกว้าง

คุณกําหนด srcset ได้โดยใช้รายการค่าที่คั่นด้วยคอมมา แต่ละค่าคือ URL ของรูปภาพ ตามด้วยการเว้นวรรค ตามด้วยข้อมูลเมตาบางอย่างเกี่ยวกับรูปภาพ ซึ่งเรียกว่า descriptor

ในตัวอย่างนี้ ข้อมูลเมตาอธิบายความกว้างของรูปภาพแต่ละรูปโดยใช้หน่วย w w หนึ่งคือความกว้าง 1 พิกเซล

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

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

ขนาด

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

แอตทริบิวต์ sizes ใช้รายการคำค้นหาสื่อและความกว้างของรูปภาพซึ่งคั่นด้วยคอมมา

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

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

ในตัวอย่างนี้คุณกำลังบอกเบราว์เซอร์ว่าในวิวพอร์ตที่มีความกว้างสูงกว่า 66em เบราว์เซอร์ควรแสดงรูปภาพไม่เกิน 1 ใน 3 ของหน้าจอ (เช่น ภายในเลย์เอาต์แบบ 3 คอลัมน์)

สำหรับความกว้างของวิวพอร์ตระหว่าง 44em ถึง 66em ให้แสดงรูปภาพที่ครึ่งหนึ่งของความกว้างของหน้าจอ (เช่นเดียวกับเลย์เอาต์ 2 คอลัมน์)

สำหรับรูปภาพที่แคบกว่า 44em ให้แสดงรูปภาพเต็มความกว้างของหน้าจอ

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

ใช้ข้อบ่งชี้ขนาดเพื่อเปลี่ยนลักษณะการจัดวางหน้าเว็บบนหน้าจอขนาดต่างๆ

ข้อบ่งชี้ความหนาแน่นของพิกเซล

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

รูปภาพที่มีความหนาแน่นของพิกเซลต่ำอาจดูไม่ชัด

ใช้ข้อบ่งชี้ความหนาแน่นเพื่ออธิบายความหนาแน่นของพิกเซลของรูปภาพเมื่อสัมพันธ์กับรูปภาพในแอตทริบิวต์ src ข้อบ่งชี้ความหนาแน่นคือตัวเลขตามด้วยตัวอักษร x เช่น 1x หรือ 2x

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

หาก small-image.png มีขนาด 300 x 200 พิกเซล และ medium-image.png มีขนาด 600 x 400 พิกเซล medium-image.png จะมี 2x ต่อท้ายในรายการ srcset

คุณไม่จำเป็นต้องใช้จำนวนเต็ม หากรูปภาพเวอร์ชันอื่นมีขนาด 450 x 300 พิกเซล คุณจะอธิบายรูปภาพด้วย 1.5x ได้

หมายเหตุ: คุณใช้ข้อบ่งชี้ความกว้างหรือตัวบ่งชี้ความหนาแน่น ก็ได้ แต่จะใช้ทั้ง 2 อย่างร่วมกันไม่ได้

รูปภาพการนำเสนอ

รูปภาพใน HTML เป็นเนื้อหา คุณจึงใส่แอตทริบิวต์ alt พร้อมคำอธิบายรูปภาพสำหรับโปรแกรมอ่านหน้าจอและเครื่องมือค้นหา

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

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

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

โดยหลักการแล้ว รูปภาพที่นำเสนอหรือตกแต่งควรรวมอยู่ใน CSS แทนที่จะเป็น HTML HTML มีไว้สำหรับโครงสร้าง CSS มีไว้สำหรับการนำเสนอ

เคล็ดลับ: ดูวิธีสร้างรูปภาพที่เข้าถึงได้

ภาพพื้นหลัง

ใช้พร็อพเพอร์ตี้ background-image ใน CSS เพื่อโหลดรูปภาพงานนำเสนอ

element {
  background-image: url(flourish.png);
}

คุณจะระบุตัวเลือกรูปภาพได้หลายรูปโดยใช้ฟังก์ชัน image-set สำหรับ background-image

ฟังก์ชัน image-set ใน CSS ทำงานคล้ายกับแอตทริบิวต์ srcset ใน HTML ระบุรายการรูปภาพพร้อมข้อบ่งชี้ความหนาแน่นของพิกเซลสำหรับแต่ละภาพ

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

เบราว์เซอร์จะเลือกรูปภาพที่เหมาะสมที่สุดสำหรับความหนาแน่นพิกเซลของอุปกรณ์

การเพิ่มรูปภาพลงในเว็บไซต์มีปัจจัยหลายอย่างที่ต้องพิจารณา ได้แก่

• จองพื้นที่ที่เหมาะสมสำหรับแต่ละรูปภาพ
• กำลังคำนวณขนาดที่คุณต้องการ
• ตัดสินว่ารูปภาพเป็นเนื้อหาหรือการตกแต่ง

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

มีองค์ประกอบ HTML อีก 1 รายการในชุดเครื่องมือที่ช่วยให้คุณควบคุมรูปภาพได้มากขึ้น นั่นก็คือ องค์ประกอบ picture

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับรูปภาพ

ต้องเพิ่มรูปแบบเพื่อให้รูปภาพพอดีกับวิวพอร์ต

จริง

รูปภาพที่ไม่มีการกักเก็บจะมีขนาดใหญ่เท่ากับขนาดตามธรรมชาติ

เท็จ

ต้องระบุรูปแบบ

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

object-fit

ระบุว่ารูปภาพเหมาะสมกับคีย์เวิร์ด เช่น contain และ cover อย่างไร

image-fit

ไม่มีพร็อพเพอร์ตี้นี้ ฉันสร้างขึ้นแล้ว

fit-image

ไม่มีพร็อพเพอร์ตี้นี้ ฉันสร้างขึ้นแล้ว

aspect-ratio

ซึ่งอาจทำให้เกิดหรือแก้ปัญหาอัตราส่วนรูปภาพที่ผิดปกติ

การใส่ height และ width ในรูปภาพจะทำให้ CSS จัดรูปแบบต่างกันไม่ได้

จริง

คิดว่าสิ่งเหล่านี้เป็นคำใบ้มากกว่ากฎ

เท็จ

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

แอตทริบิวต์ srcset ไม่ใช่ _______ เป็นแอตทริบิวต์ src แต่เป็น _______ แอตทริบิวต์

ส่งเสริม, แทนที่

srcset ไม่ได้แทนที่แอตทริบิวต์ src อย่างแน่นอน

แทนที่, เสริม

โดยจะมีตัวเลือกเพิ่มเติมให้เบราว์เซอร์เลือก (หากมี)

ไม่มี alt ในรูปภาพเหมือนกับ alt ที่ว่างเปล่า

จริง

แอตทริบิวต์ alt ที่ว่างเปล่าจะบอกโปรแกรมอ่านหน้าจอว่ารูปภาพนี้เป็นการนำเสนอ

เท็จ

ข้อผิดพลาด alt ขาดหายไปจากโปรแกรมอ่านหน้าจอ