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

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

สารบัญ:

• รูปภาพที่ตอบสนองด้วย CSS ธรรมดา
• ภาพที่ตอบสนองด้วย srcset และ sizes
• การใช้ srcset กับตัวบอกความหนาแน่นของพิกเซล
• การใช้ <picture> องค์ประกอบ
• เครื่องมือและบริการเพื่อช่วยในการตอบสนองภาพ

รูปภาพที่ตอบสนองด้วย CSS ธรรมดา

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

ก่อนอื่น HTML ของฉันจะรวมแอตทริบิวต์ width และ height :

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

นอกจากนั้น ฉันจะใช้ CSS ต่อไปนี้:

 img { max-width : 100% ; height : auto; }
 ภาษารหัส: CSS ( css )

ค่าเหล่านี้จะแทนที่ HTML ของฉัน คุณสมบัติ max-width ถูกตั้งค่าเป็น 100% เพื่อให้แน่ใจว่าจะเติมพื้นที่ที่ต้องการ สูงสุดไม่เกิน 1,000px (ค่าจาก HTML) ค่า height ของ auto ช่วยให้มั่นใจได้ว่าความสูงของภาพจะรักษาขนาดภาพตามสัดส่วนกับความกว้างและความสูงตามธรรมชาติ ถ้าฉันลบ height: auto รูปภาพจะอยู่ที่ความสูงที่กำหนดไว้ใน HTML โดยไม่คำนึงถึงความกว้าง ซึ่งมักจะไม่ใช่สิ่งที่ฉันต้องการ

คุณสามารถลองใช้ตัวอย่างง่ายๆ นี้โดยใช้ CodePen ต่อไปนี้ เป็นการดีที่สุดที่จะเปิดการสาธิตในหน้าต่างใหม่ หากคุณต้องการทดสอบการตอบสนอง

และโปรดทราบว่าในตัวอย่างของฉัน ขนาดตามธรรมชาติของรูปภาพคือ 2000px x 1333px แต่ฉันเลือกที่จะแสดงรูปภาพได้สูงสุด 1,000px

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

ภาพที่ตอบสนองด้วย srcset และ sizes

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

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

ต่อไปนี้คือตัวอย่างที่ใช้ภาพ leopard.png หลายเวอร์ชันจากตัวอย่างก่อนหน้านี้:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 ภาษารหัส: HTML, XML ( xml )

หากคุณไม่เคยเห็น srcset และ sizes มาก่อน อาจดูสับสนในแวบแรก ฉันจะทำลายมันทั้งหมดเพื่อให้เข้าใจได้ง่าย

การแยกย่อยแอตทริบิวต์ srcset

แอตทริบิวต์ srcset ยอมรับรายการที่คั่นด้วยเครื่องหมายจุลภาคของสตริงตั้งแต่หนึ่งรายการขึ้นไป แต่ละสตริงประกอบด้วย:

• URL ที่ชี้ไปที่รูปภาพ
• ตัวอธิบายเพิ่มเติมตัวใดตัวหนึ่งต่อไปนี้ (คั่นด้วยการเว้นวรรค):
  • ตัวบอกความกว้าง
  • ตัวบอกความหนาแน่นของพิกเซล

ในตัวอย่างของฉัน ฉันได้รวม width descriptor ซึ่งคุณจะเห็นบ่อยที่สุด ฉันได้รวมรูปภาพไว้สามเวอร์ชัน: รุ่นความละเอียดสูงขนาดใหญ่ พร้อมด้วยแบบกว้าง 800px และอีกแบบกว้าง 480px

สังเกตว่าเมื่อฉันใช้ตัวบอกความกว้างในตัวอย่างข้างต้น ไวยากรณ์คือค่าความกว้างตามด้วย "w" ทันที (อย่าใช้ค่าหน่วย "px"!) สำหรับแต่ละตัวบอกความกว้างที่แสดงรูปภาพ ฉันใช้ความกว้างที่แท้จริงของรูปภาพเป็นพิกเซล คุณสามารถรับขนาดที่แท้จริงของรูปภาพใด ๆ ได้หลายวิธี – โดยการอ้างอิงคุณสมบัติของมันในระบบไฟล์ของคุณ โปรแกรมแก้ไขรูปภาพ หรือแม้แต่ในเบราว์เซอร์หรือเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ของคุณ

แบ่งแอตทริบิวต์ sizes

