ข้อความบนเว็บจะตัดขอบของหน้าจอโดยอัตโนมัติเพื่อไม่ให้ล้น ส่วนรูปภาพจะมีขนาดตามนั้น หากรูปภาพกว้างกว่าหน้าจอ รูปภาพจะล้นและผู้ใช้ต้องเลื่อนในแนวนอนเพื่อดูรูปภาพทั้งหมด
โชคดีที่ CSS ให้เครื่องมือแก่คุณในการป้องกันปัญหานี้
จํากัดรูปภาพ
ในสไตล์ชีต คุณสามารถใช้ max-inline-size
เพื่อประกาศว่าจะแสดงผลรูปภาพในขนาดที่กว้างกว่าองค์ประกอบที่มีไม่ได้
img {
max-inline-size: 100%;
block-size: auto;
}
คุณสามารถใช้กฎเดียวกันนี้กับเนื้อหาที่ฝังประเภทอื่นๆ ได้เช่นกัน เช่น วิดีโอและ 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
ค่า 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;
}
คุณเปลี่ยนตำแหน่งการครอบตัดรูปภาพได้โดยใช้คุณสมบัติตำแหน่งวัตถุ ซึ่งจะปรับโฟกัสของการครอบตัดเพื่อให้คุณยังคงมองเห็นส่วนที่สำคัญที่สุดของรูปภาพได้อยู่
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
นำส่งรูปภาพ
กฎ CSS เหล่านี้จะบอกเบราว์เซอร์ว่าคุณต้องการให้แสดงผลอย่างไร คุณยังใส่คำแนะนำใน HTML เกี่ยวกับวิธีที่เบราว์เซอร์ควรจัดการกับรูปภาพเหล่านั้นได้ด้วย
คำแนะนำสำหรับการปรับขนาด
หากคุณทราบขนาดของรูปภาพ ให้ระบุแอตทริบิวต์ width
และ height
เสมอ แม้ว่ารูปภาพจะแสดงผลเป็นขนาดอื่นเนื่องจากกฎ max-inline-size
ของคุณ แต่เบราว์เซอร์จะยังคงทราบอัตราส่วนความกว้างต่อความสูงและสามารถกำหนดพื้นที่ที่เหมาะสมได้ วิธีนี้จะช่วยป้องกันไม่ให้เนื้อหาอื่นๆ เล่นวนไปมาเมื่อโหลดรูปภาพ
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
คำแนะนำสำหรับการโหลด
ใช้แอตทริบิวต์ loading
เพื่อบอกเบราว์เซอร์ว่าจะหน่วงเวลาการโหลดรูปภาพไว้จนกว่าจะอยู่ในหรือใกล้กับวิวพอร์ต สำหรับรูปภาพที่อยู่ครึ่งหน้าล่าง ให้ใช้ค่า lazy
เบราว์เซอร์จะไม่โหลดรูปภาพแบบ Lazy Loading จนกว่าผู้ใช้จะเลื่อนลงมาไกลพอที่จะเห็นรูปภาพ หากผู้ใช้ไม่เลื่อนเลย รูปภาพก็จะไม่โหลด
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
>
สำหรับรูปภาพหลักในครึ่งหน้าบน อย่าใช้ 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
ใช้รายการคำค้นหาสื่อและความกว้างของรูปภาพซึ่งคั่นด้วยคอมมา
<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
ได้
รูปภาพการนำเสนอ
รูปภาพใน 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 จัดรูปแบบต่างกันไม่ได้
แอตทริบิวต์ srcset
ไม่ใช่ _______ เป็นแอตทริบิวต์ src
แต่เป็น _______ แอตทริบิวต์
srcset
ไม่ได้แทนที่แอตทริบิวต์ src
อย่างแน่นอนไม่มี alt
ในรูปภาพเหมือนกับ alt
ที่ว่างเปล่า
alt
ที่ว่างเปล่าจะบอกโปรแกรมอ่านหน้าจอว่ารูปภาพนี้เป็นการนำเสนอalt
ขาดหายไปจากโปรแกรมอ่านหน้าจอ