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

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

โชคดีที่ 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;
}

คุณเปลี่ยนตำแหน่งของการครอบตัดรูปภาพได้โดยใช้พร็อพเพอร์ตี้ 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 เบราว์เซอร์ก็ยังทราบอัตราส่วนความกว้างต่อความสูงและ สามารถจัดสรรพื้นที่ในปริมาณที่เหมาะสมได้ ซึ่งจะช่วยป้องกันไม่ให้เนื้อหาอื่นๆ เลื่อนไปมาเมื่อรูปภาพโหลด

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

เคล็ดลับในการโหลด

ใช้แอตทริบิวต์ loading เพื่อบอกเบราว์เซอร์ว่าจะเลื่อนการโหลดรูปภาพ จนกว่ารูปภาพจะอยู่ในหรือใกล้กับ Viewport หรือไม่ สําหรับรูปภาพที่อยู่ครึ่งหน้าล่าง ให้ใช้ค่า 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"
>

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

อย่างไรก็ตาม เมื่อคุณขอให้เบราว์เซอร์จัดลำดับความสำคัญของการดาวน์โหลดทรัพยากรหนึ่ง เช่น รูปภาพ เบราว์เซอร์จะต้องลดลำดับความสำคัญของทรัพยากรอื่น เช่น สคริปต์หรือ ไฟล์แบบอักษร ตั้งค่า 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 fallback จะช่วยให้มั่นใจได้ว่าเบราว์เซอร์ที่ไม่มีsrcset การรองรับจะยังคงโหลดรูปภาพที่ถูกต้องล่วงหน้า

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

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

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

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

คำอธิบายความกว้าง

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

ในตัวอย่างนี้ ข้อมูลเมตาจะอธิบายความกว้างของแต่ละรูปภาพโดยใช้ w unit 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 คอลัมน์)

สำหรับความกว้างของ Viewport ระหว่าง 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 ได้

คุณไม่จำเป็นต้องใช้จำนวนเต็ม หากภาพอีกเวอร์ชันมีขนาด 450x 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 อีกอย่างในชุดเครื่องมือที่จะช่วยให้คุณควบคุมรูปภาพได้มากขึ้น นั่นคือองค์ประกอบ picture

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

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