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

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

Sam Dutton

โพสต์นี้จะแสดงความคิดเห็นแบบอิสระที่ Google Web DevRel ได้รับในแบบสํารวจเทคนิคการเพิ่มประสิทธิภาพรูปภาพช่วงฤดูร้อนปี 2019 เราขอคำตอบผ่าน Web Fundamentals และ @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

  • "โปรดคำนึงถึงผู้ใช้เมื่อพิจารณาใช้ฟีเจอร์อย่างการโหลดแบบเลื่อนดูทีละหน้า เนื่องจากผู้ใช้จำนวนมากไม่ชอบฟีเจอร์นี้"
  • "โปรดทำให้แอตทริบิวต์การโหลดแบบเลื่อนเวลาทำงานร่วมกับ background-image"
  • "เฟรมเวิร์กควรประมวลผลชิ้นงานได้ดีขึ้นโดยไม่ต้องปรับแต่งใดๆ"
  • "เราได้เปลี่ยนจาก Lazy Loading ไปนานแล้ว ผู้ใช้รายงานรูปภาพและเว็บไซต์หลายล้านรายการ "ไม่โหลด" นี่คือความเข้าใจที่ทีมของเราสรุปไว้ ผู้ใช้ที่ไม่เชี่ยวชาญด้านเทคนิคจะอธิบายปัญหาได้ยาก"
  • "ฉันต้องการทําความเข้าใจการใช้ Intersection Observer API สําหรับการโหลดแบบเลื่อนดูแทนการใช้เทคนิคแบบดั้งเดิม"
  • "วิธีนี้ได้ผลดีกับฉัน pwafire.org/developer/codelabs/progressive-loading"

ภาพพื้นหลัง

  • "ปกติฉันจะโหลดรูปภาพเป็นพื้นหลังใน CSS"
  • "แท็ก <img> มีปัญหาและควบคุมรายละเอียดเล็กๆ น้อยๆ ได้ยาก โดยเฉพาะกับเนื้อหาที่ผู้ใช้ส่ง เราใช้ <div> และการจัดสไตล์ background-image บ่อยกว่ามาก เนื่องจากช่วยให้เราใช้ background-size, background-position และป้องกันไม่ให้ผู้ใช้คลิกขวาเพื่อบันทึกรูปภาพได้"

ความโปร่งใส

  • "ตอนนี้ปี 2019 "ทำไม JPG จึงยังคงไม่มีความโปร่งใสแบบอัลฟ่า"
  • "ฉันใช้ PNG สำหรับรูปภาพก็ต่อเมื่อต้องการพื้นหลังโปร่งใสเท่านั้น"

ตัวยึดตําแหน่งรูปภาพคุณภาพต่ำ (LQIP)

  • "เราใช้ LQIPS ซึ่งเป็นเทคนิคที่ยอดเยี่ยมในการดึงดูดผู้เข้าชมให้มีส่วนร่วมต่อไปโดยไม่ต้องโหลดรูปภาพคุณภาพสูงตั้งแต่เนิ่นๆ"

ประสิทธิภาพ

  • "เราเพิ่งพบปัญหาด้านประสิทธิภาพเกี่ยวกับรูปภาพ เมื่อผู้ใช้เลื่อนลงบนเว็บไซต์ เราจะแสดงการ์ด 60 รายการถัดไปซึ่งมีภาพปก เนื่องจากมีการจำกัดการเชื่อมต่อ 6 ครั้งในโดเมนเดียวกัน ระบบจึงบล็อกภาพขนาดย่อและคำขอ AJAX ถัดไปเพื่อรับการ์ด 60 ใบถัดไปหากผู้ใช้เลื่อนลงต่อไป"
  • "เราอยากใช้ HTTP/2 แต่ลูกค้าส่วนใหญ่ของเราใช้ IE11 เราจึงกำลังพิจารณาการแยกข้อมูลโดเมน / การโหลดคำขอข้อมูล AJAX JSON จากโดเมนอื่น"

