รูปภาพหนึ่งภาพแทนคำได้ 1, 000 คำ และรูปภาพเป็นส่วนสำคัญของทุกหน้า แต่ก็มักคำนึงถึงจำนวนไบต์ที่ดาวน์โหลดด้วยเป็นส่วนใหญ่ การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ไม่เพียงแต่ทำให้เลย์เอาต์ของเราเปลี่ยนไปตามลักษณะเฉพาะของอุปกรณ์เท่านั้น แต่ยังรวมถึงรูปภาพได้อีกด้วย
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์นั้นนอกจากจะทำให้เลย์เอาต์ของเราเปลี่ยนแปลงได้ตามลักษณะเฉพาะของอุปกรณ์แล้ว เนื้อหายังเปลี่ยนตามได้ด้วย ตัวอย่างเช่น ในจอแสดงผลความละเอียดสูง (2x) กราฟิกความละเอียดสูงจะช่วยให้ภาพมีความคมชัด รูปภาพที่มีความกว้าง 50% อาจใช้งานได้ปกติในกรณีที่เบราว์เซอร์กว้าง 800 พิกเซล แต่ใช้พื้นที่มากเกินไปในโทรศัพท์ที่มีความกว้างน้อย และต้องใช้แบนด์วิดท์เผื่อเท่ากันเมื่อปรับขนาดลงให้พอดีกับหน้าจอขนาดเล็ก
การกำกับศิลป์
หรือในบางครั้งรูปภาพก็อาจต้องเปลี่ยนไปมากด้วยการเปลี่ยนสัดส่วน การครอบตัด หรือการเปลี่ยนรูปภาพทั้งรูป ในกรณีนี้ การเปลี่ยนรูปภาพมักจะเรียกว่า "ทิศทางศิลปะ" ดูตัวอย่างเพิ่มเติมได้ที่ responsiveimages.org/demos/
รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
คุณทราบไหมว่ารูปภาพคิดเป็นกว่า 60% ของไบต์โดยเฉลี่ยที่ต้องใช้ในการโหลดหน้าเว็บ
ในหลักสูตรนี้ คุณจะได้เรียนรู้วิธีจัดการกับรูปภาพบนเว็บสมัยใหม่ เพื่อให้รูปภาพดูดีและโหลดได้อย่างรวดเร็วในทุกอุปกรณ์
ในระหว่างนี้ คุณจะได้ศึกษาทักษะและเทคนิคต่างๆ เพื่อรวมรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์เข้ากับเวิร์กโฟลว์การพัฒนาได้อย่างราบรื่น เมื่อจบหลักสูตร คุณจะได้พัฒนาด้วยรูปภาพที่สามารถปรับเปลี่ยนและตอบสนองต่อขนาดวิวพอร์ตและสถานการณ์การใช้งานที่แตกต่างกัน
นี่คือหลักสูตรฟรีที่ให้บริการผ่าน Udacity
รูปภาพในมาร์กอัป
องค์ประกอบ img มีประสิทธิภาพเพราะดาวน์โหลด ถอดรหัส และแสดงผลเนื้อหา และเบราว์เซอร์ที่ทันสมัยรองรับรูปภาพรูปแบบต่างๆ การรวมรูปภาพที่ทำงานได้ในอุปกรณ์ต่างๆ นั้นไม่แตกต่างจากเดสก์ท็อป และต้องปรับแต่งเล็กน้อยเพื่อสร้างประสบการณ์การใช้งานที่ดี
สรุป
- ใช้ขนาดที่สัมพันธ์กันสำหรับรูปภาพเพื่อป้องกันไม่ให้รูปภาพล้นคอนเทนเนอร์โดยไม่ได้ตั้งใจ
- ใช้องค์ประกอบ
pictureเมื่อคุณต้องการระบุรูปภาพที่แตกต่างกันตามลักษณะเฉพาะของอุปกรณ์ (หรือที่เรียกว่า "ทิศทางศิลปะ) - ใช้
srcsetและข้อบ่งชี้xในองค์ประกอบimgเพื่อให้คำแนะนำถึงเบราว์เซอร์เกี่ยวกับรูปภาพที่ดีที่สุดที่จะใช้เมื่อเลือกความหนาแน่นที่แตกต่างกัน - หากหน้าเว็บมีรูปภาพเพียง 1 หรือ 2 รูปและไม่ได้ใช้รูปภาพเหล่านี้ในส่วนอื่นของเว็บไซต์ ให้พิจารณาใช้รูปภาพในบรรทัดเพื่อลดคำขอไฟล์
ใช้ขนาดที่เกี่ยวข้องสำหรับรูปภาพ
อย่าลืมใช้หน่วยสัมพัทธ์เมื่อระบุความกว้างของรูปภาพเพื่อป้องกันไม่ให้รูปภาพล้นวิวพอร์ตโดยไม่ตั้งใจ ตัวอย่างเช่น width: 50%; ทำให้ความกว้างของรูปภาพเป็น 50% ขององค์ประกอบที่มี (ไม่ใช่ 50% ของวิวพอร์ตหรือ 50% ของขนาดพิกเซลจริง)
เนื่องจาก CSS ทำให้เนื้อหาล้นที่เก็บของคอนเทนเนอร์ได้ คุณอาจต้องใช้ max-width: 100% เพื่อป้องกันไม่ให้รูปภาพและเนื้อหาอื่นๆ ล้น เช่น
img, embed, object, video {
max-width: 100%;
}
อย่าลืมให้คำอธิบายที่มีความหมายผ่านแอตทริบิวต์ alt ในองค์ประกอบ img ซึ่งจะช่วยให้เข้าถึงเว็บไซต์ได้ง่ายขึ้นด้วยการให้บริบทแก่โปรแกรมอ่านหน้าจอและเทคโนโลยีความช่วยเหลืออื่นๆ
ปรับปรุง img ด้วย srcset สำหรับอุปกรณ์ DPI สูง
แอตทริบิวต์ srcset ปรับปรุงลักษณะการทำงานขององค์ประกอบ img ช่วยให้ส่งไฟล์รูปภาพหลายไฟล์สำหรับลักษณะเฉพาะของอุปกรณ์ได้โดยง่าย คล้ายกับ image-set
ฟังก์ชัน CSS
ดั้งเดิมของ CSS คือ srcset จะให้เบราว์เซอร์เลือกรูปภาพที่ดีที่สุดตามลักษณะของอุปกรณ์ เช่น การใช้รูปภาพ 2 เท่าบนจอแสดงผล 2 เท่า และในอนาคตอาจเป็นรูปภาพ 1 เท่าในอุปกรณ์ 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 อีกครั้งโดยขึ้นอยู่กับความละเอียดของอุปกรณ์ สำหรับความกว้างหน้าจอน้อยกว่า 450 พิกเซลและเข้ากันได้แบบย้อนหลังในกรณีที่ไม่รองรับองค์ประกอบ 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 เท่า |
| 600px | 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 อักขระ)
เครื่องมือลากและวาง เช่น 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 เท่าของรูปภาพ 1 เท่า และจะลดขนาดรูปภาพ 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 ยังอาจมีสัญลักษณ์สำหรับลูกศร (←), โอเปอเรเตอร์ทางคณิตศาสตร์ (งศ์มากยิ่งขึ้น), รูปทรงเรขาคณิต (★), รูปการควบคุม (▶), สัญกรณ์ดนตรี (♬), ตัวอักษรกรีก (การแปลภาษา) รวมถึงตัวหมากรุก (♞)
การรวมอักขระ 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 โดยวางรูปภาพที่ใช้บ่อยลงในสไปรท์รูปภาพ
- หากต้องการปรับปรุงเวลาในการโหลดหน้าเว็บครั้งแรกและลดน้ำหนักหน้าเว็บเริ่มต้น ให้พิจารณาการโหลดรูปภาพหลังจากที่เลื่อนลงมาอยู่ในมุมมองแล้วเท่านั้น
เลือกรูปแบบที่เหมาะสม
มีรูปภาพ 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;
}
การสร้างแบบ Sprite มีข้อดีในการลดจำนวนการดาวน์โหลดที่จำเป็นสำหรับการมีรูปภาพหลายรูป แต่ในขณะเดียวกันก็ยังเปิดใช้การแคชได้
ลองใช้การโหลดแบบ 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>
โปรดทราบว่าการใช้เทคนิคเหล่านี้จำเป็นต้องใช้รอบการแสดงผล ซึ่งอาจนานมากในอุปกรณ์เคลื่อนที่ หากใช้มากเกินไป คุณจะสูญเสียประโยชน์ที่อาจได้รับและอาจขัดขวางประสิทธิภาพ