ข้อความบนเว็บจะถูกตัดที่ขอบหน้าจอโดยอัตโนมัติเพื่อไม่ให้ล้น แตกต่างจากรูปภาพ รูปภาพมีขนาดภายใน หากรูปภาพกว้างกว่าหน้าจอ รูปภาพจะล้นจนทำให้แถบเลื่อนแนวนอนปรากฏขึ้น
แต่คุณสามารถใช้มาตรการใน 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 หมายความว่าสัดส่วนภาพของรูปภาพจะคงที่
บางครั้งขนาดของรูปภาพอาจควบคุมไม่ได้ เช่น หากมีการเพิ่มรูปภาพผ่านระบบจัดการเนื้อหา หากการออกแบบต้องการให้รูปภาพมีสัดส่วนภาพต่างจากขนาดจริงของรูปภาพ ให้ใช้คุณสมบัติ aspect-ratio ใน CSS
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;
}
หากการครอบตัดด้านบนและด้านล่างเป็นปัญหาอย่างเท่าเทียมกัน ให้ใช้คุณสมบัติ CSS object-position เพื่อปรับโฟกัสของการครอบตัด
ซึ่งคุณจะยังคงเห็นเนื้อหารูปภาพที่สําคัญที่สุดอยู่
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: 100%) เบราว์เซอร์จะยังคงทราบอัตราส่วนความกว้างต่อความสูงและจัดสรรพื้นที่ที่เหมาะสมได้ การดําเนินการนี้จะหยุดไม่ให้เนื้อหาอื่นข้ามไปมาเมื่อรูปภาพโหลด
<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" โดยอัตโนมัติ คุณมักจะตั้งค่าแอตทริบิวต์ eager (ซึ่งเป็นค่าเริ่มต้น) เพื่อป้องกันไม่ให้ใช้แอตทริบิวต์ดังกล่าว
<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"
>
ซึ่งจะบอกให้เบราว์เซอร์เรียกรูปภาพทันทีและในลําดับความสําคัญสูง แทนที่จะรอจนกว่าเบราว์เซอร์จะแสดงเลย์เอาต์เสร็จสมบูรณ์ในขณะที่มีการดึงรูปภาพตามปกติ
แต่โปรดทราบว่าเมื่อคุณขอให้เบราว์เซอร์จัดลำดับความสำคัญของการดาวน์โหลดทรัพยากรหนึ่ง เช่น รูปภาพ เบราว์เซอร์จะต้องลดลำดับความสำคัญของทรัพยากรอื่น เช่น สคริปต์หรือไฟล์แบบอักษร ตั้ง fetchpriority="high" บนรูปภาพเฉพาะในกรณีที่จำเป็นจริงๆ เท่านั้น
คำแนะนำการโหลดล่วงหน้า
รูปภาพบางรูปอาจไม่มีใน HTML เริ่มต้นหากมีการเพิ่มโดย JavaScript หรือเป็นภาพพื้นหลังใน CSS นอกจากนี้คุณยังสามารถใช้การโหลดล่วงหน้าเพื่ออนุญาตให้ดึงข้อมูลรูปภาพที่สำคัญเหล่านี้ล่วงหน้าได้อีกด้วย โดยสามารถใช้ร่วมกับแอตทริบิวต์ fetchpriority สำหรับรูปภาพที่สำคัญมากๆ ดังนี้
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
และเช่นเดียวกัน เพื่อหลีกเลี่ยงการลบล้างวิธีการจัดการลำดับความสำคัญของเบราว์เซอร์มากเกินไป ซึ่งอาจส่งผลให้ประสิทธิภาพลดลง
การโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้าตาม srcset (ซึ่งมีการกล่าวถึงด้านล่าง) ผ่านแอตทริบิวต์ imagesrcset และ imagesizes เป็นขั้นสูงกว่าและรองรับในบางเบราว์เซอร์ แต่ไม่ใช่ทั้งหมด
การยกเว้น href สำรองจะช่วยให้มั่นใจได้ว่าเบราว์เซอร์ที่ไม่รองรับการดำเนินการนี้จะไม่โหลดรูปภาพที่ไม่ถูกต้องไว้ล่วงหน้า
การโหลดล่วงหน้าที่ยึดตามรูปแบบรูปภาพต่างๆ จากการรองรับเบราว์เซอร์ของรูปภาพเหล่านั้นยังไม่ได้รับการสนับสนุนในขณะนี้ และอาจส่งผลให้มีการดาวน์โหลดเพิ่มเติม
วิธีที่เหมาะสมคือหลีกเลี่ยงการโหลดล่วงหน้าหากเป็นไปได้ และให้รูปภาพพร้อมใช้งานใน HTML เริ่มต้น เพื่อหลีกเลี่ยงการใช้โค้ดซ้ำ และเพื่อให้เข้าถึงตัวเลือกต่างๆ ที่เบราว์เซอร์รองรับได้อย่างครบถ้วน
การถอดรหัสรูปภาพ
นอกจากนี้ยังมีแอตทริบิวต์ 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 ที่มีขนาดมากเกินไป และตรวจสอบว่ามีการใช้รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์เพื่อลดเวลาในการถอดรหัส ซึ่งหมายความว่าแอตทริบิวต์การถอดรหัสจะมีผลเพียงเล็กน้อย
รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ด้วย srcset
ด้วยการประกาศ max-inline-size: 100% ดังกล่าว รูปภาพของคุณจะไม่มีวันหลุดออกจากคอนเทนเนอร์ แต่แม้ว่าจะดูเหมาะสมหากมีรูปภาพขนาดใหญ่ที่ลดขนาดให้พอดี แต่ก็จะรู้สึกไม่ดี หากมีคนใช้อุปกรณ์ที่มีหน้าจอขนาดเล็กในเครือข่ายแบนด์วิดท์ต่ำ บุคคลนั้นจะดาวน์โหลดรูปภาพขนาดใหญ่โดยไม่จำเป็น
หากคุณสร้างรูปภาพเดียวกันหลายเวอร์ชันในขนาดที่ต่างกัน คุณแจ้งให้เบราว์เซอร์ทราบเกี่ยวกับรูปภาพเหล่านั้นได้โดยใช้แอตทริบิวต์ srcset
ข้อบ่งชี้ความกว้าง
คุณจะส่งผ่านรายการค่าโดยคั่นด้วยเครื่องหมายจุลภาคได้ แต่ละค่าควรเป็น URL ของรูปภาพ ตามด้วยการเว้นวรรคและตามด้วยข้อมูลเมตาเกี่ยวกับรูปภาพ ข้อมูลเมตานี้เรียกว่าข้อบ่งชี้
ในตัวอย่างนี้ ข้อมูลเมตาอธิบายความกว้างของรูปภาพแต่ละภาพโดยใช้หน่วย w w 1 จะเท่ากับ 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 แต่แอตทริบิวต์ 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 ที่ว่างเปล่า แอตทริบิวต์ alt ที่ว่างเปล่าจะบอกกับโปรแกรมอ่านหน้าจอว่ารูปภาพนี้เป็นการนำเสนอ
ตามหลักแล้ว ภาพงานนำเสนอหรือการตกแต่งของคุณไม่ควรอยู่ใน 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-fitcontain และ cover อย่างไรimage-fitfit-imageaspect-ratioการใส่ height และ width ในรูปภาพทำให้ CSS จัดรูปแบบต่างกันไม่ได้
แอตทริบิวต์ srcset ไม่ใช่ _______ แอตทริบิวต์ src แต่เป็น _______
srcset ไม่ได้แทนที่แอตทริบิวต์ src อย่างแน่นอนไม่มี alt ในรูปภาพเท่ากับ alt ที่ว่างเปล่า
alt ที่ว่างเปล่าจะบอกกับโปรแกรมอ่านหน้าจอว่ารูปภาพนี้เป็นการนำเสนอalt สัญญาณใดๆ กับโปรแกรมอ่านหน้าจอ