แอตทริบิวต์ srcset sizes คุณสามารถใช้ srcset เพียงอย่างเดียวได้ (ดูหัวข้อถัดไป) แต่วิธีทั่วไปในการใช้ srcset ก็คือการใช้ sizes

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

• เงื่อนไขสื่อ (คล้ายกับการสืบค้นสื่อที่ใช้ใน CSS)
• ค่าที่กำหนดขนาดของ "ช่อง" ที่รูปภาพจะใช้ค่า

ค่าสล็อตสามารถเป็นความยาวสัมบูรณ์ เช่น em หรือ px หรือหน่วยสัมพันธ์ของวิวพอร์ต (เช่น vw ) สังเกตในตัวอย่างของฉัน ค่าสล็อตในแอตทริบิวต์ sizes ไม่ตรงกันทุกประการกับตัวบอกความกว้างทั้งสาม นี่คือรหัสอีกครั้ง:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 ภาษารหัส: HTML, XML ( xml )

ความจริงที่ว่าค่าสล็อตไม่ตรงกับตัวบอกความกว้างทุกประการก็ไม่เป็นไร ในกรณีของฉัน ฉันสามารถแบ่งค่า sizes เป็น:

• วิวพอร์ตกว้าง 600px จะโหลดภาพ 480w จากค่า srcset ภายในช่องที่มีความกว้าง 480px
• วิวพอร์ตกว้าง 1000px จะโหลดภาพ 800w ในช่อง 800px
• รูปภาพขนาดเต็มเริ่มต้น (2000w) จะเติมช่อง 1000px หากไม่ตรงตามเงื่อนไขสื่อก่อนหน้า

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

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

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

การใช้ srcset กับตัวบอกความหนาแน่นของพิกเซล

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

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 ภาษารหัส: HTML, XML ( xml )

สังเกตสองสามสิ่งที่นี่ ประการแรก สำหรับแอตทริบิวต์ src ปกติ ฉันใช้รูปภาพที่เล็กที่สุด เพื่อให้แน่ใจว่าจะใช้อุปกรณ์เคลื่อนที่เป็นอันดับแรก ถัดไป แอตทริบิวต์ srcset จะรวมรูปภาพเวอร์ชันอื่นๆ สองสามเวอร์ชัน โดยมีความละเอียดระบุโดยตัวอธิบาย 1.5x และ 2x รูปภาพ 480 ไม่มีคำอธิบายเนื่องจาก 1x เป็นนัย สุดท้าย สังเกตว่าไม่มีแอตทริบิวต์ sizes ซึ่งฉันไม่ต้องการในกรณีนี้ MDN อธิบายว่าเบราว์เซอร์เลือกรูปภาพอย่างไร:

เพื่อให้เข้าใจว่าตัวอธิบายทำงานอย่างไร โปรดจำไว้ว่าพิกเซลอุปกรณ์หนึ่งพิกเซลแสดงถึงแต่ละพิกเซล CSS ดังนั้น 1x จะเป็นอัตราส่วน 1:1, 1.5x จะเป็นอัตราส่วน 1.5:1 และอื่นๆ คุณสามารถลองใช้ CodePen ด้านล่างได้ แต่คุณจะต้องใช้อุปกรณ์ต่างๆ (หรือใช้เครื่องมือที่เลียนแบบ) เพื่อดูความแตกต่าง

การใช้ <picture> องค์ประกอบ

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

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

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

นี่คือตัวอย่างโค้ดที่ช่วยให้ฉันกำหนดทิศทางศิลปะบนรูปภาพของฉันได้:

สังเกตสิ่งต่อไปนี้เกี่ยวกับรหัส:

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

CodePen ด้านล่างแสดงให้เห็นสิ่งนี้:

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

เครื่องมือและบริการเพื่อช่วยในการตอบสนองภาพ

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

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

แม้แต่ WordPress เองก็มาพร้อมกับการรองรับในตัวสำหรับรูปภาพที่ตอบสนอง (เริ่มในเวอร์ชัน 4.4)

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

Optimole เวอร์ชันฟรีมีให้ใช้งานแล้ว อนุญาตให้เข้าชมเว็บไซต์ได้มากถึง 5,000 ครั้งต่อเดือน และจะมอบคุณสมบัติการปรับขนาดอัตโนมัติ CDN และอื่นๆ ให้คุณ

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

เค้าโครงและการนำเสนอโดย Chris Fitzgerald และ Karol K.