Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

Pete LePage

การออกแบบเว็บที่ปรับเปลี่ยนตามอุปกรณ์หมายความว่าเลย์เอาต์ของเราไม่เพียงแต่จะเปลี่ยนแปลงตามลักษณะของอุปกรณ์เท่านั้น แต่เนื้อหาก็เปลี่ยนแปลงได้เช่นกัน เช่น ในจอแสดงผลความละเอียดสูง (2 เท่า) กราฟิกความละเอียดสูงจะช่วยให้ภาพคมชัด รูปภาพที่มีความกว้าง 50% อาจทำงานได้ดีเมื่อเบราว์เซอร์มีความกว้าง 800 พิกเซล แต่ใช้พื้นที่มากเกินไปในโทรศัพท์ที่มีหน้าจอแคบ และต้องใช้โอเวอร์เฮดแบนด์วิดท์เท่ากันเมื่อปรับขนาดให้พอดีกับหน้าจอที่เล็กลง

การกำกับศิลป์

ในบางครั้ง คุณอาจต้องเปลี่ยนรูปภาพอย่างมาก เช่น เปลี่ยนสัดส่วน ครอบตัด และแม้แต่เปลี่ยนรูปภาพทั้งหมด ในกรณีนี้ การเปลี่ยนรูปภาพมักเรียกว่าการกำกับศิลป์ ดูตัวอย่างเพิ่มเติมได้ที่ responsiveimages.org/demos/

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

คุณทราบหรือไม่ว่ารูปภาพคิดเป็นสัดส่วนมากกว่า 60% ของไบต์โดยเฉลี่ยที่จำเป็นในการโหลดหน้าเว็บ

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

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

หลักสูตรนี้เป็นหลักสูตรฟรีที่เปิดสอนผ่าน Udacity

เข้าร่วมหลักสูตร

รูปภาพในมาร์กอัป

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

สรุป

ใช้ขนาดที่สัมพันธ์กันสำหรับรูปภาพเพื่อป้องกันไม่ให้รูปภาพล้นคอนเทนเนอร์โดยไม่ตั้งใจ
ใช้องค์ประกอบ picture เมื่อต้องการระบุรูปภาพที่แตกต่างกันตามลักษณะของอุปกรณ์ (หรือที่เรียกว่า Art Direction)
ใช้ 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 ทำให้ระบุไฟล์ภาพหลายไฟล์สำหรับลักษณะอุปกรณ์ที่แตกต่างกันได้ง่าย srcset ช่วยให้เบราว์เซอร์เลือกรูปภาพที่ดีที่สุดตามลักษณะของอุปกรณ์ได้ เช่น การใช้รูปภาพ 2x บนจอแสดงผล 2x และอาจใช้รูปภาพ 1x บนอุปกรณ์ 2x เมื่ออยู่ในเครือข่ายที่มีแบนด์วิดท์จำกัดในอนาคต ซึ่งคล้ายกับimage-set ฟังก์ชัน CSS ที่มาพร้อมกับ CSS

<img src="photo.png" srcset="photo@2x.png 2x" ...>

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

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

การกำหนดทิศทางศิลปะในรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ด้วย `picture`

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

หมายเหตุ: องค์ประกอบ picture เริ่มปรากฏในเบราว์เซอร์แล้ว แม้ว่าจะยังไม่พร้อมใช้งานในทุกเบราว์เซอร์ แต่เราขอแนะนำให้ใช้เนื่องจากมีความเข้ากันได้แบบย้อนหลังที่แข็งแกร่งและการใช้งาน Picturefill polyfill ที่เป็นไปได้ ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ ResponsiveImages.org

ใช้องค์ประกอบ 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>

ลองใช้

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

ความกว้างของเบราว์เซอร์	อัตราส่วนพิกเซลของอุปกรณ์	รูปภาพที่ใช้	ความละเอียดที่มีผล
400px	1	`200.jpg`	1 เท่า
400px	2	`400.jpg`	2 เท่า
320px	2	`400.jpg`	2.5 เท่า
600px	2	`800.jpg`	2.67 เท่า
640px	3	`1000.jpg`	3.125x
1100px	1	`800.png`	1.45x

พิจารณาเบรกพอยต์ในรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณา

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

<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. เว็บไซต์ Crews ที่มีรูปภาพสินค้าที่ขยายได้ — J. เว็บไซต์ของ Crew ที่มีรูปภาพสินค้าที่ขยายได้

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

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

เทคนิคอื่นๆ เกี่ยวกับรูปภาพ

รูปภาพที่บีบอัด

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

ลองใช้

การแทนที่รูปภาพ JavaScript

การแทนที่รูปภาพ JavaScript จะตรวจสอบความสามารถของอุปกรณ์และ "ดำเนินการอย่างเหมาะสม" คุณสามารถกำหนดอัตราส่วนพิกเซลของอุปกรณ์ผ่าน window.devicePixelRatio, รับความกว้างและความสูงของหน้าจอ และอาจทำการดักจับการเชื่อมต่อเครือข่ายผ่าน navigator.connection หรือส่งคำขอปลอมได้ เมื่อรวบรวมข้อมูลทั้งหมดนี้แล้ว คุณจะตัดสินใจได้ว่าจะโหลดรูปภาพใด

ข้อเสียอย่างหนึ่งของแนวทางนี้คือการใช้ JavaScript หมายความว่าคุณจะทำให้การโหลดรูปภาพล่าช้าจนกว่าโปรแกรมแยกวิเคราะห์แบบ Look-Ahead จะทำงานเสร็จเป็นอย่างน้อย ซึ่งหมายความว่ารูปภาพจะไม่เริ่มดาวน์โหลดจนกว่าเหตุการณ์ pageload จะเริ่มทำงาน นอกจากนี้ เบราว์เซอร์มักจะดาวน์โหลดทั้งรูปภาพ 1x และ 2x ซึ่งส่งผลให้น้ำหนักหน้าเว็บเพิ่มขึ้น

