ความคิดเห็นจากผู้ตอบแบบสำรวจเกี่ยวกับเทคนิคต่างๆ ในการเพิ่มประสิทธิภาพรูปภาพ
โพสต์นี้แสดงความคิดเห็นรูปแบบอิสระที่ Google Web DevRel ได้รับในแบบสำรวจเทคนิคการเพิ่มประสิทธิภาพรูปภาพช่วงฤดูร้อนปี 2019 มีผู้ขอให้ตอบกลับผ่านหลักพื้นฐานในการทำเว็บไซต์และ @ChromiumDev แรงจูงใจในการตอบแบบสำรวจคือการค้นหาเหตุผลที่เว็บไซต์ส่วนใหญ่ไม่ทำตามแนวทางปฏิบัติแนะนำในการเพิ่มประสิทธิภาพรูปภาพ แม้ว่าจะดูเป็นวิธีง่ายๆ ในการปรับปรุงประสิทธิภาพก็ตาม ข้อมูลคำตอบไม่ได้แสดงที่นี่เนื่องจากมีข้อบกพร่องในระเบียบวิธีแบบสำรวจ
ผู้ชม
- หากคุณเป็นนักพัฒนาเว็บ โพสต์นี้อาจมีประโยชน์สำหรับการค้นพบเทคนิคการเพิ่มประสิทธิภาพรูปภาพใหม่หรือรายละเอียดว่านักพัฒนาเว็บอื่นๆ ช่วยแก้ปัญหาที่คุณพบอยู่ได้อย่างไร รวมถึงค่าใช้จ่าย ประโยชน์ และข้อจำกัดของแต่ละเทคนิค
- หากคุณเป็นผู้ให้บริการรูปภาพหรือผู้ให้บริการ CDN รูปภาพ การโพสต์นี้อาจช่วยให้คุณพบโอกาสใหม่ในตลาด
- หากคุณเป็นเฟรมเวิร์ก เครื่องมือสร้าง หรือนักพัฒนา CMS โพสต์นี้อาจทำให้คุณมีไอเดียเกี่ยวกับฟีเจอร์ใหม่ๆ ที่จะนำไปปฏิบัติ
ความคิดเห็น
WebP
- "ฉันชอบ WebP แต่ก็ยังไม่พร้อม นอกจากนี้ WordPress ยังไม่รองรับ WebP Photoshop แอปหนึ่งที่ได้รับความนิยมมากที่สุดตัวหนึ่งไม่รองรับ WebP อีกต่อไป เราจึงใช้การบีบอัดรูปของแอปหรือบริการของบุคคลที่สามไม่ได้"
- "ทำให้ WebP ใช้งานได้ใน Safari"
- "ผมอยากใช้ WebP ถ้าส่งออกไฟล์จาก Photoshop/Figma/Sketch และเบราว์เซอร์ทั้งหมดที่รองรับได้" [หมายเหตุ: Sketch รองรับ WebP]
- "โซลูชันการจัดรูปแบบรุ่นถัดไปคงจะดีมาก"
- "อย่าพุช WebP อย่างหนักหน่วงเมื่อเบราว์เซอร์มีการรองรับไม่ดี และพิจารณาถึงความจำเป็นในการใช้ PNG แทน JPEG สำหรับภาพหน้าจอ"
- "Google เอกสารไม่รองรับ WebP"
- "เราจะใช้ WebP เพียงอย่างเดียว แต่ก็กังวลเรื่องความเข้ากันได้ของเบราว์เซอร์"
- "ก่อนอื่นให้แก้ไขความเข้ากันได้ของเบราว์เซอร์ แล้วอัปเดตเบราว์เซอร์เดิม หรือเพิ่มการแก้ไขเดิมลงไป จากนั้นผู้ใช้ก็จะมีแนวโน้มที่จะหันมาใช้รูปภาพประเภทใหม่ๆ อย่างเช่น WebP..."
- "สนับสนุนให้นักพัฒนาปลั๊กอิน/ธีมพิจารณาที่จะสนับสนุน WebP และรูปภาพรุ่นถัดไปอื่นๆ เพื่อให้ผู้ที่ไม่ใช่นักพัฒนาซอฟต์แวร์ไม่ต้องคอยจัดการเอง"
รูปภาพ SVG และเวกเตอร์
- "ถ้าเป็นไปได้ ฉันใช้ SVG (ภาพเคลื่อนไหว) gatsby-image ช่วยแก้ไขปัญหาได้มาก แต่เมื่อคุณเจาะลึกถึงสิ่งที่ได้ทำไป ก็ไม่สมเหตุสมผลอย่างสิ้นเชิงที่เว็บไซต์ปกติควรจะสร้างอะไรบางอย่างขึ้นมาเพื่อให้รูปภาพทำงานได้อย่างถูกต้อง เบราว์เซอร์ควรจะมีหน้าที่รับผิดชอบในส่วนนี้มากขึ้น"
- "เป็นไปได้ไหมที่จะบันทึกวิธีสร้างภาพเคลื่อนไหว SVG ด้วย lottie.js"
- "เราพยายามใช้รูปภาพ JPEG ที่มีความละเอียดสูงและมีขนาดต่ำในเว็บไซต์ของเราเป็นส่วนใหญ่ เพื่อหลีกเลี่ยงเวลาที่ใช้ในการโหลด และยังต้องใช้ SVG หากจำเป็นเพื่อมอบคุณภาพของการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์"
- "เราพยายามใช้กราฟิกเวกเตอร์ที่เพิ่มประสิทธิภาพสำหรับทุกรูปภาพ ยกเว้นรูปภาพ หากเป็นไปได้"
รูปภาพรูปแบบอื่นๆ
- "เรา [ต้อง] ให้ความรู้แก่ผู้คนให้เลิกใช้ GIF ได้ดียิ่งขึ้น"
การโหลดแบบ Lazy Loading
- "โปรดคำนึงถึงผู้ใช้เมื่อพิจารณาฟีเจอร์ เช่น การโหลดแบบ Lazy Loading ด้วย เพราะฟีเจอร์นี้มักจะน่ารำคาญ"
- "โปรดทำให้แอตทริบิวต์การโหลดแบบ Lazy Loading ใช้งานได้กับภาพพื้นหลัง"
- "เฟรมควรประมวลผลเนื้อหาได้ดีกว่าเดิม"
- "เราเปลี่ยนจากการโหลดแบบ Lazy Loading มาเป็นเวลานานแล้ว รายงานผู้ใช้เกี่ยวกับรูปภาพและเว็บไซต์หลายล้านรายการ "ไม่โหลด" เราได้สรุปให้ทีมเข้าใจกัน ผู้ใช้ที่ไม่เชี่ยวชาญด้านเทคนิคจะอธิบายปัญหาได้ยาก"
- "ฉันอยากจะทำความเข้าใจการใช้ Intersection Observer API สำหรับการโหลดแบบ Lazy Loading ให้มากขึ้นแทนที่จะใช้เทคนิคแบบเดิมๆ"
- "วิธีนี้มีประโยชน์สำหรับฉัน: pwafire.org/developer/codelabs/progressive-loading."
ภาพพื้นหลัง
- "ฉันมักโหลดรูปภาพเป็นพื้นหลังใน CSS"
- "แท็ก
<img>
มีปัญหาและควบคุมรายละเอียดได้ยาก โดยเฉพาะกับเนื้อหาที่ผู้ใช้ส่ง เราใช้<div>
และการจัดรูปแบบภาพพื้นหลังบ่อยกว่ามาก เนื่องจากทำให้ใช้ขนาดพื้นหลัง ตำแหน่งพื้นหลัง และป้องกันการบันทึกรูปภาพได้ด้วยการคลิกขวา"
ความโปร่งใส
- "ในปี 2019 แล้ว JPG จะยังมีภาพไม่โปร่งใสแบบอัลฟ่าได้อย่างไร"
- "ฉันใช้ PNG สำหรับภาพถ่ายเฉพาะเมื่อฉันต้องการพื้นหลังโปร่งใสเท่านั้น"
ตัวยึดตำแหน่งรูปภาพคุณภาพต่ำ (LQIP)
- "เราใช้ LQIPS และเป็นเทคนิคที่ยอดเยี่ยมในการทำให้ผู้เข้าชมมีส่วนร่วมอยู่เสมอโดยไม่ต้องโหลดรูปภาพคุณภาพสูงตั้งแต่เนิ่นๆ"
การแสดง
- "จริงๆ แล้วเราพบปัญหาด้านประสิทธิภาพเกี่ยวกับรูปภาพเมื่อเร็วๆ นี้ เมื่อผู้ใช้เลื่อนลงมาที่เว็บไซต์ เราจะแสดงการ์ด 60 รายการถัดไปที่มีภาพขนาดย่อ เนื่องจากมีขีดจำกัดการเชื่อมต่อ 6 ใบในโดเมนเดียวกัน ระบบจึงบล็อกภาพปก รวมถึงส่งคำขอ AJAX ถัดไปให้รับการ์ด 60 ใบถัดไปหากผู้ใช้เลื่อนลงต่อ"
- "เราอยากใช้ HTTP/2 แต่ลูกค้าส่วนใหญ่ของเราใช้ IE11! เราจึงลองพิจารณาชาร์ดดิ้ง / โหลดคำขอข้อมูล JSON ของ AJAX จากโดเมนอื่น"
ขนาด
- "ขออภัยสำหรับความเป็นธรรมชาติ การใช้ประโยชน์จากความสูง/ความกว้างดูจะดีกว่า"
- "กำลังหาวิธีสร้างขนาดที่เล็กลง ตอนนี้อยู่ที่ประมาณ 12 อักขระ"
- "การปรับขนาดรูปภาพแบบไดนามิกนั้นทำได้ยากมากและเป็นไปไม่ได้เลยหากไม่มี JS"
- "เครื่องมืออย่าง responsivebreakpoints.com เหมาะสำหรับ web.dev :)"
รูปภาพคุณภาพสูงและมีความละเอียดสูง
- "วิธีดาวน์โหลดรูปภาพที่บีบอัดโดยไม่สูญเสียคุณภาพของ DPI"
- "เราเป็นบริษัทจัดการเอกสาร แอปของเราจัดการรูปภาพที่สแกนความละเอียดสูงได้นับล้านๆ ภาพ ซึ่งโดยทั่วไปจะเป็น TIFF หรือ PDF"
- "มันเป็นเรื่องยุ่งยาก ไฟล์ img ความละเอียดสูง จำเป็นสำหรับรูปแบบการพิมพ์ และจะต้องปรับให้เหมาะกับเว็บ การลดขนาดรูปภาพสำหรับเว็บเป็นเรื่องยุ่งยาก แต่เป็นอุปสรรคต่อการแสดงหากผู้เขียนจัดหาเฉพาะไฟล์ขนาดเล็กสำหรับรูปภาพที่เหมาะสำหรับการเผยแพร่ฉบับพิมพ์เท่านั้น เราจะเสนอข้อความที่หลากหลายเกี่ยวกับข้อกำหนดในการส่งต้นฉบับพร้อมอาร์ตเวิร์ก หลังจากนั้น เราก็จะเริ่มใช้เวิร์กโฟลว์ที่ซับซ้อนสำหรับการแปรรูปวัสดุเหล่านั้น"
ความสามารถของเบราว์เซอร์
- "การครอบตัด src ที่ปรับเปลี่ยนตามอุปกรณ์โดยอัตโนมัติจากเบราว์เซอร์เป็นฟีเจอร์ [ในตัว] จะมีประโยชน์อย่างยิ่ง เนื่องจากต้องใช้เวลาในการครอบตัดรูปภาพทั้งหมดเป็น 4 ขนาดและเขียนมาร์กอัปทั้งหมด ถ้าเราสามารถอัปโหลดรูปภาพขนาดใหญ่ 1 รูป และเขียนแท็กรูปภาพง่ายๆ เบราว์เซอร์จะสร้างแอตทริบิวต์ src หลายตัวให้โดยอัตโนมัติ ซึ่งจะเป็นฟีเจอร์ที่มีประสิทธิภาพสูงสุด"
- "โดยส่วนตัวแล้ว ฉันพบปัญหาในการหลีกเลี่ยงการปรับเปลี่ยนหน้าเว็บเมื่อ CSS ตั้งค่ารูปภาพด้วยรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ (ความกว้างสูงสุด: 100% ความสูงอัตโนมัติหรือความสูง: ความกว้าง: 100% ความสูงอัตโนมัติ) โดยเฉพาะเมื่อใช้ร่วมกับทิศทางศิลปะจากแท็กรูปภาพ/รูปภาพแบบปรับขนาดได้ วิธีที่ดีที่สุดในการหลีกเลี่ยงการใช้ "การแฮ็ก Padding เชิงลบ" สำหรับอัตราส่วนรูปภาพคงที่ แล้ววางตำแหน่งรูปภาพไว้ในช่องอัตราส่วนนี้ การรองรับเบราว์เซอร์/การจัดการภาพที่ตอบสนองตามอุปกรณ์ได้ดีขึ้นก็จะช่วยได้มาก!"
- "โปรดปิดใช้ "เล่นอัตโนมัติ" ของ GIF โดยดึงข้อมูลเฉพาะเฟรมแรก"
CDN และบริการรูปภาพ
- "Google ควรให้บริการ CDN ฟรี เช่น Cloudflare"
- "คงจะดีถ้ามีเครื่องมือเพิ่มเติมในการตั้งค่าการปรับขนาดแบบไดนามิกและ CDN กับผู้ให้บริการรายต่างๆ น่าจะดี"
- "รูปภาพที่บีบอัดขนาดใหญ่เกินขนาด 1 รูปเป็นโซลูชันที่ดีโดยไม่มีค่าใช้จ่ายในการผลิตเพิ่มเติม คุณต้องมีภาพที่มีความกว้างประมาณ 1,000 พิกเซลสำหรับอุปกรณ์เคลื่อนที่ (ความกว้างในการแสดงผล 500 พิกเซล) ซึ่งเป็นขนาดที่คุณต้องการสำหรับจอแสดงผลขนาดใหญ่/ที่ไม่ใช่เรตินา ฉันคิดว่า CDN เพื่อปรับขนาดรูปภาพเป็นโซลูชันที่แย่มาก แต่ฉันเคยใช้มาก่อนแล้ว CMS ควรจัดการเรื่องการปรับขนาด ซึ่งมีความซับซ้อนเกินกว่าจะตั้งค่าได้ โซลูชันเดียวนับเป็นความประนีประนอมที่ดี (สำหรับตอนนี้)"
- "CloudFlare จะปรับขนาดรูปภาพโดยอัตโนมัติให้ตรงกับการแสดงผลของผู้ใช้ เราจึงสามารถประหยัดเวลาในการโหลดได้ เนื่องจากรูปภาพจะโหลดโดยสัมพันธ์กับการแสดงผลของผู้ใช้ ตัวอย่างเช่น หากผู้ใช้กำลังใช้โทรศัพท์ โทรศัพท์จะไม่โหลดในพื้นหลังขนาดบนเดสก์ท็อป"
- "Cloudflare ทำงานนี้ในเบื้องหลังโดยที่เราไม่ต้องดำเนินการใดๆ ยกเว้นช่องทำเครื่องหมายในแผงการตั้งค่าของเรา"
- "ขอย้ำอีกครั้งว่าเหตุผลเดียวที่ฉันสามารถใช้ srcset ได้สำเร็จ ฯลฯ ก็เพราะความสะดวกของระบบคลาวด์ แต่ Cloudary กลับมีราคาแพงและทำได้เร็วมาก จึงให้ความรู้สึกว่าเป็นช่องโหว่หลักในการทดสอบการพัฒนา"
- "เราต้องการวิธีครอบตัดรูปภาพโดยอัตโนมัติได้อย่างง่ายดาย เพื่อให้รูปภาพใช้สัดส่วนภาพที่ต่างกันในบริบทต่างๆ ได้"
- "และยังใช้รูปภาพจากผู้ให้บริการรายอื่นอย่าง Unsplash ซึ่งมีการควบคุมความละเอียด คุณภาพ และการบีบอัดได้น้อยกว่ามาก"
CMS, แพลตฟอร์ม และเฟรมเวิร์ก
- "ฉันยังพยายามหาวิธีที่ดีที่สุดในการใช้รูปภาพเมื่อสร้างเว็บไซต์โดยใช้ CMS ผู้เขียนมักกำหนดค่ารูปภาพที่มีขนาดต่างกันและคาดว่ารูปภาพจะไม่ย่อหรือปรับขนาด ฉันไม่แน่ใจว่าตั้งค่า max-width หรือ max-height ในรูปภาพได้หรือไม่
- "เราเคยใช้ภาพ gatsby-image สำหรับโครงการล่าสุดไม่กี่โครงการและไม่เคยต้องเสียเวลาดู"
- "รูปภาพมักเป็นส่วนที่ยากเนื่องจากผู้ใช้ปลายทางจะนำรูปภาพเหล่านี้ไปใส่ใน CMS บางครั้งรูปภาพอาจใช้ขนาด รูปแบบใดก็ได้ และบางครั้งก็ใช้รูปภาพต้นฉบับในรูปแบบรูปภาพที่เหมาะสมและหลายขนาดไม่ได้"
- "รูปภาพดูแลรักษายากเนื่องจากระบบของเราเพิ่มการควบคุมด้วยตนเองได้ยาก เว้นแต่เหตุการณ์จะเกิดขึ้นโดยอัตโนมัติโดยไม่ส่งผลกระทบต่อความละเอียด นอกจากนี้ สำหรับเรา รูปภาพดูไม่ถูกต้องในอุปกรณ์เคลื่อนที่กับเดสก์ท็อป"
- "ฉันช่วยผู้ใช้เพิ่มประสิทธิภาพเว็บไซต์ (WordPress) ปัญหาใหญ่ที่สุดที่พบในรูปภาพคือ ต้องอาศัย CDN หรือปลั๊กอินในการสร้าง WebP ซึ่งนักพัฒนาธีมต้องเขียนโค้ด srcset/picture อย่างถูกต้อง ปลั๊กอินการโหลดแบบ Lazy Loading ส่วนใหญ่โหลดช้า และทำให้เกิด UX ที่ไม่ดี ภาพพื้นหลังใช้การโหลดแบบ Lazy Loading ได้ยาก"
ต้นทุน/ผลประโยชน์
- "แนวทางปฏิบัติใหม่มีประสิทธิภาพ แต่เพิ่มเวลาในการพัฒนาเว็บไซต์"
- "การไม่ปฏิบัติตามมาตรฐานใหม่ เช่น srcset และ WebP ยังเกิดขึ้นอย่างช้าๆ แก่บริษัทหลายแห่งที่ติดอันดับ Fortune 500 ด้วยเหตุนี้ หลายบริษัทจึงต่อต้านการเปลี่ยนแปลงนี้ในฐานะค่าใช้จ่ายในการพัฒนาที่ไม่จำเป็นสำหรับเว็บไซต์ปัจจุบัน ผู้ใช้ปลายทาง (UX) ไม่ได้กล่าวถึงหรือรายงานประสิทธิภาพที่เพิ่มขึ้นอย่างกว้างขวาง หากมี จะทำให้บันทึกรูปภาพจากเว็บได้ยากขึ้น"
- "การสร้างและจัดการหลายขนาดและหลายเวอร์ชันมีต้นทุนสูง"
- "ซึ่งใช้พื้นที่บนเซิร์ฟเวอร์ของเรามาก"
SEO
- "การรักษาสมดุลระหว่างคุณภาพของรูปที่ยอมรับได้กับขนาดไฟล์นั้นเป็นเรื่องยาก ในทางตรงกันข้าม ฉันต้องการให้โหลดเร็วเพื่อใช้ประโยชน์จาก SEO แต่รูปภาพคุณภาพต่ำจะส่งผลเสียต่อ UI/UX"
บทบาทของรูปภาพบนเว็บ
- "บนเว็บมีจำนวนมากเกินไป หยุดใช้รูปภาพที่ไม่มีประโยชน์ซึ่งไม่ช่วยเสริมเนื้อหาที่เขียน"
- "ยังจำตอนที่เว็บไม่มีรูปภาพและเราแชร์รูปเซลฟีเป็นศิลปะ ASCII ได้ไหม"
การใช้เครื่องมือ คำแนะนำ มาตรฐาน และแนวทางปฏิบัติแนะนำ: ความไม่พอใจและคำขอ
- [ผู้เข้าร่วม 1 คนเขียนบล็อกโพสต์ตอบกลับแบบสำรวจนี้]
- "ข้อกำหนดดูเหมือนว่าจะเปลี่ยนแปลงอยู่ตลอดเวลา ในฐานะนักพัฒนาเว็บ สิ่งที่น่าหงุดหงิดที่สุดคือต้องใช้เวลานานในการบันทึกรูปภาพไว้ตั้งแต่แรก เราเพิ่มประสิทธิภาพอย่างดีที่สุดเท่าที่ทำได้ จากการตรวจสอบเว็บไซต์ จากนั้นหลายเดือน Google ก็ตัดสินใจว่ารูปภาพควรถูกบีบอัดให้มากยิ่งขึ้นหรือควรอยู่ในรูปแบบอื่น ทำให้เราไม่สามารถมอบโซลูชันที่ดีที่สุดเท่าที่จะเป็นไปได้ให้กับลูกค้าของเรา และทำให้ต้องใช้ต้นทุนสูงแทนเราและเรา ลูกค้าที่เป็นธุรกิจขนาดเล็กของเราบางรายไม่มีงบประมาณสำหรับการแก้ไขรูปภาพและบันทึกภาพอีกครั้งเพื่อให้เป็นไปตามข้อกําหนด เราไม่มีงบประมาณในการดำเนินงานภายในแพ็กเกจการจัดการของบริษัท การเขียนโค้ดเพื่อเรียกรูปภาพขนาดต่างๆ สําหรับอุปกรณ์แต่ละประเภทก็ใช้เวลานานเช่นกัน เราคิดว่าคงจะดีไม่น้อยหากมีระบบการบันทึกรูปภาพที่จะรักษาความสอดคล้องกันไว้เป็นระยะเวลานานกว่า"
- "ใช่ ฉันคิดว่าคุณได้รับการแจ้งเตือน "ให้คำขอมีจำนวนน้อยและขนาดไฟล์เล็ก" ผิดทั้งหมดใน Lighthouse หากเว็บไซต์แสดงผ่าน HTTP1.x ก็ให้แน่ใจ แต่หากเว็บไซต์ให้บริการผ่าน HTTP2 จำนวนคำขอก็มีความสำคัญน้อยกว่าหรือไม่ใช่ปัญหาหากมาจากชื่อโฮสต์เดียวกัน ฉันมีเว็บไซต์ Lite แต่ฉันโหลดไฟล์ WebP ขนาดเล็ก 30 ไฟล์ที่มีคำขอทั้งหมดประมาณ 35 รายการผ่าน HTTP2 ในชื่อโฮสต์เดียวกัน Lighthouse แจ้งว่าปัญหานี้เป็นปัญหา "ให้คำขอมีจำนวนต่ำและขนาดไฟล์เล็ก" แต่เป็นปัญหาที่เร็วมาก และจำนวนคำขอไม่ใช่ปัญหาเนื่องจาก HTTP2 ในชื่อโฮสต์เดียวกัน และแน่นอน ไฟล์มีขนาดเล็กอยู่แล้ว (ส่วนใหญ่อยู่ระหว่าง 1 KB ถึง 2 KB หรือน้อยกว่า) ฉันโหลด Sprite ได้แต่ก็ต้องมีการประมวลผล CSS เพิ่ม ดังนั้น โปรดอัปเดตรายงาน "ให้คำขอมีจำนวนต่ำและขนาดไฟล์เล็ก" ใน Lighthouse เพื่อพิจารณา HTTP2 แทนชื่อโฮสต์เดียวกัน"
- "การที่ผู้คนพยายามจดจำขนาดรูปภาพนั้นเป็นเรื่องยาก"
- "พฤติกรรมข้ามเบราว์เซอร์ยังคงไม่อาจคาดเดาได้ ดังนั้นวิธีแก้ปัญหาที่ง่ายที่สุดจึงมักจะปลอดภัยที่สุด"