การกำหนดขนาด

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

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

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

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

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

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

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

เครื่องมือ คำแนะนำ มาตรฐาน และแนวทางปฏิบัติแนะนำ: ความคับข้องใจและคำขอ

  • [ผู้เข้าร่วม 1 คนเขียนบล็อกโพสต์เพื่อตอบแบบสํารวจนี้]
  • "ข้อกำหนดมีการเปลี่ยนแปลงอยู่ตลอดเวลา ในฐานะนักพัฒนาเว็บ เรารู้สึกหงุดหงิดมากเพราะการบันทึกรูปภาพในตอนแรกนั้นใช้เวลานาน เราเพิ่มประสิทธิภาพอย่างดีที่สุด ตรวจสอบเว็บไซต์ และหลายเดือนต่อมา Google ตัดสินใจว่ารูปภาพอาจบีบอัดได้มากขึ้นหรือต้องอยู่ในรูปแบบอื่น ซึ่งทำให้ไม่สามารถมอบโซลูชันที่ดีที่สุดที่ยั่งยืนให้แก่ลูกค้าได้ และทําให้เกิดความพยายามที่สิ้นเปลืองทั้งกับลูกค้าและเรา ลูกค้าที่เป็นธุรกิจขนาดเล็กบางรายไม่มีงบประมาณให้เราแก้ไขรูปภาพและบันทึกอีกครั้งเพื่อให้เป็นไปตามข้อกำหนด เราไม่มีงบประมาณที่จะทํางานนี้ในแพ็กเกจการจัดการ การเขียนโค้ดเพื่อเรียกใช้รูปภาพขนาดต่างๆ สําหรับอุปกรณ์แต่ละเครื่องยังทําให้เสียเวลาอีกด้วย คงจะดีหากมีระบบการบันทึกรูปภาพที่คงที่เป็นเวลานานขึ้น"
  • "ใช่ ฉันคิดว่าคุณเข้าใจ "ควบคุมให้จำนวนคำขอมีไม่มากและไฟล์มีขนาดเล็ก" ใน Lighthouse ผิดไปทั้งหมด หากเว็บไซต์แสดงผ่าน HTTP1.x จะเป็นเช่นนั้น แต่หากเว็บไซต์แสดงผ่าน HTTP2 จำนวนคำขอจะมีความสำคัญน้อยลงหรือไม่สำคัญเลยหากมาจากชื่อโฮสต์เดียวกัน ฉันมีเว็บไซต์เวอร์ชัน Lite แต่โหลดไฟล์ WebP ขนาดเล็ก 30 ไฟล์ซึ่งมีคำขอทั้งหมดประมาณ 35 รายการผ่าน HTTP2 ในชื่อโฮสต์เดียวกัน Lighthouse แจ้งว่านี่เป็นปัญหา "ควบคุมให้จำนวนคำขอมีไม่มากและการโอนมีขนาดเล็ก" แต่หน้าเว็บนั้นโหลดเร็วมาก และจำนวนคำขอก็ไม่ใช่ปัญหาเนื่องจากมี HTTP2 ในชื่อโฮสต์เดียวกัน ใช่ ไฟล์มีขนาดเล็กอยู่แล้ว (ส่วนใหญ่มีขนาดระหว่าง 1 KB ถึง 2 KB หรือน้อยกว่านั้น) เราโหลดสไปรต์ได้ แต่ต้องคำนวณ CSS เพิ่มเติม ดังนั้นโปรดอัปเดตรายงาน "ควบคุมให้จำนวนคำขอมีไม่มากและการโอนมีขนาดเล็ก" ใน Lighthouse เพื่อพิจารณา HTTP2 ผ่านโฮสต์เนมเดียวกัน"
  • "ผู้คนมักลืมที่จะบีบอัดรูปภาพ"
  • "ลักษณะการทํางานข้ามเบราว์เซอร์ยังคงคาดเดาไม่ได้ ดังนั้นโซลูชันที่ง่ายที่สุดมักจะปลอดภัยที่สุด"