รูปภาพหนึ่งภาพแทนคำได้ 1, 000 คำ และรูปภาพก็เป็นส่วนสำคัญของทุกหน้า แต่มักคำนึงถึงไบต์ที่ดาวน์โหลดด้วย การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ไม่เพียงแต่ทำให้เลย์เอาต์ของเราเปลี่ยนแปลงไปตามลักษณะของอุปกรณ์เท่านั้น แต่ยังรวมถึงรูปภาพอีกด้วย
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์หมายความว่าเลย์เอาต์ของเราไม่เพียงแค่สามารถเปลี่ยนตามลักษณะเฉพาะของอุปกรณ์แล้ว แต่เนื้อหายังเปลี่ยนตามได้ด้วย ตัวอย่างเช่น กราฟิกความละเอียดสูงช่วยให้ภาพมีความคมชัด ในจอแสดงผลความละเอียดสูง (2x) รูปภาพที่มีความกว้าง 50% อาจใช้งานได้ปกติถ้าเบราว์เซอร์กว้าง 800 พิกเซล แต่ใช้พื้นที่มากเกินไปในโทรศัพท์ขนาดเล็ก และต้องใช้แบนด์วิดท์เท่าเดิมเมื่อลดขนาดลงให้พอดีกับหน้าจอขนาดเล็ก
การกำกับศิลป์
หรืออาจต้องเปลี่ยนรูปภาพมากเกินไป เช่น การเปลี่ยนสัดส่วน การครอบตัด หรือการเปลี่ยนรูปภาพทั้งรูป ในกรณีนี้ การเปลี่ยนรูปภาพมักจะเรียกว่าการกำกับศิลป์ ดูตัวอย่างเพิ่มเติมที่ responsiveimages.org/demos/
รูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณา
คุณรู้ไหมว่ารูปภาพคิดเป็นสัดส่วนมากกว่า 60% ของไบต์โดยเฉลี่ยที่ต้องใช้ในการโหลดหน้าเว็บ
ในหลักสูตรนี้ คุณจะได้เรียนรู้เกี่ยวกับวิธีทำงานกับรูปภาพบนเว็บสมัยใหม่ เพื่อให้รูปภาพดูดีและโหลดได้อย่างรวดเร็วบนอุปกรณ์ทุกชนิด
ในระหว่างนี้ คุณจะได้ฝึกฝนทักษะและเทคนิคต่างๆ เพื่อรวมรูปภาพที่ตอบสนองตามอุปกรณ์ไว้ในเวิร์กโฟลว์การพัฒนาได้อย่างราบรื่น เมื่อจบหลักสูตร คุณจะได้พัฒนาด้วยรูปภาพที่สามารถปรับและตอบสนองต่อขนาดวิวพอร์ตและสถานการณ์การใช้งานที่แตกต่างกัน
หลักสูตรนี้เป็นหลักสูตรฟรีที่มีให้บริการผ่าน Udacity
รูปภาพในมาร์กอัป
องค์ประกอบ img มีประสิทธิภาพ ทั้งดาวน์โหลด ถอดรหัส และแสดงผลเนื้อหา อีกทั้งเบราว์เซอร์ที่ทันสมัยยังรองรับรูปภาพหลายรูปแบบด้วย การใส่รูปภาพที่ทำงานในอุปกรณ์ต่างๆ ได้ไม่แตกต่างจากเดสก์ท็อป และเพียงต้องปรับแต่งเล็กน้อยเพื่อสร้างประสบการณ์การใช้งานที่ดี
สรุป
- ใช้ขนาดที่สัมพันธ์กันสำหรับรูปภาพเพื่อป้องกันไม่ให้รูปภาพล้นคอนเทนเนอร์โดยไม่ได้ตั้งใจ
- ใช้องค์ประกอบ
pictureเมื่อคุณต้องการระบุรูปภาพที่แตกต่างกันตามลักษณะเฉพาะของอุปกรณ์ (หรือที่เรียกว่าอาร์ตเวิร์ก) - ใช้
srcsetและข้อบ่งชี้xในองค์ประกอบimgเพื่อให้คำแนะนำแก่เบราว์เซอร์เกี่ยวกับรูปภาพที่ดีที่สุดที่จะใช้เมื่อเลือกจากความหนาแน่นแบบต่างๆ - หากหน้าเว็บมีรูปภาพเพียง 1-2 รูปและไม่ได้ใช้รูปภาพเหล่านี้ที่อื่นในเว็บไซต์ ให้พิจารณาใช้รูปภาพในบรรทัดเพื่อลดคําขอไฟล์
ใช้ขนาดที่เกี่ยวข้องสำหรับรูปภาพ
อย่าลืมใช้หน่วยสัมพัทธ์เมื่อระบุความกว้างสำหรับรูปภาพ เพื่อป้องกันไม่ให้รูปภาพล้นวิวพอร์ตโดยไม่ตั้งใจ เช่น width: 50%; ทำให้ความกว้างของรูปภาพเป็น 50% ขององค์ประกอบที่มี (ไม่ใช่ 50% ของวิวพอร์ตหรือ 50% ของขนาดพิกเซลจริง)
เนื่องจาก CSS ทำให้เนื้อหาล้นที่เก็บของคอนเทนเนอร์ได้ คุณอาจต้องใช้ความกว้างสูงสุด: 100% เพื่อป้องกันไม่ให้รูปภาพและเนื้อหาอื่นๆ ล้น เช่น
img, embed, object, video {
max-width: 100%;
}
อย่าลืมใส่คำอธิบายที่มีความหมายผ่านแอตทริบิวต์ alt ในองค์ประกอบ img ซึ่งจะช่วยให้เว็บไซต์เข้าถึงได้มากขึ้นโดยการให้บริบทแก่โปรแกรมอ่านหน้าจอและเทคโนโลยีความช่วยเหลืออื่นๆ
ปรับปรุง img ด้วย srcset สำหรับอุปกรณ์ DPI สูง
แอตทริบิวต์ srcset ช่วยปรับปรุงลักษณะการทำงานขององค์ประกอบ img ทำให้ส่งไฟล์รูปภาพหลายไฟล์สำหรับลักษณะต่างๆ ของอุปกรณ์ได้ง่ายขึ้น srcset ช่วยให้เบราว์เซอร์เลือกรูปภาพที่ดีที่สุดตามลักษณะของอุปกรณ์ได้เช่นเดียวกับimage-set
ฟังก์ชัน CSS ดั้งเดิมของ CSS เช่น ใช้รูปภาพ 2 เท่าบนจอแสดงผล 2 เท่า และในอนาคตอาจเป็นรูปภาพ 1x ในอุปกรณ์ 2 เท่าเมื่อใช้เครือข่ายแบนด์วิดท์ที่จำกัด
<img src="photo.png" srcset="photo@2x.png 2x" ...>
ในเบราว์เซอร์ที่ไม่รองรับ srcset เบราว์เซอร์จะใช้เพียงไฟล์ภาพเริ่มต้นที่ระบุโดยแอตทริบิวต์ src ด้วยเหตุนี้คุณจึงต้องใส่รูปภาพขนาด 1x ที่แสดงบนอุปกรณ์ใดก็ได้เสมอ ไม่ว่าจะมีความสามารถเท่าใดก็ตาม เมื่อรองรับ srcset ระบบจะแยกวิเคราะห์รายการรูปภาพ/เงื่อนไขที่คั่นด้วยคอมมาก่อนส่งคำขอ และจะดาวน์โหลดและแสดงรูปภาพที่เหมาะสมที่สุดเท่านั้น
แม้ว่าเงื่อนไขจะรวมทุกสิ่งทุกอย่างตั้งแต่ความหนาแน่นของพิกเซลไปจนถึงความกว้างและความสูง แต่ปัจจุบันรองรับเฉพาะความหนาแน่นพิกเซลเท่านั้น ใช้เพียงรูปภาพขนาด 2 เท่าในแอตทริบิวต์ เพื่อสร้างความสมดุลระหว่างพฤติกรรมปัจจุบันกับฟีเจอร์ในอนาคต
การกำกับศิลป์ในรูปภาพที่ตอบสนองตามอุปกรณ์ด้วย picture
หากต้องการเปลี่ยนรูปภาพตามลักษณะอุปกรณ์ หรือที่เรียกว่าเส้นทางศิลปะ ให้ใช้องค์ประกอบ picture องค์ประกอบ picture กำหนดวิธีแก้ปัญหาเชิงประกาศสำหรับการนำส่งรูปภาพหลายเวอร์ชันตามลักษณะที่แตกต่างกัน เช่น ขนาดอุปกรณ์ ความละเอียดของอุปกรณ์ การวางแนว และอื่นๆ
ใช้องค์ประกอบ picture เมื่อแหล่งที่มาของรูปภาพมีความหนาแน่นหลายระดับ หรือเมื่อการออกแบบที่ตอบสนองตามอุปกรณ์กำหนดรูปภาพที่ต่างออกไปในหน้าจอบางประเภท คุณรวมองค์ประกอบ source ได้หลายรายการซึ่งคล้ายกับองค์ประกอบ video ซึ่งทำให้ระบุไฟล์ภาพที่แตกต่างกันได้โดยขึ้นอยู่กับคำค้นหาสื่อหรือรูปแบบรูปภาพ
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
ในตัวอย่างข้างต้น หากความกว้างของเบราว์เซอร์เป็นอย่างน้อย 800px ระบบจะใช้ head.jpg หรือ head-2x.jpg ขึ้นอยู่กับความละเอียดของอุปกรณ์ หากเบราว์เซอร์มีขนาดระหว่าง 450 ถึง 800 พิกเซล ก็จะมีการใช้ head-small.jpg หรือ head-small-
2x.jpg อีกครั้ง ทั้งนี้ขึ้นอยู่กับความละเอียดของอุปกรณ์ สำหรับความกว้างหน้าจอ
น้อยกว่า 450px และความเข้ากันได้แบบย้อนหลังในกรณีที่ระบบไม่รองรับองค์ประกอบ picture เบราว์เซอร์จะแสดงผลองค์ประกอบ img แทน และควรรวมอยู่เสมอ
รูปภาพที่มีขนาดสัมพันธ์กัน
เมื่อไม่ทราบขนาดสุดท้ายของรูปภาพ การระบุข้อบ่งชี้ความหนาแน่นสำหรับแหล่งที่มาของรูปภาพอาจทำได้ยาก โดยเฉพาะอย่างยิ่งสำหรับรูปภาพที่มีความกว้างเป็นสัดส่วนของเบราว์เซอร์และเป็นแบบไหล ทั้งนี้ขึ้นอยู่กับขนาดของเบราว์เซอร์
คุณสามารถระบุขนาดของรูปภาพที่ระบุแต่ละรูปได้โดยการเพิ่มข้อบ่งชี้ความกว้างพร้อมกับขนาดขององค์ประกอบรูปภาพ ทำให้เบราว์เซอร์สามารถคำนวณความหนาแน่นของพิกเซลที่มีประสิทธิภาพได้โดยอัตโนมัติ และเลือกรูปภาพที่ดีที่สุดที่จะดาวน์โหลดแทนการกำหนดขนาดและความหนาแน่นของรูปภาพคงที่
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
ตัวอย่างด้านบนแสดงรูปภาพที่มีความกว้างครึ่งหนึ่งของวิวพอร์ต (sizes="50vw") และขึ้นอยู่กับความกว้างของเบราว์เซอร์และอัตราส่วนพิกเซลของอุปกรณ์ ทำให้เบราว์เซอร์เลือกรูปภาพที่ถูกต้องได้ไม่ว่าหน้าต่างเบราว์เซอร์จะมีขนาดใหญ่แค่ไหน เช่น ตารางด้านล่างแสดงรูปภาพที่เบราว์เซอร์จะเลือก
| ความกว้างของเบราว์เซอร์ | อัตราส่วนพิกเซลของอุปกรณ์ | รูปภาพที่ใช้ | การแก้ปัญหาที่มีประสิทธิภาพ |
|---|---|---|---|
| 400 พิกเซล | 1 | 200.jpg |
1 เท่า |
| 400 พิกเซล | 2 | 400.jpg |
2 เท่า |
| 320 พิกเซล | 2 | 400.jpg |
2.5 เท่า |
| 600 พิกเซล | 2 | 800.jpg |
2.67 เท่า |
| 640 พิกเซล | 3 | 1000.jpg |
3.125 เท่า |
| 1100 พิกเซล | 1 | 800.png |
1.45 เท่า |
พิจารณาเบรกพอยท์ในอิมเมจที่ปรับเปลี่ยนตามอุปกรณ์
ในหลายกรณี ขนาดรูปภาพอาจเปลี่ยนไปตามเบรกพอยท์ของเลย์เอาต์ของเว็บไซต์ ตัวอย่างเช่น บนหน้าจอขนาดเล็ก คุณอาจต้องการให้รูปภาพขยายเต็มความกว้างของวิวพอร์ต แต่ในหน้าจอขนาดใหญ่ ก็ควรจะมีสัดส่วนที่น้อยเท่านั้น
<img src="400.png"
sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
srcset="100.png 100w, 200.png 200w, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
แอตทริบิวต์ sizes ในตัวอย่างข้างต้นใช้คำค้นหาสื่อหลายรายการเพื่อระบุขนาดของรูปภาพ เมื่อความกว้างของเบราว์เซอร์มากกว่า 600 พิกเซล รูปภาพจะเท่ากับ 25% ของความกว้างของวิวพอร์ต เมื่ออยู่ระหว่าง 500 ถึง 600 พิกเซล รูปภาพจะมีความกว้างเต็มขนาด 50% และต่ำกว่า 500 พิกเซล
ทำให้รูปภาพผลิตภัณฑ์สามารถขยายได้
ลูกค้าต้องการเห็นสิ่งที่พวกเขาซื้อ ในเว็บไซต์ค้าปลีก ผู้ใช้คาดหวังว่าจะสามารถเห็นภาพโคลสอัพความละเอียดสูงของผลิตภัณฑ์เพื่อให้เห็นรายละเอียดมากขึ้น และผู้เข้าร่วมการศึกษาก็ไม่พอใจหากไม่สามารถดูได้
ตัวอย่างที่ดีของรูปภาพที่ขยายได้แบบแตะได้มาจาก J. เว็บไซต์ลูกเรือ การวางซ้อนที่หายไปหมายความว่าแตะรูปภาพได้ ทำให้รูปภาพซูมเข้าและแสดงรายละเอียดอย่างละเอียด
เทคนิคอื่นๆ สำหรับรูปภาพ
รูปภาพบีบอัด
เทคนิคการบีบอัดรูปภาพจะแสดงรูปภาพขนาด 2 เท่าที่มีการบีบอัดสูงไปยังอุปกรณ์ทั้งหมด ไม่ว่าอุปกรณ์จะมีความสามารถจริงเป็นอย่างไร คุณภาพของรูปอาจไม่เปลี่ยนไปมาก แต่ขนาดไฟล์จะลดลงอย่างมาก ทั้งนี้ขึ้นอยู่กับประเภทของรูปภาพและระดับการบีบอัด
การเปลี่ยนรูปภาพ JavaScript
การแทนที่รูปภาพด้วย JavaScript จะตรวจสอบความสามารถของอุปกรณ์และ "ทำสิ่งที่ถูกต้อง" คุณกำหนดอัตราส่วนพิกเซลของอุปกรณ์ได้ผ่าน window.devicePixelRatio ดูความกว้างและความสูงของหน้าจอ รวมถึงอาจดักจับการเชื่อมต่อเครือข่ายผ่าน navigator.connection หรือส่งคำขอปลอมได้ เมื่อรวบรวมข้อมูลทั้งหมดแล้ว คุณก็สามารถตัดสินใจว่าจะโหลดรูปภาพใด
ข้อเสียสำคัญอย่างหนึ่งของวิธีนี้คือการใช้ JavaScript จะทำให้การโหลดรูปภาพล่าช้าจนกว่าโปรแกรมแยกวิเคราะห์ล่วงหน้าจะเสร็จสิ้น ซึ่งหมายความว่ารูปภาพยังไม่เริ่มดาวน์โหลดจนกว่าเหตุการณ์ pageload จะเริ่มทำงาน นอกจากนี้ เบราว์เซอร์มักจะดาวน์โหลดทั้งรูปภาพ 1x และ 2x ซึ่งส่งผลให้หน้าเว็บมีน้ำหนักเพิ่มขึ้น
รูปภาพในบรรทัด: แรสเตอร์และเวกเตอร์
การสร้างและจัดเก็บรูปภาพมี 2 วิธีที่แตกต่างกันโดยพื้นฐาน และวิธีนี้จะส่งผลต่อการใช้รูปภาพแบบปรับเปลี่ยนตามอุปกรณ์
รูปภาพแรสเตอร์ เช่น ภาพถ่ายและรูปภาพอื่นๆ จะแสดงเป็นตารางที่มีจุดสีแต่ละจุด รูปภาพแรสเตอร์อาจมาจากกล้องหรือเครื่องสแกน หรือสร้างด้วยองค์ประกอบ HTML Canvas รูปแบบ เช่น PNG, JPEG และ WebP จะใช้ในการเก็บรูปภาพแบบแรสเตอร์
ภาพเวกเตอร์ เช่น โลโก้และภาพลายเส้นหมายถึงชุดของเส้นโค้ง เส้น รูปร่าง สีเติม และการไล่ระดับสี คุณสามารถสร้างภาพเวกเตอร์ด้วยโปรแกรมอย่าง Adobe Illustrator หรือ Inkscape หรือเขียนด้วยลายมือในโค้ดโดยใช้รูปแบบเวกเตอร์อย่างเช่น SVG
SVG
SVG ช่วยให้สามารถรวมภาพกราฟิกเวกเตอร์ที่ปรับเปลี่ยนตามอุปกรณ์ในหน้าเว็บได้ ข้อดีของรูปแบบไฟล์เวกเตอร์เมื่อเทียบกับรูปแบบไฟล์แรสเตอร์คือ เบราว์เซอร์สามารถแสดงผลรูปภาพเวกเตอร์ได้ในขนาดใดก็ได้ รูปแบบเวกเตอร์อธิบายถึงเรขาคณิตของรูปภาพ ว่าสร้างจากเส้น เส้นโค้ง และสี และอื่นๆ อย่างไร ส่วนรูปแบบแรสเตอร์จะมีเฉพาะข้อมูลเกี่ยวกับจุดสีแต่ละจุดเท่านั้น เบราว์เซอร์จึงต้องเดาว่าควรเติมช่องว่างอย่างไรเมื่อปรับขนาด
ด้านล่างนี้เป็นรูปภาพเดียวกัน 2 เวอร์ชันคือ รูปภาพ PNG ทางด้านซ้ายและ SVG ทางด้านขวา SVG จะดูดีในทุกขนาด ขณะที่ PNG ด้านข้างจะเริ่มเบลอเมื่อแสดงผลบนหน้าจอขนาดใหญ่ขึ้น
หากต้องการลดจำนวนคำขอไฟล์ที่หน้าเว็บสร้างขึ้น คุณจะโค้ดรูปภาพในบรรทัดได้โดยใช้รูปแบบ SVG หรือ URI ข้อมูล หากดูแหล่งที่มาของหน้านี้ จะเห็นว่าทั้ง 2 โลโก้ด้านล่างนี้มีการประกาศในหน้า ซึ่งได้แก่ URI ข้อมูลและ SVG
SVG มีการรองรับที่ยอดเยี่ยมในอุปกรณ์เคลื่อนที่และเดสก์ท็อป และเครื่องมือเพิ่มประสิทธิภาพสามารถลดขนาด SVG ได้อย่างมาก โลโก้ SVG ในหน้า 2 รูปต่อไปนี้ดูเหมือนกัน แต่มีขนาดประมาณ 3 KB และอีกรูปหนึ่งมีขนาดประมาณ 2 KB
URI ข้อมูล
URI ข้อมูลมีวิธีในการรวมไฟล์ (เช่น รูปภาพ) ไว้ในหน้าโดยการตั้งค่า src ขององค์ประกอบ img เป็นสตริงที่เข้ารหัส Base64 โดยใช้รูปแบบต่อไปนี้
<img src="data:image/svg+xml;base64,[data]">
จุดเริ่มต้นของโค้ดสำหรับโลโก้ HTML5 ด้านบนจะมีลักษณะดังนี้
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(เวอร์ชันเต็มมีความยาวมากกว่า 5,000 อักขระ)
เครื่องมือลาก 'n' วาง เช่น jpillora.com/base64-encoder ใช้งานได้ เพื่อแปลงไฟล์ไบนารี เช่น รูปภาพ เป็น URI ข้อมูล URI ข้อมูลได้รับการรองรับในเบราว์เซอร์ในอุปกรณ์เคลื่อนที่และเดสก์ท็อป เช่นเดียวกับ SVG
การแทรกในบรรทัดใน CSS
URI ข้อมูลและ SVG สามารถแทรกใน CSS ได้เช่นกัน ซึ่งระบบรองรับทั้งในอุปกรณ์เคลื่อนที่และเดสก์ท็อป นี่คือรูปภาพที่ดูเหมือนกัน 2 รูปซึ่งใช้เป็นภาพพื้นหลังใน CSS, URI ข้อมูล 1 รายการและ SVG 1 รายการ ได้แก่
ข้อดีและข้อเสียของอินไลน์
โค้ดในบรรทัดสำหรับรูปภาพอาจเป็นแบบละเอียด โดยเฉพาะ URI ข้อมูล แล้วทำไมคุณจึงต้องการใช้โค้ดนี้ วิธีลดคำขอ HTTP SVG และ URI ข้อมูลจะช่วยให้เรียกทั้งหน้าเว็บได้ ซึ่งรวมถึงรูปภาพ, CSS และ JavaScript ด้วยคำขอเดียว
ข้อเสียมีดังนี้
- สำหรับอุปกรณ์เคลื่อนที่ URI ข้อมูลอาจแสดงบนอุปกรณ์เคลื่อนที่ได้ช้ากว่าอย่างมากเมื่อเทียบกับรูปภาพจาก
srcภายนอก - URI ข้อมูลอาจเพิ่มขนาดของคำขอ HTML ได้อย่างมาก
- ซึ่งจะเพิ่มความซับซ้อนให้กับมาร์กอัปและเวิร์กโฟลว์
- รูปแบบ URI ข้อมูลมีขนาดใหญ่กว่าไบนารี (สูงสุด 30%) และไม่ลดขนาดการดาวน์โหลดรวม
- URI ข้อมูลไม่สามารถแคชได้ จึงต้องดาวน์โหลดไว้สำหรับทุกหน้าที่มีการใช้งาน
- โปรแกรมเหล่านี้ไม่ได้รับการสนับสนุนใน IE 6 และ 7, การสนับสนุนไม่สมบูรณ์ใน IE8
- เมื่อใช้ HTTP/2 การลดจำนวนคำขอเนื้อหาจะมีความสำคัญน้อยลง
เช่นเดียวกับทุกสิ่งที่ปรับเปลี่ยนตามอุปกรณ์ คุณต้องทดสอบว่าอะไรทำงานได้ดีที่สุด ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อวัดขนาดไฟล์ดาวน์โหลด จำนวนคำขอ และเวลาในการตอบสนองทั้งหมด บางครั้ง URI ข้อมูลอาจเป็นประโยชน์สำหรับรูปภาพแรสเตอร์ เช่น ในหน้าแรกที่มีรูปภาพเพียง 1-2 รูปซึ่งไม่ได้ใช้ที่อื่น หากจำเป็นต้องแทรกรูปภาพเวกเตอร์ SVG ก็เป็นตัวเลือกที่ดีกว่ามาก
รูปภาพใน CSS
พร็อพเพอร์ตี้ background ของ CSS เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการเพิ่มรูปภาพที่ซับซ้อนลงในองค์ประกอบ ซึ่งทำให้เพิ่มรูปภาพหลายรูปได้อย่างง่ายดายและทำให้รูปภาพเหล่านั้นเกิดซ้ำ และอื่นๆ อีกมากมายได้ง่ายๆ เมื่อรวมเข้ากับคำค้นหาสื่อ คุณสมบัติพื้นหลังจะมีประสิทธิภาพมากยิ่งขึ้น โดยช่วยให้สามารถโหลดรูปภาพที่มีเงื่อนไขตามความละเอียดของหน้าจอ ขนาดวิวพอร์ต และอื่นๆ
สรุป
- ใช้รูปภาพที่ดีที่สุดสำหรับลักษณะของจอแสดงผล พิจารณาขนาดหน้าจอ ความละเอียดของอุปกรณ์ และเลย์เอาต์ของหน้า
- เปลี่ยนพร็อพเพอร์ตี้
background-imageใน CSS สำหรับการแสดง DPI สูงโดยใช้คำค้นหาสื่อด้วยmin-resolutionและ-webkit-min-device-pixel-ratio - ใช้ srcset เพื่อให้รูปภาพความละเอียดสูงนอกเหนือจากรูปภาพ 1x ในมาร์กอัป
- คำนึงถึงต้นทุนด้านประสิทธิภาพเมื่อใช้เทคนิคการแทนที่รูปภาพ JavaScript หรือเมื่อแสดงรูปภาพความละเอียดสูงที่มีการบีบอัดในระดับสูงไปยังอุปกรณ์ที่มีความละเอียดต่ำลง
ใช้คำค้นหาสื่อสำหรับการโหลดรูปภาพแบบมีเงื่อนไขหรือการกำหนดทิศทางศิลปะ
คำค้นหาสื่อไม่เพียงแต่ส่งผลต่อเลย์เอาต์หน้าเว็บเท่านั้น แต่ยังสามารถใช้เพื่อโหลดรูปภาพแบบมีเงื่อนไขหรือกำหนดทิศทางศิลปะโดยขึ้นอยู่กับความกว้างของวิวพอร์ตได้ด้วย
เช่น ในตัวอย่างด้านล่าง มีเพียงหน้าจอขนาดเล็ก small.png จะดาวน์โหลดและนำไปใช้กับเนื้อหา div ส่วนบนหน้าจอขนาดใหญ่background-image: url(body.png) จะใช้กับส่วนเนื้อหา และbackground-image:
url(large.png) จะใช้กับเนื้อหา div
.example {
height: 400px;
background-image: url(small.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}
@media (min-width: 500px) {
body {
background-image: url(body.png);
}
.example {
background-image: url(large.png);
}
}
ใช้ชุดรูปภาพเพื่อให้รูปภาพความละเอียดสูง
ฟังก์ชัน image-set() ใน CSS ช่วยปรับปรุงพร็อพเพอร์ตี้ background ลักษณะการทำงาน ทำให้ส่งไฟล์รูปภาพหลายไฟล์สำหรับลักษณะเฉพาะของอุปกรณ์ต่างๆ ได้อย่างง่ายดาย วิธีนี้ช่วยให้เบราว์เซอร์เลือกรูปภาพที่ดีที่สุดตามลักษณะของอุปกรณ์ เช่น ใช้รูปภาพ 2 เท่าในจอแสดงผล 2 เท่า หรือรูปภาพ 1 เท่าในอุปกรณ์ 2 เท่าเมื่อใช้เครือข่ายแบนด์วิดท์ที่จำกัด
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
นอกจากการโหลดรูปภาพที่ถูกต้องแล้ว เบราว์เซอร์ยังปรับขนาดภาพให้เหมาะสมด้วย กล่าวอีกนัยหนึ่งคือ เบราว์เซอร์จะถือว่ารูปภาพ 2 เท่ามีขนาดใหญ่เป็น 2 เท่าของรูปภาพ 1x และจะลดรูป 2 เท่าลงด้วยตัวประกอบเป็น 2 เพื่อให้รูปภาพมีขนาดเท่ากันในหน้าเว็บ
การรองรับ image-set() ยังเป็นฟีเจอร์ใหม่และรองรับเฉพาะใน Chrome และ Safari ที่มีคำนำหน้าของผู้ให้บริการ -webkit เท่านั้น อย่าลืมใส่รูปภาพสำรองเมื่อระบบไม่รองรับ image-set() เช่น
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
}
เนื้อหาด้านบนจะโหลดเนื้อหาที่เหมาะสมในเบราว์เซอร์ที่รองรับชุดรูปภาพ
มิฉะนั้นระบบจะส่งคืนเนื้อหา 1x คำเตือนที่ชัดเจนคือแม้ว่าเบราว์เซอร์ image-set() จะรองรับได้น้อย แต่เบราว์เซอร์ส่วนใหญ่จะได้รับเนื้อหา 1 เท่า
ใช้คำสืบค้นสื่อในการนำเสนอรูปภาพความละเอียดสูงหรือกำหนดทิศทางศิลปะ
การค้นหาสื่อสามารถสร้างกฎตามอัตราส่วนพิกเซลของอุปกรณ์ ทำให้ระบุรูปภาพที่แตกต่างกันสำหรับจอแสดงผล 2 เท่าเทียบกับจอแสดงผล 1 เท่าได้
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
/* High dpi styles & resources here */
}
Chrome, Firefox และ Opera ทั้งหมดรองรับ (min-resolution: 2dppx) มาตรฐาน ในขณะที่เบราว์เซอร์ Safari และ Android ต่างก็ต้องใช้ไวยากรณ์ของผู้ให้บริการรุ่นเก่าที่นำหน้าโดยไม่มีหน่วย dppx อย่าลืมว่ารูปแบบเหล่านี้จะโหลดเฉพาะเมื่ออุปกรณ์
ตรงกับคำค้นหาสื่อเท่านั้น และคุณต้องระบุรูปแบบสำหรับตัวพิมพ์พื้นฐาน
นอกจากนี้ ยังมีประโยชน์ในการตรวจสอบให้มีบางอย่างแสดงผลหากเบราว์เซอร์ไม่รองรับคำค้นหาสื่อที่เจาะจงความละเอียด
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
}
@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2) /* Safari & Android Browser */
{
.sample {
background-size: contain;
background-image: url(icon2x.png);
}
}
คุณยังใช้ไวยากรณ์ความกว้างขั้นต่ำเพื่อแสดงรูปภาพอื่นๆ ได้โดยขึ้นอยู่กับขนาดวิวพอร์ต เทคนิคนี้มีข้อดีที่รูปภาพจะไม่ได้รับการดาวน์โหลดหากคำค้นหาสื่อไม่ตรงกัน เช่น ระบบจะดาวน์โหลด bg.png และนําไปใช้กับ body เท่านั้นหากความกว้างของเบราว์เซอร์คือ 500px ขึ้นไป
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
ใช้ SVG สำหรับไอคอน
เมื่อเพิ่มไอคอนลงในหน้า ให้ใช้ไอคอน SVG หากทำได้ หรือในบางกรณีจะใช้อักขระ Unicode
สรุป
- ใช้ SVG หรือ Unicode สำหรับไอคอนแทนรูปภาพแรสเตอร์
แทนที่ไอคอนธรรมดาด้วย Unicode
แบบอักษรจำนวนมากรองรับอักขระ Unicode มากมายที่นำมาใช้แทนรูปภาพได้ แบบอักษร Unicode จะปรับขนาดได้ดูดีและดูดี ไม่สำคัญเลยว่าจะใหญ่หรือใหญ่แค่ไหนบนหน้าจอ
นอกเหนือจากชุดอักขระปกติแล้ว Unicode อาจมีสัญลักษณ์สำหรับลูกศร (←), โอเปอเรเตอร์ทางคณิตศาสตร์ (score), รูปทรงเรขาคณิต (★), รูปควบคุม (▶), สัญกรณ์เพลง (♬), ตัวอักษรกรีก (บัญญัติ) หรือตัวหมากรุก (♞)
การรวมอักขระ Unicode จะทำในลักษณะเดียวกับเอนทิตีที่มีชื่อ &#XXXX โดยที่ XXXX แทนจำนวนอักขระ Unicode เช่น
You're a super ★
คุณคือสุดยอด ★
แทนที่ไอคอนที่ซับซ้อนด้วย SVG
สำหรับข้อกำหนดไอคอนที่ซับซ้อนยิ่งขึ้น โดยทั่วไปแล้วไอคอน SVG จะมีน้ำหนักเบา ใช้งานง่าย และจัดรูปแบบด้วย CSS ได้ SVG มีข้อดีมากกว่ารูปภาพแรสเตอร์หลายประการดังนี้
- เป็นกราฟิกเวกเตอร์ที่สามารถปรับขนาดได้ไม่รู้จบ
- เอฟเฟกต์ CSS เช่น สี แสงเงา ความโปร่งใส และภาพเคลื่อนไหว จะตรงไปตรงมา
- สามารถในบรรทัดรูปภาพ SVG ได้โดยตรงในเอกสาร
- มีความหมาย
- ทำให้เข้าถึงได้ง่ายขึ้นด้วยแอตทริบิวต์ที่เหมาะสม
With SVG icons, you can either add icons using inline SVG, like
this checkmark:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
</svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.
ใช้แบบอักษรไอคอนอย่างระมัดระวัง
แบบอักษรของไอคอนเป็นที่นิยมและใช้งานง่าย แต่มีข้อเสียบางประการเมื่อเทียบกับไอคอน SVG ดังนี้
- เป็นกราฟิกเวกเตอร์ที่สามารถปรับขนาดได้ไม่รู้จบ แต่อาจมีการลบรอยหยักซึ่งจะทำให้ไอคอนไม่คมชัดตามที่คาดไว้
- การจัดรูปแบบที่จำกัดด้วย CSS
- การวางตำแหน่งพิกเซลที่สมบูรณ์แบบอาจเป็นเรื่องยาก ทั้งนี้ขึ้นอยู่กับความสูงบรรทัด ระยะห่างของตัวอักษร ฯลฯ
- ไม่ใช่ความหมายและอาจใช้กับโปรแกรมอ่านหน้าจอหรือเทคโนโลยีความช่วยเหลือพิเศษอื่นๆ ได้ยาก
- หากไม่ได้กำหนดขอบเขตอย่างเหมาะสม อาจทำให้ไฟล์มีขนาดไฟล์ใหญ่เมื่อใช้ไอคอนชุดย่อยที่มีอยู่เท่านั้น
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
มีแบบอักษรของไอคอนแบบใช้ฟรีและที่ต้องซื้อหลายร้อยแบบ เช่น Font Awesome, Pictos และ Glyphicons
อย่าลืมสร้างความสมดุลระหว่างน้ำหนักของคำขอ HTTP และขนาดไฟล์กับความต้องการไอคอน เช่น หากคุณต้องการไอคอนเพียงไม่กี่ไอคอน การใช้รูปภาพหรือสไปรท์รูปภาพอาจดีกว่า
เพิ่มประสิทธิภาพของรูปภาพ
รูปภาพต่างๆ มักกินพื้นที่ส่วนใหญ่ของไบต์ที่ดาวน์โหลด และมักจะกินพื้นที่อย่างมากในการแสดงผลในหน้าเว็บด้วย ด้วยเหตุนี้ การเพิ่มประสิทธิภาพรูปภาพจึงมักช่วยประหยัดไบต์และปรับปรุงประสิทธิภาพของเว็บไซต์ได้อย่างมาก ยิ่งเบราว์เซอร์ต้องดาวน์โหลดน้อยเท่าใด ก็ยิ่งต้องแข่งกับแบนด์วิดท์ของลูกค้าน้อยลง และเบราว์เซอร์ก็จะดาวน์โหลดและแสดงเนื้อหาทั้งหมดได้เร็วขึ้นเท่านั้น
สรุป
- อย่าเพียงแค่สุ่มเลือกรูปแบบรูปภาพ โปรดทำความเข้าใจรูปแบบต่างๆ ที่มีให้และใช้รูปแบบที่เหมาะสมที่สุด
- รวมการเพิ่มประสิทธิภาพรูปภาพและเครื่องมือการบีบอัดไว้ในเวิร์กโฟลว์เพื่อลดขนาดไฟล์
- ลดจำนวนคำขอ HTTP ด้วยการวางรูปภาพที่ใช้บ่อยลงในภาพแบบ Sprite
- หากต้องการปรับปรุงเวลาในการโหลดหน้าเว็บเริ่มต้นและลดน้ำหนักของหน้าเริ่มต้น คุณควรโหลดรูปภาพหลังจากเลื่อนลงมาอยู่ในมุมมองแล้วเท่านั้น
เลือกรูปแบบที่ถูกต้อง
มีรูปภาพ 2 ประเภทที่ต้องพิจารณา ได้แก่ ภาพเวกเตอร์และภาพแรสเตอร์
สำหรับรูปภาพแรสเตอร์ คุณต้องเลือกรูปแบบการบีบอัดที่เหมาะสมด้วย เช่น GIF, PNG, JPG
รูปภาพแรสเตอร์ เช่น ภาพถ่ายและรูปภาพอื่นๆ จะแสดงเป็นตารางที่มีจุดแต่ละจุดหรือพิกเซล รูปภาพแรสเตอร์มักจะมาจากกล้องหรือเครื่องสแกน หรือสร้างในเบราว์เซอร์ด้วยองค์ประกอบ canvas เมื่อรูปภาพใหญ่ขึ้น ขนาดไฟล์ก็จะเพิ่มขึ้นตามไปด้วย เมื่อปรับขนาดใหญ่กว่าขนาดเดิม ภาพแรสเตอร์จะเบลอเนื่องจากเบราว์เซอร์ต้องคาดเดาวิธีเติมพิกเซลที่ขาดหายไป
ภาพเวกเตอร์ เช่น โลโก้และภาพลายเส้น จะถูกกำหนดโดยชุดของเส้นโค้ง เส้น รูปร่าง และสีเติม ภาพเวกเตอร์สร้างขึ้นด้วยโปรแกรมต่างๆ เช่น Adobe Illustrator หรือ Inkscape และบันทึกในรูปแบบเวกเตอร์ เช่น SVG เนื่องจากรูปภาพเวกเตอร์สร้างขึ้นจากแบบพื้นฐานที่ไม่ซับซ้อน จึงสามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพหรือขนาดไฟล์
เมื่อเลือกรูปแบบที่เหมาะสม คุณควรคำนึงถึงทั้งที่มาของรูปภาพ (แรสเตอร์หรือเวกเตอร์) และเนื้อหา (สี ภาพเคลื่อนไหว ข้อความ ฯลฯ) ไม่มีรูปแบบใดที่เหมาะกับรูปภาพทุกประเภท โดยแต่ละประเภทก็มีจุดแข็งและจุดอ่อนของตนเอง
เริ่มต้นจากหลักเกณฑ์เหล่านี้เมื่อเลือกรูปแบบที่เหมาะสม
- ใช้
JPGสำหรับรูปภาพ - ใช้
SVGสำหรับภาพเวกเตอร์และกราฟิกสีทึบ เช่น โลโก้และภาพลายเส้น หากไม่มีภาพเวกเตอร์ ให้ลองใช้WebPหรือPNG - ใช้
PNGแทนGIFเนื่องจากจะให้สีได้มากกว่าและมีอัตราส่วนการบีบอัดที่ดีขึ้น - สำหรับภาพเคลื่อนไหวขนาดยาว ให้ใช้
<video>ซึ่งให้คุณภาพของรูปภาพที่ดีกว่าและให้ผู้ใช้ควบคุมการเล่นได้
ลดขนาดไฟล์
คุณสามารถลดขนาดไฟล์ภาพลงอย่างมากได้ด้วย "หลังการประมวลผล" รูปภาพหลังจากบันทึก มีเครื่องมือมากมายสำหรับการบีบอัดรูปภาพ เช่น แบบไม่สูญเสียและไม่สูญเสียข้อมูล, รูปภาพออนไลน์, GUI และบรรทัดคำสั่ง หากเป็นไปได้ วิธีที่ดีที่สุดคือการลองใช้ การเพิ่มประสิทธิภาพรูปภาพอัตโนมัติเพื่อให้อยู่ในขั้นตอนการทำงานของคุณ
มีเครื่องมือมากมายที่สามารถดำเนินการบีบอัดไฟล์ JPG และ PNG แบบไม่สูญเสียรายละเอียดเพิ่มเติมโดยไม่ส่งผลกระทบต่อคุณภาพของรูป สำหรับ JPG ให้ลองใช้ jpegtran หรือ jpegoptim (ใช้งานได้ใน Linux เท่านั้น เรียกใช้ด้วยตัวเลือก --strip-all) สำหรับ PNG ให้ลองใช้ OptiPNG หรือ PNGOUT
ใช้ภาพแบบ Sprite
การวาด CSS เป็นเทคนิคที่รวมรูปภาพจำนวนหนึ่งเข้าด้วยกันเป็นรูปภาพ "ภาพต่อเรียง" ภาพเดียว จากนั้นคุณจะใช้รูปภาพแต่ละรูปได้โดยการระบุภาพพื้นหลังสำหรับองค์ประกอบ (ภาพต่อเรียง) บวกกับออฟเซ็ตเพื่อแสดงส่วนที่ถูกต้อง
.sprite-sheet {
background-image: url(sprite-sheet.png);
width: 40px;
height: 25px;
}
.google-logo {
width: 125px;
height: 45px;
background-position: -190px -170px;
}
.gmail {
background-position: -150px -210px;
}
.maps {
height: 40px;
background-position: -120px -165px;
}
การสร้างภาพแยกเป็นข้อได้เปรียบในการลดจำนวนดาวน์โหลดที่จำเป็นในการถ่ายภาพหลายๆ ภาพโดยที่ยังคงเปิดใช้การแคชได้
ลองใช้การโหลดแบบ Lazy Loading
การโหลดแบบ Lazy Loading ช่วยให้โหลดหน้าเว็บยาวๆ ที่มีรูปภาพจำนวนมากในครึ่งหน้าล่างได้อย่างมาก โดยจะโหลดตามความจำเป็นหรือเมื่อเนื้อหาหลักโหลดและแสดงผลเสร็จแล้ว นอกจากการปรับปรุงประสิทธิภาพแล้ว การใช้การโหลดแบบ Lazy Loading ยังสร้างประสบการณ์การเลื่อนได้ไม่รู้จบ
โปรดระมัดระวังเมื่อสร้างหน้าที่เลื่อนได้ไม่รู้จบ เนื่องจากเนื้อหาจะโหลดทันทีที่มองเห็นได้ เครื่องมือค้นหาจึงอาจไม่เห็นเนื้อหานั้น นอกจากนี้ ผู้ใช้ที่กำลังมองหาข้อมูลที่คาดว่าจะเห็นในส่วนท้ายก็จะไม่เห็นส่วนท้ายเนื่องจากระบบโหลดเนื้อหาใหม่เสมอ
หลีกเลี่ยงรูปภาพโดยสิ้นเชิง
บางครั้งรูปภาพที่ดีที่สุดก็อาจไม่ใช่รูปภาพเลย ใช้ความสามารถดั้งเดิมของเบราว์เซอร์เพื่อให้มีฟังก์ชันการทำงานที่เหมือนหรือคล้ายกันเมื่อเป็นไปได้ เบราว์เซอร์จะสร้างภาพซึ่งก่อนหน้านี้เคยมี รูปภาพที่จำเป็นต้องใช้ ซึ่งหมายความว่าเบราว์เซอร์ไม่จำเป็นต้องดาวน์โหลดไฟล์รูปภาพแยกอีกต่อไป ซึ่งจะป้องกันรูปภาพที่มีขนาดไม่เหมาะสม คุณสามารถใช้ Unicode หรือแบบอักษรไอคอนพิเศษในการแสดงผลไอคอนได้
วางข้อความในมาร์กอัปแทนการฝังในรูปภาพ
หากเป็นไปได้ ข้อความควรเป็นข้อความและไม่ฝังลงในรูปภาพ ตัวอย่างเช่น การใช้รูปภาพสำหรับพาดหัวหรือการวางข้อมูลติดต่อ เช่น หมายเลขโทรศัพท์หรือที่อยู่ ลงในรูปภาพโดยตรงจะทำให้ผู้ใช้ไม่สามารถคัดลอกและวางข้อมูล เนื่องจากจะทำให้โปรแกรมอ่านหน้าจอไม่สามารถเข้าถึงข้อมูลได้ และโปรแกรมเหล่านั้นไม่ตอบสนอง แต่ให้วางข้อความในมาร์กอัป และหากจำเป็นให้ใช้เว็บฟอนต์เพื่อให้ได้สไตล์ที่ต้องการ
ใช้ CSS เพื่อแทนที่รูปภาพ
เบราว์เซอร์ที่ทันสมัยสามารถใช้ฟีเจอร์ CSS เพื่อสร้างสไตล์ที่ก่อนหน้านี้ต้องมีรูปภาพที่จำเป็น เช่น การไล่ระดับสีที่ซับซ้อนสร้างขึ้นได้โดยใช้พร็อพเพอร์ตี้ background, สร้างเงาได้โดยใช้ box-shadow และสามารถเพิ่มมุมโค้งมนด้วยพร็อพเพอร์ตี้ border-radius
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam Placerat egestas nisl sed sollicitudin Fusce Placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.
<style>
div#noImage {
color: white;
border-radius: 5px;
box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
}
</style>
โปรดทราบว่าการใช้เทคนิคเหล่านี้จำเป็นต้องมีรอบการแสดงผล ซึ่งอาจมีความสำคัญบนอุปกรณ์เคลื่อนที่ หากใช้มากเกินไป คุณจะสูญเสียสิทธิประโยชน์ที่อาจได้รับและอาจบั่นทอนประสิทธิภาพ