การแทรกรูปภาพในบรรทัด: แรสเตอร์และเวกเตอร์

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

ภาพแรสเตอร์ เช่น ภาพถ่ายและรูปภาพอื่นๆ จะแสดงเป็นตารางกริดของจุดสีแต่ละจุด รูปภาพแรสเตอร์อาจมาจากกล้องหรือสแกนเนอร์ หรือสร้างขึ้นด้วยองค์ประกอบ Canvas ของ HTML รูปแบบต่างๆ เช่น 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 โดยรูปหนึ่งเป็น Data URI และอีกรูปเป็น SVG

ข้อดีและข้อเสียของการแทรกในบรรทัด

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

ใช้การค้นหาสื่อสำหรับการโหลดรูปภาพแบบมีเงื่อนไขหรืออาร์ตไดเรกชัน

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

ตัวอย่างเช่น ในตัวอย่างด้านล่างนี้ ในหน้าจอขนาดเล็กจะมีการดาวน์โหลดและใช้เฉพาะ 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 เพื่อแสดงรูปภาพความละเอียดสูง

ฟังก์ชัน image-set() ใน CSS ช่วยปรับปรุงพร็อพเพอร์ตี้ลักษณะการทำงาน background ทำให้ระบุไฟล์ภาพหลายไฟล์สำหรับลักษณะอุปกรณ์ที่แตกต่างกันได้ง่าย ซึ่งช่วยให้เบราว์เซอร์เลือกรูปภาพที่ดีที่สุดตามลักษณะของอุปกรณ์ได้ เช่น การใช้รูปภาพ 2x บนจอแสดงผล 2x หรือรูปภาพ 1x บนอุปกรณ์ 2x เมื่ออยู่ในเครือข่ายที่มีแบนด์วิดท์จำกัด

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

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

ใช้การสืบค้นสื่อเพื่อแสดงรูปภาพความละเอียดสูงหรือทิศทางศิลปะ

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

ลองใช้

นอกจากนี้ คุณยังใช้ไวยากรณ์ min-width เพื่อแสดงรูปภาพสำรองตามขนาดวิวพอร์ตได้ด้วย เทคนิคนี้มีข้อดีคือระบบจะไม่ดาวน์โหลดรูปภาพหากการค้นหาสื่อไม่ตรงกัน ตัวอย่างเช่น ระบบจะดาวน์โหลด bg.png และนำไปใช้กับ body ก็ต่อเมื่อความกว้างของเบราว์เซอร์มีขนาด 500 พิกเซลขึ้นไปเท่านั้น

@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 &#9733;

คุณเป็นสุดยอด ★

แทนที่ไอคอนที่ซับซ้อนด้วย 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">.

ลองใช้

ใช้แบบอักษรไอคอนด้วยความระมัดระวัง

ตัวอย่างหน้าเว็บที่ใช้ FontAwesome สำหรับไอคอนแบบอักษร

แบบอักษรไอคอนเป็นที่นิยมและใช้งานง่าย แต่ก็มีข้อเสียบางประการเมื่อเทียบกับไอคอน SVG ดังนี้

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

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; 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

ใช้สไปรท์รูปภาพ

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

.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>

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

การกำกับศิลป์

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

รูปภาพในมาร์กอัป

สรุป

ใช้ขนาดสัมพัทธ์สำหรับรูปภาพ

ปรับปรุง img ด้วย srcset สำหรับอุปกรณ์ที่มี DPI สูง

การกำหนดทิศทางศิลปะในรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ด้วย picture

รูปภาพที่มีขนาดสัมพัทธ์

พิจารณาเบรกพอยต์ในรูปภาพที่ปรับเปลี่ยนตามพื้นที่โฆษณา

ทำให้รูปภาพสินค้าสามารถขยายได้

เทคนิคอื่นๆ เกี่ยวกับรูปภาพ

รูปภาพที่บีบอัด

การแทนที่รูปภาพ JavaScript

การแทรกรูปภาพในบรรทัด: แรสเตอร์และเวกเตอร์

SVG

URI ของข้อมูล

การแทรกใน CSS

ข้อดีและข้อเสียของการแทรกในบรรทัด

รูปภาพใน CSS

สรุป

ใช้การค้นหาสื่อสำหรับการโหลดรูปภาพแบบมีเงื่อนไขหรืออาร์ตไดเรกชัน

ใช้ image-set เพื่อแสดงรูปภาพความละเอียดสูง

ใช้การสืบค้นสื่อเพื่อแสดงรูปภาพความละเอียดสูงหรือทิศทางศิลปะ

ใช้ SVG สำหรับไอคอน

สรุป

แทนที่ไอคอนแบบง่ายด้วย Unicode

แทนที่ไอคอนที่ซับซ้อนด้วย SVG

ใช้แบบอักษรไอคอนด้วยความระมัดระวัง

เพิ่มประสิทธิภาพรูปภาพเพื่อประสิทธิภาพ

สรุป

เลือกรูปแบบที่เหมาะสม

ลดขนาดไฟล์

ใช้สไปรท์รูปภาพ

พิจารณาการโหลดแบบ Lazy Loading

หลีกเลี่ยงการใช้รูปภาพโดยสิ้นเชิง

วางข้อความในมาร์กอัปแทนการฝังในรูปภาพ

ใช้ CSS เพื่อแทนที่รูปภาพ

ปรับปรุง `img` ด้วย `srcset` สำหรับอุปกรณ์ที่มี DPI สูง

การกำหนดทิศทางศิลปะในรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ด้วย `picture`