ความคิดเห็นจากแบบสำรวจการเพิ่มประสิทธิภาพรูปภาพของฤดูร้อนปี 2019

ความคิดเห็นจากผู้ตอบแบบสำรวจเกี่ยวกับเทคนิคต่างๆ ในการเพิ่มประสิทธิภาพรูปภาพ

แซม ดัตตัน

โพสต์นี้แสดงความคิดเห็นรูปแบบอิสระที่ 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 มาเป็นเวลานานแล้ว ผู้ใช้รายงานรูปภาพและเว็บไซต์หลายล้านรายการ "NOT 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 เราจึงกำลังสำรวจชาร์ดดิ้ง / โหลดคำขอข้อมูล AJAX JSON ของโดเมนจากโดเมนอื่น"

ขนาด

• "ขออภัยในความไม่สะดวก การใช้ความสูง/ความกว้างน่าจะเหมาะสมกว่าสำหรับฉัน"
• "กำลังหาวิธีสร้างขนาดน้อยลงอยู่ดี ตอนนี้เหลือประมาณ 12 ขนาด"
• "การปรับขนาดรูปภาพแบบไดนามิกทำได้ยากมากและไม่สามารถทำได้หากไม่มี JS"
• "เครื่องมืออย่าง responsivebreakpoints.com ก็เหมาะกับ web.dev :)"

รูปภาพคุณภาพสูงและความละเอียดสูง

• "วิธีดาวน์โหลดบีบอัดรูปภาพโดยไม่สูญเสียคุณภาพ DPI"
• "เราเป็นบริษัทจัดการเอกสาร แอปของเรารองรับรูปภาพที่สแกนความละเอียดสูงหลายล้านภาพ ซึ่งปกติแล้วจะเป็น TIFF หรือ PDF"
• "เป็นเรื่องวุ่นวาย ไฟล์ img ความละเอียดสูงจำเป็นสำหรับรูปแบบสิ่งพิมพ์ ต้องปรับได้ให้เหมาะกับเว็บ คุณไม่จำเป็นต้องลดขนาดรูปภาพสำหรับเว็บ แต่ผู้เขียนจะแสดงไฟล์ขนาดเล็กสำหรับภาพที่ต้องการเผยแพร่สำหรับสิ่งพิมพ์เท่านั้น สิ้นสุดการเขียนข้อความผสมเกี่ยวกับข้อกำหนดในการส่งต้นฉบับพร้อมงานศิลปะ แล้วก็จบลงด้วยเวิร์กโฟลว์ที่ซับซ้อนเพื่อประมวลผลวัสดุเหล่านั้น"

ความสามารถของเบราว์เซอร์

• "การครอบตัดรูปภาพ src ที่ตอบสนองอัตโนมัติจากเบราว์เซอร์เป็นฟีเจอร์ [ในตัว] จะมีประโยชน์มากเพราะจะใช้เวลานานในการครอบตัดรูปภาพทั้งหมดให้เป็น 4 ขนาดและเขียนมาร์กอัปทั้งหมด หากเราสามารถอัปโหลดรูปภาพขนาดใหญ่รูปหนึ่งและเขียนแท็กรูปภาพง่ายๆ เบราว์เซอร์ก็จะสร้างแอตทริบิวต์ src หลายรายการซึ่งจะกลายเป็นฟีเจอร์ที่มีประสิทธิภาพสูงสุดโดยอัตโนมัติ"
• "โดยส่วนตัวแล้ว ฉันมีปัญหาในการหลีกเลี่ยงการจัดเรียงหน้าเว็บใหม่เมื่อ CSS ตั้งค่ารูปภาพด้วย (ความกว้างสูงสุด: 100%; ความสูงอัตโนมัติหรือความสูง: ความกว้าง: 100%; ความสูงอัตโนมัติ) โดยเฉพาะเมื่อใช้ร่วมกับการกำหนดทิศทางศิลปะจากแท็กรูปภาพ/รูปภาพแบบปรับอัตโนมัติ วิธีที่ดีที่สุดในการหลีกเลี่ยงการใช้งาน "การตัดระยะห่างจากขอบเชิงลบ" เพื่อให้มีอัตราส่วนรูปภาพคงที่ จากนั้นให้วางรูปภาพไว้ในช่องอัตราส่วนนี้ การรองรับเบราว์เซอร์/การจัดการรูปภาพที่ตอบสนองตามอุปกรณ์ที่ดีขึ้นจะช่วยได้มากจริงๆ"
• "โปรดปิดใช้ GIF "เล่นอัตโนมัติ" โดยดึงข้อมูลเฉพาะเฟรมแรก"

CDN และบริการรูปภาพ

• "Google ควรให้บริการ CDN ฟรีเหมือน Cloudflare"
• "บางทีเครื่องมือเพิ่มเติมในการตั้งค่าการปรับขนาดแบบไดนามิกและ CDN กับผู้ให้บริการที่แตกต่างกันก็น่าจะเพียงพอ"
• "รูปภาพที่บีบอัดเกินขนาด 1 ภาพเป็นโซลูชันที่ดีมากและไม่มีค่าใช้จ่ายในการผลิตเพิ่มเติม คุณต้องมีรูปภาพที่มีความกว้างประมาณ 1,000 พิกเซลสำหรับอุปกรณ์เคลื่อนที่ (ความกว้างในการแสดงผล 500 พิกเซล) และเป็นขนาดที่คุณต้องการสำหรับจอแสดงผลขนาดใหญ่/เดสก์ท็อปที่ไม่ใช่แบบเรตินาด้วย ฉันคิดว่าการปรับขนาดภาพ CDN เป็นวิธีแก้ปัญหาที่แย่มาก แม้ว่าฉันเคยใช้แล้วก็ตาม CMS ควรรับมือกับการปรับขนาดและที่ซับซ้อนเกินกว่าที่จะตั้งค่าได้ การแก้ปัญหาเพียงโซลูชันเดียวก็เพียงพอแล้ว (สำหรับตอนนี้)"
• "CloudFlare ปรับขนาดรูปภาพอัตโนมัติเพื่อให้ตรงกับหน้าจอของผู้ใช้มากที่สุด เพื่อที่เราจะได้ประหยัดเวลาในการโหลด เพราะภาพจะโหลดโดยเทียบกับการแสดงผลของผู้ใช้ เช่น หากผู้ใช้กำลังใช้โทรศัพท์ ก็จะไม่โหลดในพื้นหลังขนาดเดสก์ท็อป"
• "Cloudflare ดำเนินการดังกล่าวในเบื้องหลังโดยที่เราไม่ต้องดำเนินการใดๆ ยกเว้นการเลือกช่องในแผงการตั้งค่าของเรา"
• "ขอย้ำอีกครั้งว่า เหตุผลเดียวที่ผมสามารถใช้ srcset ฯลฯ ได้สำเร็จก็คือความง่ายของระบบคลาวด์ แต่ Cloudinary มีค่าใช้จ่ายสูงและเร็วสุดๆ จนรู้สึกเหมือนเป็นช่องว่างขนาดใหญ่ของประสบการณ์การพัฒนา"
• "เราต้องการวิธีครอบตัดรูปภาพอัตโนมัติได้ง่ายๆ อย่างชาญฉลาด เพื่อให้ทำงานในสัดส่วนภาพที่ต่างกันในบริบทที่ต่างกันได้"
• "ฉันใช้รูปภาพจากผู้ให้บริการอื่นๆ เช่น Unสถานที่ ซึ่งไม่มีการควบคุมความละเอียด คุณภาพ และการบีบอัดมากนัก"

CMS, แพลตฟอร์ม และเฟรมเวิร์ก

• "ผมยังดิ้นรนที่จะคิดหาวิธีที่ดีที่สุดในการใช้รูปภาพ ตอนที่สร้างเว็บไซต์โดยใช้ CMS ผู้เขียนมักจะกำหนดค่ารูปภาพที่มีขนาดต่างกัน และคาดหวังให้รูปภาพไม่ย่อหรือปรับขนาด ฉันไม่แน่ใจว่าจะตั้งค่าความกว้างสูงสุดหรือความสูงสูงสุดในรูปภาพได้"
• "ได้ใช้ gatsby-image กับ 2-3 โปรเจ็กต์สุดท้ายและไม่เคยมองย้อนกลับไปเลย"
• "รูปภาพมักเป็นส่วนที่ยากเนื่องจากผู้ใช้ปลายทางเป็นผู้ใส่รูปภาพลงใน CMS รูปภาพเหล่านี้อาจใช้ขนาด รูปแบบใดก็ได้ บางครั้งรูปภาพต้นฉบับในรูปแบบรูปภาพที่เหมาะสมและมีขนาดไม่สามารถใช้ได้"
• "รูปภาพดูแลรักษายากเนื่องจากระบบของเราเพิ่มตัวควบคุมด้วยตนเองได้ยาก เว้นแต่กรณีจะเกิดขึ้นโดยอัตโนมัติโดยไม่ส่งผลกระทบต่อความละเอียด นอกจากนี้ รูปภาพบนอุปกรณ์เคลื่อนที่เทียบกับเดสก์ท็อปก็ไม่ถูกต้องสำหรับเรา"
• "ฉันช่วยผู้ใช้เพิ่มประสิทธิภาพเว็บไซต์ (WordPress) ปัญหาใหญ่ที่สุดที่ฉันเห็นในภาพคือ ต้องใช้ CDN หรือปลั๊กอินเพื่อสร้าง WebP โดยนักพัฒนาซอฟต์แวร์ธีมต้องเขียนโค้ดให้โค้ดถูกต้อง ปลั๊กอินการโหลดแบบ 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 มาพิจารณาในชื่อโฮสต์เดียวกัน"
• "ผู้คนต้องเผชิญกับความยากลำบากในการบีบอัดรูปภาพ"
• "พฤติกรรมการใช้งานข้ามเบราว์เซอร์ยังคงคาดเดาไม่ได้ ดังนั้นโซลูชันที่ง่ายที่สุดมักจะปลอดภัยที่สุด"