Smashing Podcast ตอนที่ 39 ด้วย Addy Osmani: Image Optimization

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

ในตอนล่าสุดของ Smashing Podcast เรากำลังพูดถึงการปรับภาพให้เหมาะสมที่สุด เราควรปฏิบัติตามขั้นตอนใดบ้างสำหรับอิมเมจที่มีประสิทธิภาพในปี 2564 ฉันได้พูดคุยกับผู้เชี่ยวชาญ Addy Osmani เพื่อหาคำตอบ

แสดงหมายเหตุ

• “การเพิ่มประสิทธิภาพภาพ” Addy Osmani
• แอดดี้บนทวิตเตอร์
• เว็บไซต์ส่วนตัวของแอด

อัพเดทประจำสัปดาห์

• Meet :has ตัวเลือกพาเรนต์ CSS ดั้งเดิม (และอีกมากมาย)
  เขียนโดย Adrian Bece
• เครื่องมือตรวจสอบ Front-End สามตัวที่ฉันค้นพบเมื่อเร็ว ๆ นี้
  เขียนโดย Stefan Judis
• Boilerplates Front-End และ Starter Kits ที่มีประโยชน์
  เขียนโดย Cosima Mielke
• การออกแบบเว็บทำได้ดีมาก: การใช้เสียง
  เขียนโดย Frederick O'Brien
• เมื่อ CSS ไม่เพียงพอ: ข้อกำหนด JavaScript สำหรับส่วนประกอบที่สามารถเข้าถึงได้
  เขียนโดย Stephanie Eckles

การถอดเสียง

Drew McLellan: เขาเป็นผู้จัดการฝ่ายวิศวกรรมที่ทำงานบน Google Chrome ซึ่งทีมของเขามุ่งเน้นที่ความเร็ว ช่วยให้เว็บทำงานได้อย่างรวดเร็ว อุทิศให้กับชุมชนโอเพ่นซอร์ส ผลงานที่ผ่านมาของเขารวมถึง Lighthouse, Workbox, Yeoman, Critical และการทำ NVC ดังนั้นเราจึงรู้ว่าเขารู้วิธีการเพิ่มประสิทธิภาพเว็บของเขา แต่คุณรู้หรือไม่ว่าเขาต้องการชนะรางวัลออสการ์สาขานักแสดงสมทบหญิงยอดเยี่ยมจากความผิดพลาดทางธุรการ? เพื่อนที่ยอดเยี่ยมของฉัน ยินดีต้อนรับ Addy Osmani สวัสดีแอดดี้ คุณเป็นอย่างไรบ้าง?

Addy Osmani: ฉันยอดเยี่ยมมาก

Drew McLellan: ดีใจ ที่ได้ยิน วันนี้ฉันอยากคุยกับคุณเกี่ยวกับภาพบนเว็บ เป็นพื้นที่ที่มีการเปลี่ยนแปลงและนวัตกรรมที่น่าประหลาดใจมากมายในช่วงไม่กี่ปีที่ผ่านมา และคุณเพิ่งเขียนหนังสือที่ครอบคลุมมากเกี่ยวกับการปรับภาพให้เหมาะสมสำหรับ Smashing อะไรคือแรงจูงใจให้คิดในเวลานี้ "ตอนนี้เป็นเวลาสำหรับหนังสือเกี่ยวกับการปรับภาพให้เหมาะสมที่สุดแล้ว"

Addy Osmani: นั่นเป็นคำถามที่ดี ฉันคิดว่าเรารู้ว่ารูปภาพเป็นส่วนสำคัญของเว็บมาหลายทศวรรษแล้ว และสมองของเราสามารถตีความรูปภาพได้เร็วกว่าข้อความมาก แต่หัวข้อโดยรวมนี้เป็นหัวข้อที่น่าสนใจและเหมาะสมยิ่งขึ้นเมื่อเวลาผ่านไป และฉันมักจะบอกคนอื่นว่านี่อาจเป็นหนังสือเล่มที่สามหรือสี่ของฉัน ฉันคิดว่า ฉันไม่เคยตั้งใจที่จะเขียนหนังสือ

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

Addy Osmani: ดังนั้นฉันจึงเขียนหนังสือเล่มนี้เพราะฉันพบว่าตัวเองพบว่ามันยากที่จะอยู่เหนือการเปลี่ยนแปลงทั้งหมดเหล่านี้ และฉันคิดว่า "ฉันจะเป็นพลเมืองของเว็บที่ดีและพยายามติดตามทุกสิ่งที่ฉันได้เรียนรู้ในที่เดียว เพื่อให้ทุกคนสามารถใช้ประโยชน์จากมันได้"

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

Drew McLellan: ดังนั้นการรวบรวมทั้งหมดไว้ในหนังสือที่ได้รับการวิจัยอย่างดีจากแหล่งที่เชื่อถือได้จึงเป็นเรื่องใหญ่มาก

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

แอดดี้ ออสมานี: แต่ภูมิทัศน์ของภาพมีวิวัฒนาการค่อนข้างมาก แม้กระทั่งในปีที่แล้ว ในที่สุดเราก็พบว่าการสนับสนุน WebP ได้ก้าวข้ามเส้นชัยในเบราว์เซอร์สมัยใหม่ส่วนใหญ่ รองรับภาพ AVIF ใน Chrome มาถึง Firefox, JPEG XL, โหลดแบบ Lazy Loading และทั่วกระดาน เราได้เห็นการปรับปรุงในวิธีที่คุณสามารถใช้รูปภาพบนเว็บอย่างเป็นรูปธรรมในเบราว์เซอร์ แต่ยังมีอีกมากที่ผู้คนจะติดตาม

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

Drew McLellan: เราอาจรู้ว่าเราควรเลือก JPEG เมื่อเป็นรูปภาพและ PNG เมื่อเป็นรูปภาพแบบกราฟิกและคิดว่า "โอเค แค่นี้เอง ฉันรู้เรื่องการเพิ่มประสิทธิภาพรูปภาพ ฉันทำเสร็จแล้ว” แต่จริงๆ แล้ว สิ่งเหล่านั้นเป็นเพียงเดิมพันบนโต๊ะ ใช่ไหม ในตอนนี้

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

แอดดี้ ออสมานี: ดังนั้น เมื่อพูดถึงการคิดเกี่ยวกับรูปภาพและปรับแต่งเพิ่มเติมเล็กน้อยนอกเหนือจากคำว่า “เฮ้ มาใช้ JPEG กันเถอะ” หรือ “มาใช้ PNG กันเถอะ” ฉันคิดว่ามันมีค่าพอควร เก็บไว้ในใจ. อย่างแรกคือการบีบอัดโดยทั่วไป คุณพูดถึง ImageOptim และพวกเราหลายคนเคยชินกับการลากรูปภาพไปไว้ในสถานที่หนึ่งแล้วดึงสิ่งที่เล็กกว่าออกจากด้านหลัง

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

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

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

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

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

แอดดี้ ออสมานี: แต่ตั้งแต่นั้นมา สิ่งต่างๆ ก็พัฒนาขึ้น ประมาณปี 2010 เราเริ่มได้รับการสนับสนุนสำหรับ WebP ซึ่งควรจะแทนที่ JPEG และ PNG และบีบอัดได้ดีกว่าเล็กน้อย แต่จำนวนรูปแบบรูปภาพและตัวเลือกบนโต๊ะก็พุ่งสูงขึ้นตั้งแต่นั้นเป็นต้นมา ฉันคิดว่าสิ่งต่าง ๆ กำลังมุ่งหน้าไปในทิศทางที่ดี โดยเฉพาะอย่างยิ่งกับรูปแบบที่ทันสมัย ​​เช่น AVIF และ JPEG XL แต่เราใช้เวลาสักครู่กว่าจะมาถึงที่นี่ แม้แต่การได้รับการสนับสนุน WebP ในทุกเบราว์เซอร์ก็ต้องใช้เวลาพอสมควร

แอดดี้ ออสมานี: และฉันคิดว่าท้ายที่สุดแล้ว สิ่งที่ทำให้นักพัฒนาได้รับการร้องขอ พวกเขาต้องการความสามารถในการบีบอัดที่ดีขึ้นจากรูปแบบที่ทันสมัยเหล่านี้ และความปรารถนาที่จะมีความเข้ากันได้ดีในเบราว์เซอร์ต่างๆ สำหรับสิ่งเหล่านี้ด้วย

Drew McLellan: ใช่ WebP ดูเหมือนจะน่าสนใจจริงๆ สำหรับฉัน เนื่องจากนอกจากจะมีการบีบอัดข้อมูลแบบไม่สูญเสียข้อมูลและการสูญเสียข้อมูลในรูปแบบแล้ว เราจึงมีขนาดไฟล์ที่ลดลงอย่างเห็นได้ชัดอีกด้วย และมีการรองรับเบราว์เซอร์ที่ดี และเราเห็นการยอมรับจากบริษัทใหญ่ๆ อย่าง Google และ Netflix และบริษัทใหญ่ๆ หลายแห่ง

Drew McLellan: แต่การรับรู้ของฉันในอุตสาหกรรมนี้คือเราไม่เห็นการดูดซับแบบเดียวกันในระดับรากหญ้า WebP ยังคงรอวันที่จะมาถึงหรือไม่?

Addy Osmani: ฉันคิดว่าฉันจะบอกว่า WebP กำลังจะมาถึง หลายคนรอคอย Safari และ WebKit รองรับเพื่อให้เป็นจริง และในที่สุดเราก็มีสิ่งนั้น แต่เมื่อเราคิดถึงรูปแบบภาพใหม่ๆ สิ่งสำคัญคือเราต้องเข้าใจว่าการสนับสนุนหมายถึงอะไรจริงๆ มีเบราว์เซอร์รองรับการถอดรหัสภาพเหล่านั้น เรายังต้องการการสนับสนุนเครื่องมือที่ดี ไม่ว่าคุณจะอยู่ในสภาพแวดล้อมของโหนด, CDN อิมเมจ หากคุณอยู่ใน CMS คุณจะสามารถใช้รูปแบบรูปภาพเหล่านั้นได้

Addy Osmani: ฉันจำได้เมื่อหลายปีก่อนเมื่อ WebP เปิดตัวครั้งแรก ผู้ใช้ในช่วงแรกประสบปัญหานี้เนื่องจากคุณจะบันทึกไฟล์ WebP ของคุณไปที่เดสก์ท็อป แล้วทันใดนั้น "โอ้ เดี๋ยวก่อน ฉันต้องลากสิ่งนี้ลงในเบราว์เซอร์เพื่อดูหรือไม่” หรือ “หากผู้ใช้ของฉันกำลังดาวน์โหลด WebP พวกเขาจะติดขัดและสงสัยว่าเกิดอะไรขึ้น”

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

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

Drew McLellan: ฉันมีบริการแชร์สไลด์ที่ฉันใช้ ซึ่งคุณสามารถจินตนาการได้ ว่าเกี่ยวข้องกับรูปภาพหลายแสนรูป และเมื่อฉันกำลังดู WebP และนี่อาจเป็นเมื่อสามปีที่แล้ว ฉันกำลังค้นหาวิธีลดค่าใช้จ่ายแบนด์วิดท์ CDN เป็นหลัก เพราะหากคุณให้บริการไฟล์ที่มีขนาดเล็กกว่า คุณจะถูกเรียกเก็บค่าบริการน้อยลง แต่ในขณะที่ฉันยังต้องการรูปภาพฟูลแบ็ค รูปแบบรูปภาพดั้งเดิมด้วย การคำนวณของฉันพบว่าค่าใช้จ่ายในการจัดเก็บรูปภาพอื่นๆ ทั้งหมดมีมากกว่าประโยชน์ของการให้บริการไฟล์ที่มีขนาดเล็กกว่า เรามาถึงแล้วในปี 2564 นั่นคือการตัดสินใจที่ฉันควรพิจารณาใหม่ ณ จุดนี้หรือไม่

Addy Osmani: ฉันคิดว่านั่นเป็นการพิจารณาที่สำคัญจริงๆ บางครั้ง เมื่อเราพูดถึงวิธีที่คุณควรจะเข้าถึงกลยุทธ์ด้านภาพของคุณ เป็นเรื่องง่ายมากที่จะให้คำตอบในระดับสูงกับผู้คนว่า "เฮ้ ใช่ แค่สร้างรูปแบบที่แตกต่างกันห้ารูปแบบ และนั่นจะขยายขนาดได้ไม่จำกัด” และมันก็ไม่ได้เป็นเช่นนั้นเสมอไป

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

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

Addy Osmani: ฉันคิดว่า AVIF น่าจะดีกว่านี้ถ้าคุณต้องการใช้อัตราบิตที่ต่ำมาก บางทีคุณอาจสนใจแบนด์วิธเป็นอย่างมาก บางทีคุณอาจสนใจเรื่องความเที่ยงตรงของภาพน้อยลง และด้วยอัตราบิตเหล่านั้น ฉันสามารถจินตนาการได้ว่ามันดูคมชัดกว่าทางเลือกอื่นๆ และจนกว่าเราจะมี JPEG XL ฉันจะพยายามดูการวิเคราะห์ของคุณและทำความเข้าใจว่าเป็นไปได้ไหมที่คุณจะให้บริการ AVIF มิฉะนั้น ฉันจะเน้นที่ WebP นั้น หากคุณเป็นนักวิเคราะห์ ฉันเดาว่าคนส่วนใหญ่สามารถให้บริการ WebP ได้ และคุณสนใจน้อยลงเล็กน้อยเกี่ยวกับช่วงกว้างหรือการวางซ้อนข้อความ สถานที่ซึ่งการสุ่มตัวอย่างโครโมโซมอาจไม่สมบูรณ์แบบใน WebP นั่นเป็นสิ่งที่ควรค่าแก่การพิจารณาอย่างแน่นอน

แอดดี้ ออสมานี: ดังนั้น ฉันจะพยายามจำไว้ว่าจะไม่มีขนาดใดที่เหมาะกับทุกคน โดยส่วนตัวแล้ว ทุกวันนี้กังวลน้อยลงเล็กน้อยเกี่ยวกับค่าใช้จ่ายด้านพื้นที่จัดเก็บและขาออกและแบนด์วิดท์ เพียงเพราะฉันใช้ CDN อิมเมจ และฉันยินดีที่จะบอกว่าฉันใช้ Cloudinary เป็นการส่วนตัว เราใช้ CDN รูปภาพต่างๆ มากมายในที่ทำงานของฉัน แต่ฉันพบว่าไม่ต้องกังวลมากเกี่ยวกับค่าบำรุงรักษาในการจัดการกับไปป์ไลน์รูปภาพ จัดการกับวิธีที่ฉันจะสนับสนุน เช่น “โอ้ นี่ยังมีรูปแบบรูปภาพอื่นหรือทางเลือกประเภทใหม่หรือ API ของเว็บใหม่ ” นั่นเป็นประโยชน์ที่ดีในการลงทุนในบางสิ่งที่ดูแลมันให้ฉัน

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

Drew McLellan: ใช่ ดังนั้นฉันจึงต้องการกลับมาที่รูปแบบในอนาคตที่กำลังจะเกิดขึ้นเหล่านี้ แต่ฉันคิดว่ามันคุ้มค่าที่จะลองดู เพราะด้วยเครื่องมือประสิทธิภาพแบบใดก็ตาม Lighthouse หรือ WebPageTests หากพวกเราคนใดคนหนึ่งใช้งานไซต์ของเราผ่านมัน สิ่งสำคัญอย่างหนึ่งที่จะแนะนำคือเราใช้ CDN สำหรับรูปภาพ และนั่นเป็นสิ่งที่ทำได้จริงมากสำหรับบริษัทใหญ่ๆ เป็นจริงและอยู่ในมือของผู้คนที่สร้างเว็บไซต์และแอปขนาดเล็กลง หรือจริง ๆ แล้วทำได้ง่ายอย่างที่คิดหรือไม่?

Addy Osmani: ฉันคิดว่าคำถามที่ผู้คนควรถามคือ "คุณใช้รูปภาพเพื่ออะไร" หากคุณมีภาพเพียงไม่กี่ภาพ หากคุณกำลังสร้างบล็อกและภาพที่คุณกำลังเพิ่มเข้าไปนั้นค่อนข้างง่าย คุณไม่มีภาพเป็นร้อยเป็นร้อยหรือเป็นพันภาพ คุณอาจทำได้เพียงแค่เข้าใกล้สิ่งนี้ ณ เวลาสร้าง ในลักษณะคงที่มาก โดยที่คุณติดตั้งแพ็คเกจ NPM สองสามตัว บางทีคุณอาจแค่ใช้ Sharp และนั่นจะดูแลคุณส่วนใหญ่

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

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

แอดดี้ ออสมานี: แต่มันอาจเป็นสิ่งที่หากคุณขยายขนาดเป็น 100 ภาพจาก 1,000 ภาพหรือหลายล้านภาพ และนั่นไม่ใช่สิ่งที่จำเป็นต้องครอบคลุมโดยรายได้ของคุณหรือไม่ใช่สิ่งที่คุณพร้อมจะจ่าย คุณต้องคำนึงถึง กลยุทธ์ทางเลือก และฉันคิดว่าเราโชคดีที่เรามีความยืดหยุ่นเพียงพอกับเครื่องมือที่เรามีอยู่ในปัจจุบัน เพื่อให้สามารถไปในทิศทางใดทิศทางหนึ่ง ที่เรากำหนดเองเพิ่มเติมอีกเล็กน้อย เราจัดการเองหรือม้วน CDN ภาพลักษณ์ของเราเอง หรือเราลงทุนในสิ่งที่เชิงพาณิชย์มากกว่าเล็กน้อย และเราอยู่ในจุดที่จะบอกว่าสำหรับกรณีการใช้งานบางอย่าง คุณสามารถใช้ CDN อิมเมจได้และมีราคาไม่แพง

Drew McLellan: ฉันเดาว่าหลักการชี้นำอย่างหนึ่งก็คือความคล่องตัวและเตรียมพร้อมสำหรับการเปลี่ยนแปลงเสมอ และคุณอาจเริ่มใช้ CDN ของรูปภาพเพื่อแปลงรูปภาพของคุณแบบไดนามิกตามที่ได้รับการร้องขอ และหากสิ่งนั้นไปถึงจุดที่ไม่คุ้มทุนอย่างยั่งยืน คุณสามารถดูโซลูชันอื่นและมีฐานโค้ดของคุณอยู่ในสถานะ ซึ่งจะเป็นการง่ายที่จะแทนที่วิธีแก้ปัญหาหนึ่งไปอีกวิธีหนึ่ง ฉันคิดว่าโดยทั่วไปและทุกที่ที่คุณใช้บริการของบุคคลที่สาม นั่นเป็นหลักการที่ดีใช่ไหม ดังนั้นรูปแบบภาพที่จะเกิดขึ้นเหล่านี้ คุณพูดถึง JPEG XL JPEG XL คืออะไร? มันมาจากไหน? และมันให้อะไรกับเราบ้าง?

Addy Osmani: นั่นเป็นคำถามที่ยอดเยี่ยม ดังนั้น JPEG XL จึงเป็นฟอร์แมตภาพยุคใหม่ ซึ่งควรจะเป็นจุดประสงค์ทั่วไป และเป็นตัวแปลงสัญญาณจากคณะกรรมการ JPEG มันเริ่มต้นด้วยรากในรูปแบบ pic ของ Google และรูปแบบ FUIF ของ Cloudinary มีรูปแบบมากมายในช่วงหลายปีที่ผ่านมาซึ่งได้รับการย่อยโดยความพยายามนี้ แต่มันกลายเป็นมากกว่าผลรวมของชิ้นส่วนแต่ละส่วนและข้อดีบางประการของ JPEG XL คือเหมาะอย่างยิ่งสำหรับความเที่ยงตรงสูง รูปภาพ ดีมากสำหรับแบบไม่สูญเสียข้อมูล มีการรองรับการถอดรหัสแบบโปรเกรสซีฟ การทรานส์โค้ด JPEG แบบไม่สูญเสียข้อมูล อีกทั้งยังไม่ยุ่งยากและไม่มีค่าลิขสิทธิ์ ซึ่งเป็นประโยชน์อย่างแน่นอน ฉันคิดว่า JPEG XL อาจเป็นตัวเลือกที่แข็งแกร่งจริงๆ ที่เราพูดถึงก่อนหน้านี้ว่า ถ้าให้เลือกอย่างใดอย่างหนึ่ง คุณจะใช้อะไร? และฉันคิดว่า JPEG XL มีศักยภาพที่จะเป็นแบบนั้นได้

แอดดี้ ออสมานี: ฉันก็ไม่อยากผิดสัญญาเช่นกัน เรายังรองรับเบราว์เซอร์ได้เร็วมาก ดังนั้นฉันคิดว่าเราควรรอดู ทดลอง และประเมินว่าในทางปฏิบัติและตรงตามความคาดหวังของผู้คนได้ดีเพียงใด แต่ฉันเห็นศักยภาพมากมายกับ JPEG XL สำหรับทั้งกรณีที่สูญเสียและไม่สูญเสียเหล่านั้น ตอนนี้ ฉันเชื่อว่า Chrome น่าจะเป็นการสนับสนุนที่ไกลที่สุด แต่ฉันก็เห็นความสนใจจากฝั่ง Mozilla และเบราว์เซอร์อื่นๆ ด้วยเช่นกัน ดังนั้นฉันจึงรู้สึกตื่นเต้นกับ JPEG XL ในอนาคต และถ้าจะพูดว่าอะไรคือระยะเวลาสั้นที่น่าสนใจสำหรับผู้คน? มี AVIF ด้วย

Drew McLellan: บอกเราเกี่ยวกับ AVIF นี่เป็นอีกเรื่องหนึ่งที่ฉันไม่คุ้นเคย

แอดดี้ ออสมานี: โอเค ดังนั้นเราจึงได้กล่าวถึงก่อนหน้านี้เล็กน้อยเกี่ยวกับ AVIF ที่อาจเป็นตัวเลือกที่ดีกว่า หากคุณต้องการใช้อัตราบิตที่ต่ำ และคุณสนใจเกี่ยวกับแบนด์วิดท์มากกว่าความถูกต้องของภาพ ตามหลักการทั่วไป AVIF เป็นผู้นำในการบีบอัดข้อมูลที่มีความเที่ยงตรงสูงในระดับต่ำ และ JPEG XL ควรมีความเที่ยงตรงปานกลางถึงสูง แต่มีรูปแบบที่แตกต่างกันเล็กน้อยในสิทธิ์ของตนเอง เราอยู่ในจุดที่ AVIF ได้รับการสนับสนุนเบราว์เซอร์ที่ดีขึ้นเรื่อยๆ แต่ให้ฉันย้อนกลับไปและพูดถึงรูปแบบนี้อีกเล็กน้อย ดังนั้น AVIF เองจึงใช้ตัวแปลงสัญญาณวิดีโอ AV1 ซึ่งได้รับมาตรฐานโดย Alliance for Open Media และพยายามทำให้ผู้คนได้รับการบีบอัดอย่างมีนัยสำคัญผ่าน JPEG ผ่าน WebP ซึ่งเรากำลังพูดถึงก่อนหน้านี้ และในขณะที่การประหยัดที่แน่นอนที่คุณจะได้รับจาก AVIF จะขึ้นอยู่กับเนื้อหาและเป้าหมายด้านคุณภาพของคุณ เราได้เห็นกรณีมากมายที่สามารถประหยัดได้มากกว่า 50% เมื่อเทียบกับ JPEG

Addy Osmani: มีคุณสมบัติที่ดีมากมาย สามารถให้การสนับสนุนคอนเทนเนอร์สำหรับคุณสมบัติใหม่ เช่น ช่วงไดนามิกสูงและช่วงสีที่กว้าง การสังเคราะห์เกรนของฟิล์ม ข้อดีอีกอย่างของแท็กรูปภาพก็คือ คุณสามารถให้บริการไฟล์ AVIF แก่ผู้ใช้ได้ในขณะนี้ และยังคงกลับไปใช้ WebP หรือ JPEG ของคุณในกรณีที่ไม่จำเป็นต้องรองรับ . แต่กลับไปที่ตัวอย่างของคุณเกี่ยวกับ Photoshop Save For Web คุณสามารถนำ JPEG ที่มีขนาด 500 กิโลไบต์ พยายามถ่ายภาพให้มีคุณภาพใกล้เคียงกับ Photoshop Save For Web และด้วย AVIF ฉันจะบอกว่าคุณอาจจะสามารถ จุดที่ไฟล์มีขนาดประมาณ 90 กิโลไบต์ 100 กิโลไบต์จึงประหยัดได้มากโดยไม่สูญเสียคุณภาพอย่างแท้จริง

แอดดี้ ออสมานี: และข้อดีอย่างหนึ่งของเรื่องนี้ก็คือ คุณจะไม่สูญเสียเท็กซ์เจอร์ในรูปภาพใดๆ ที่มีรายละเอียดมากขนาดนั้น ดังนั้นหากคุณมีภาพถ่ายของป่าไม้ แคมป์ปิ้ง หรือสิ่งของประเภทใด ไฟล์ AVIF ก็ควรจะดูสมบูรณ์ไปด้วย ฉันจึงค่อนข้างตื่นเต้นกับทิศทางของ AVIF ฉันคิดว่ามันต้องการการทำงานเพิ่มขึ้นอีกเล็กน้อยในแง่ของการสนับสนุนเครื่องมือ วันก่อนผมเลยทวีตเรื่องนี้ออกไป เรามีตัวเลือกมากมายสำหรับการใช้ AVIF ในตอนนี้ สำหรับภาพเดี่ยว เรามี Squoosh, squoosh.app ซึ่งเขียนโดยทีมอื่นใน Chrome เลยขอตะโกน ออกไปหา Surma และ Jake เพื่อทำงานเกี่ยวกับ Squoosh Avif.io มีตัวเลือกที่ดีมากมายสำหรับผู้ที่กำลังพยายามใช้ AVIF ในปัจจุบัน ไม่ว่าพวกเขาจะเน้นด้านเทคโนโลยีใดก็ตาม Sharp ก็สนับสนุน AVIF ด้วยเช่นกัน

แอดดี้ ออสมานี: แต่โดยทั่วไปแล้ว คุณนึกถึงสถานที่อื่นๆ ที่เราจัดการกับภาพ ไม่ว่าจะเป็นใน Figma หรือใน Sketch หรือใน Photoshop หรือในที่อื่นๆ และผมจะบอกว่าเรายังคงต้องทำงานกันอีกสักหน่อยในแง่ของ รองรับ AVIF ที่นั่น เนื่องจากจำเป็นต้องแพร่หลายสำหรับนักพัฒนาและผู้ใช้เพื่อให้รู้สึกเหมือนได้ลงจอดและกลับบ้าน และนั่นก็เป็นหนึ่งในประเด็นที่เราให้ความสำคัญสำหรับทีมที่ทำงานเกี่ยวกับ AVIF ใน Chrome ในขณะนี้ พยายามทำให้แน่ใจว่าเราสามารถนำเครื่องมือไปใช้ในที่ที่ค่อนข้างดีได้

Drew McLellan: ตอนนี้เรามี HTML ซึ่งเป็นองค์ประกอบรูปภาพ ซึ่งช่วยให้เรามีความยืดหยุ่นมากกว่าแท็กรูปภาพแบบเดิม แม้ว่าแท็กรูปภาพจะมาไกลเช่นกันใช่ไหม แต่เราเห็นว่ารูปภาพถูกเพิ่มเข้ามา ซึ่งเป็นช่วงเวลาเดียวกับแท็กวิดีโอเนทีฟ ฉันคิดว่าการเปลี่ยนแปลง HTML5 แบบกลุ่มเดิมนั้น และนี่ทำให้เราสามารถระบุแหล่งที่มาได้หลายแหล่ง จริงไหม?

แอดดี้ ออสมานี: ใช่ ถูกต้อง

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

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

แอดดี้ ออสมานี: แล้วมีวิธีอื่นอีกไหมที่เราจะแก้ไขปัญหาเหล่านั้นได้? ฉันไม่ต้องการที่จะขายคนมากเกินไปใน CDN อิมเมจ ฉันต้องการให้พวกเขายืนหยัดด้วยตัวเอง แต่นี่เป็นหนึ่งในสถานที่เหล่านั้นที่แนวคิดที่เรียกว่าการเจรจาต่อรองเนื้อหาสามารถเสนอเส้นทางที่น่าสนใจให้คุณได้ ดังนั้น เราได้พูดคุยกันเล็กน้อยเกี่ยวกับแท็กรูปภาพ ซึ่งคุณต้องสร้างแหล่งข้อมูลต่างๆ มากมาย และตัดสินใจเกี่ยวกับลำดับของความชอบ ใช่ HTML เพิ่มเติม ด้วยการเจรจาเนื้อหา สิ่งที่บอกว่าเรามาทำงานทั้งหมดบนเซิร์ฟเวอร์กันเถอะ เพื่อให้ลูกค้าสามารถบอกเซิร์ฟเวอร์ว่ารองรับรูปแบบใดบ้างล่วงหน้าผ่านรายการประเภท MIME ผ่านส่วนหัว Accept HTTP จากนั้นเซิร์ฟเวอร์สามารถทำงานหนักทั้งหมดในการสร้างและจัดการทรัพยากรขั้นสูงสุด และตัดสินใจว่าจะส่งทรัพยากรใดให้กับลูกค้า และข้อดีอย่างหนึ่งของที่นี้คือ หากคุณใช้อิมเมจ CDN คุณสามารถชี้ไปที่แหล่งข้อมูลเดียวได้

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

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

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

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

แอดดี้ ออสมานี: จากนั้นคุณสามารถใช้สิ่งนั้นเป็นนักพัฒนาเพื่อส่งสัญญาณว่า “เอาล่ะ ผู้ใช้มีข้อจำกัดบ้าง บางทีเราอาจจะใช้รูปภาพที่เล็กกว่ามาก หรือรูปภาพที่มีคุณภาพต่ำกว่ามาก” แต่พวกเขาก็ยังได้เห็นภาพบางภาพเลย ซึ่งดีกว่าที่พวกเขารอเป็นเวลานานมากสำหรับบางสิ่งที่ร่ำรวยกว่ามากที่จะเสิร์ฟ ประโยชน์อื่นๆ ของสัญญาณประเภทนี้คือคุณสามารถใช้สัญญาณเหล่านี้ในการแสดงสื่อแบบมีเงื่อนไขได้ ดังนั้น อาจมีบางกรณีที่ข้อความเป็นสิ่งสำคัญที่สุดในหน้านั้น คุณอาจปิดรูปภาพเหล่านั้นได้หากคุณพบว่าผู้ใช้อยู่ในสภาพแวดล้อมที่มีข้อจำกัด ฉันจะใช้เวลา 30 วินาทีกับสิ่งนี้ แต่คุณสามารถผลักดันแนวคิดนี้ให้สุดขั้วได้ สิ่งที่น่าสนใจบางอย่างที่คุณสามารถทำได้ด้วย Save-Data อาจเป็นการปิดฟีเจอร์ที่มีค่าใช้จ่ายสูงใน JavaScript

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

Drew McLellan: เป็นไปได้ ฉันเดาว่ามันสามารถแยกตัวประกอบในการแบ่งหน้า และคุณสามารถส่งคืนผลลัพธ์ 10 รายการในหน้าหนึ่งๆ แทนที่จะเป็น 100 และสิ่งต่างๆ เหล่านั้นเช่นกัน ความสามารถที่น่าสนใจและน่าสนใจมากมายอยู่ที่นั่น ฉันคิดว่าเราทุกคนคงคุ้นเคยกับกระบวนการที่น่าผิดหวังในการเตรียมไซต์ใหม่ การเพิ่มประสิทธิภาพรูปภาพทั้งหมด ส่งมอบให้กับลูกค้า มอบ CMS ให้พวกเขาเพื่อจัดการเนื้อหา และพบว่าพวกเขากำลังแทนที่ทุกอย่างด้วย ภาพที่ปรับให้เหมาะสมไม่ดี ฉันหมายถึงอีกครั้ง CDN อิมเมจฉันเดาว่าน่าจะเป็นทางออกที่สะดวกจริงๆ แต่มีวิธีแก้ปัญหาอื่น ๆ หรือไม่ มีสิ่งต่าง ๆ ที่ CMS สามารถทำได้บนเซิร์ฟเวอร์เพื่อช่วยในนั้นหรือเป็นอิมเมจ CDN อาจเป็น ทางที่จะไป?

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

แอดดี้ ออสมานี: ทุกๆ สองสัปดาห์บนบล็อกของ Google เราจะมีคนอัปโหลด GIF แบบเคลื่อนไหวขนาดใหญ่มาก 20 หรือ 30 เมกะไบต์ และฉันไม่ได้คาดหวังให้พวกเขารู้ว่านั่นไม่ใช่ความคิดที่ดี พวกเขากำลังพยายามทำให้บทความดูน่าสนใจ น่าดึงดูด และมีการโต้ตอบกันมาก แต่ผู้ชมเหล่านั้นไม่จำเป็นต้องรู้ว่าจะไปและเรียกใช้เครื่องมือหรือใช้ ImageOptim หรือใช้เครื่องมืออื่นๆ เหล่านี้แทน และดังนั้น การบันทึกสำหรับพวกเขา ว่าพวกเขาควรตรวจสอบ เป็นทางเลือกหนึ่งอย่างแน่นอน แต่การที่สามารถแก้ไขปัญหาได้โดยอัตโนมัติ ฉันคิดว่าน่าสนใจมากและช่วยให้เราไปถึงที่ซึ่งเราหวังว่าจะสร้างสมดุลระหว่างความต้องการของผู้ใช้ CMS ทั้งหมดของเรา ไม่ว่าจะเป็นด้านเทคนิคหรือไม่ใช่ด้านเทคนิคก็ตาม ตามความต้องการของผู้ใช้ของเรา

Addy Osmani: So I think the image CDNs can definitely play a role in helping out here. Ultimately, the thing that's important is making sure you have a solution in place between people, stakeholders who might be uploading those images, and what gets served down to users. If it's an image CDN, if it's something you've rolled yourself, if it's a built step, just needs to be something in place to make sure that you are not serving down something that's very, very large and inefficient.

Drew McLellan: Talking about animated GIFs, they're surprisingly popular. They're fun, we love them, but they're also huge. And really, it's a case where a file format that was not designed for video is being used for video. Is there a solution to that with any of these image formats? พวกเราทำอะไรได้บ้าง?

Addy Osmani: Oh, gosh. The history of GIFs is fascinating. We saw a lot of the formats we know and love or have been around for a while were originated in the late '80s to early '90s, and the GIF is one of those. It was created in 1987. I'm about as old as the GIF.

Addy Osmani: As you mentioned, it wasn't originally created necessarily for use case. I think it was Netscape Navigator which in mid '90s maybe added support for looping GIFs and giving us this kind of crazy fun way to do memes and the like, but GIFs have got so many weaknesses. They're kind of limited in many cases to a very finite color palette; 256 colors, in many cases. They're a bitmapped raster format with pixel value stored in image files.

Addy Osmani: They're very inefficient, for a number of reasons. And you mentioned that they're also quite large. I think that we've gotten into this place of thinking that if we want a short segment of video or animation that's going to be looping, the GIF is the thing that we have to use. And that's just not the case.

Addy Osmani: While we do see that there are modern image formats that have support for animation, I think that the most basic thing you can do these days is make sure you're serving a video down instead of a GIF. Muted auto-play videos combined with HD64, HD65, whatever video you're going to use, can be really powerful, and significantly smaller for use cases where you need to be showing a sequence of images.

Addy Osmani: There are options for this. AVIF has got image sequences in there, potentially. Other formats have explored these ideas as well. But I think that one thing you can do is, if you're using GIFs today, or you have users who are slightly less technical who are using GIFs today, try to see if you can give them tools that will allow them to export a video instead, or if your pipeline can take care of that for them, that's even better.

Addy Osmani: I have plenty of conversations with CMS providers where you do see people uploading GIFs. They don't know the difference between a video and a GIF file. But if you can just, whether it's with an image CDN or via some built process, change the file over to a more efficient format, that would be great.

Drew McLellan: We talked briefly about tools like ImageOptim that manage to strip out information from the files to give us the same quality of result with a smaller file size. I'm presuming that's because the file formats that we commonly deal with weren't optimized for delivery over the Web in the first place, so they're doing that step of removing anything that isn't useful for serving on the Web. Do these new formats take that into consideration already? Is something like ImageOptim a tool that just won't be required with these newer formats?

Addy Osmani: I'm anticipating that some of the older formats… Things that have been around for a while, take a while to phase out or to evolve into something else. And so I can see tools like ImageOptim continuing to be useful. Now, what are modern image formats doing that are much better? Well, I would say that they're taking into account quite a few things.

Addy Osmani: They're taking into account, are there aspects of the picture that the human eye can't necessarily make out a difference around? When I'm playing around with different quality settings or different codecs, I'm always looking for that point where if I take the quality down low enough, I'm going to see banding artifacts. I'm going to see lots of weird looking squares around my buildings or the details of my picture.

Addy Osmani: But once those start to disappear, I really need to start zooming in to the image and making comparisons across these different formats. And if users are unlikely to do that, then I think that there are good questions around is that point of quality good enough? I think that modern image formats are pretty good at being able to help you navigate, filtering out some of those details pretty well. Keeping in mind what are the needs of color, because obviously we've got white gamut as a thing right now as well.

Addy Osmani: Some people might be okay with an amount of changing your color palette versus not, depending on the type of images that you have available, but definitely I see modern formats trying to be resilient against things like generational loss as well. Generational loss is this idea that… We mentioned memes earlier. A common problem on the Web today is you'll find a meme, whether it's on Facebook or Instagram or Reddit or wherever else, you'll save it, and maybe you'll share it around with a friend. Maybe they'll upload it somewhere else. And you suddenly have this terrible kind of copy machine or fax effect of the quality of that image getting worse and worse and worse over time.

Addy Osmani: And so when I see something get reshared that I may have seen three months ago, now it might not be really, really bad quality. You can still make out some of the details, but image formats, being able to keep that in mind and work around those types of problems, I think are really interesting.

Addy Osmani: I know that JPEG XL was trying to keep this idea of generational loss in mind as well. So there's plenty of things that modern codecs and formats are trying to do to evolve for our needs, even if they're very meme focused.

Drew McLellan: Let's say you've inherited a project that has all sorts of images on it. What would be the best way to assess the state of that project in terms of image optimization? Are there tools or anything that would help there?

Addy Osmani: I think that it depends on how much time you've got to sink into the problem. There are very basic things people can try doing, like obviously batch converting those images over to more modern formats at the recommended default quality and do an eyeball check on how well they're doing compared to the original.

Addy Osmani: If you're able to invest a little bit more time, there are plenty of tools and techniques like DSSIM and other ways of being able to compare what the perceptual quality differences are between different types of images that have been converted. And you can use that as a kind of data-driven approach to deciding, if I'm going to batch convert all of my old images to WebP, what is the quality setting that I should be relying on? If I'm going to be doing it for AVIF or JPEG XL, what is the quality setting that I should be relying on?

Addy Osmani: I think that there's plenty of tools people have available. It really just depends on your time sink that's possible. Other things that you can do, again, going back to the image CDN aspect, if you don't have a lot of time and you're comfortable with the cost of an image CDN, you can just bulk upload all of those images. And there are CDNs that support this idea of automatic quality setting. I think in Cloudinary it's q_auto, or something like that.

Addy Osmani: But the basic idea there is they will do a scan of the image, try to get a sense of the type of content that's in there, and automatically decide on the right level of quality that you should be using for the images that are getting served down to users. And so you do have some tooling options that are available here, for sure.

Drew McLellan: I mean, you mentioned batch processing of images. Presumably you're into the area of that generational loss that you're talking about, when you do that. When you take an already compressed JPEG and then convert it to a WebP, for example, you risk some loss of quality. Is batch converting a viable strategy or does that generational loss come too much into play if you care about the pristine look of the images?

Addy Osmani: I think it depends on how much you're factoring in your levels of comfort with lossy versus lossless, and your use case. If my use case is that I've inherited a project where the project in question is all of my family's photos from the last 20 years, I may not be very comfortable with there being too much quality loss in those images, and maybe I'm okay with spending a little bit more money on storage if the quality can remain mostly the same, just using a more modern format.

Addy Osmani: If those are images for a product catalog or any commerce site, I think that you do need to keep in mind what your use case is. Are users going to require being able to see these images with a certain level of detail? And if that's the case, you need to make those trade-offs in mind when you're choosing the right format, when you're choosing the right quality.

Addy Osmani: So I think that batch is still okay. To give you a concrete idea of one way of seeing people approach this at scale, sometimes people will take a smaller sample of the images from that big collection that they've inherited, and they'll try out a more serious set of experiments with just that set. And if they're able to land on an approach that works well for the sample, they'll just apply it to the whole batch. And I've seen that work to varying degrees of success.

Drew McLellan: So optimizing file size is just sort of one point on the overall image optimization landscape. And I'd like to get on to talking about what we can do in our browsers to optimize the way the images are used, which we'll do after a quick word from this episode sponsor.

Drew McLellan: So we've optimized and compressed our large files, but now we need to think about a strategy for using those in the browser. The good old faithful image tag has gained some new powers in recent times, hasn't it?

Addy Osmani: Yeah, it has. And maybe it's useful for folks… I know that a lot of people that ask me about images these days also ask me to frame it in terms of metrics and the Core Web Vitals. Would it be useful for me to talk about what the Core Web Vitals are and maybe frame some of those ideas in those current terms?

Drew McLellan: Absolutely, because Core Web Vitals is a sort of initiative from Google, isn't it, that we've seen more recently? We're told that it factors into search ranking potentially at some level. What does Core Web Vitals actually mean for us in terms of images?

Addy Osmani: Great question. As you mentioned, Core Web Vitals is an initiative by Google, and it's all about trying to share unified guidance for quality signals. That can be pretty key to delivering a great user experience on the Web. And it is part of a set of page experience signals Google Search may be evaluating for ranking purposes, but they can impact the Core Web Vitals in a number of ways.

Addy Osmani: Now, before I talk about what those ways are, I should probably say, what are the Core Web Vitals metrics? There's currently three metrics that are in the Core Web Vitals. There's largest contentful paint, there's cumulative layout shift, and there's first input delay. Now, in a lot of modern Web experiences we find that images tend to be one of the largest visible elements on the page. We see a lot of product pages where we have a big image that's the main product item image. We see images in carousels, in stories and in banners.

Addy Osmani: Now, largest contentful paint, or LCP, is a Core Web Vitals metric that tries to measure when the largest contentful element, whether it's an image text or something else, is in a user's viewport, such that we're able to tell when that image becomes visible. And that really allows a browser to determine when the main content of the page has really finished rendering.

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

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

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

Addy Osmani: หากคุณไม่จำเป็นต้องใช้ SSR หรือการเรนเดอร์ฝั่งเซิร์ฟเวอร์ หากคุณกำลังรอเบราว์เซอร์เพื่อค้นหากลุ่ม JavaScript ของคุณ บันเดิลสำหรับส่วนประกอบของคุณ ไม่ว่าคุณจะมีส่วนประกอบสำหรับอิมเมจฮีโร่หรืออิมเมจผลิตภัณฑ์ของคุณ หากเบราว์เซอร์ต้องรอเพื่อดึงข้อมูล แยกวิเคราะห์ ดำเนินการ รวบรวมและดำเนินการไฟล์ต่าง ๆ เหล่านี้ทั้งหมดก่อนที่จะสามารถค้นพบภาพได้ นั่นอาจหมายความว่าภาพที่มีเนื้อหาที่ใหญ่ที่สุดของคุณจะใช้เวลาสักครู่ก่อนที่จะค้นพบได้

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

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

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

Addy Osmani: และสำหรับรูปแบบภาพสมัยใหม่ เราได้พูดถึงรูปแบบก่อนหน้านี้ แต่ให้พิจารณา WebP, AVIF ของคุณ, JPEG XL ของคุณ หลีกเลี่ยงการเสียพิกเซล การมีกลยุทธ์ที่ดีในด้านคุณภาพเป็นสิ่งสำคัญมาก และฉันคิดว่ามีหลายกรณีที่แม้แต่คุณภาพเริ่มต้นในบางครั้งอาจมากเกินไป ดังนั้น ฉันจะทดลองโดยพยายามลดอัตราบิต ลดการตั้งค่าคุณภาพ และดูว่าคุณสามารถทำอะไรกับผู้ใช้ได้มากเพียงใดในขณะที่ยังคงความคมชัด

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

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

Drew McLellan: ไปเลยใช่

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

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

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

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

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

Addy Osmani: และสุดท้าย Core Web Vital ล่าสุดคืออินพุตล่าช้าครั้งแรก นี่คือสิ่งที่ผู้คนมักไม่ค่อยนึกถึงเมื่อพูดถึงภาพ ดังนั้นจึงเป็นไปได้ที่รูปภาพจะบล็อกแบนด์วิดท์และ CPU ของผู้ใช้ในการโหลดหน้าเว็บ พวกเขาสามารถขัดขวางวิธีการโหลดทรัพยากรที่สำคัญอื่น ๆ โดยเฉพาะอย่างยิ่งในการเชื่อมต่อที่ช้ามากหรือบนอุปกรณ์พกพาระดับล่างที่อาจทำให้แบนด์วิดท์อิ่มตัว

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

Drew McLellan: มีอะไรที่เราสามารถทำได้กับรูปภาพเพื่อหยุดการบล็อกการเรนเดอร์หรือไม่ เราสามารถเอาภาระออกจากเบราว์เซอร์ในช่วงเริ่มต้นนั้นเพื่อให้เราสามารถโต้ตอบได้เร็วขึ้นหรือไม่?

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

Drew McLellan: ใช่ ฉันหมายความว่า คุณพูดถึงรูปภาพที่โหลดแบบ Lazy Loading ที่เราเคยต้องใช้ไลบรารี JavaScript เพื่อทำ ซึ่งมีข้อบกพร่องของตัวเอง ฉันคิดว่าเนื่องจากวิธีทางประวัติศาสตร์ที่เบราว์เซอร์ปรับการโหลดรูปภาพให้เหมาะสม ซึ่งแทบจะเป็นไปไม่ได้เลยที่จะหยุดพวกเขาโหลดรูปภาพ เว้นแต่คุณจะไม่ได้ให้แหล่งที่มา และถ้าคุณไม่ระบุแหล่งที่มาแล้วลองแก้ไขด้วย JavaScript หลังจากนั้น หาก JavaScript ไม่ทำงาน คุณจะไม่ได้รับภาพ การโหลดแบบ Lazy Loading การโหลดแบบ Native Lazy Loading คือคำตอบทั้งหมด

Addy Osmani: ใช่แน่นอน และฉันคิดว่านี่คือที่ที่เราพยายามปรับปรุงในเบราว์เซอร์ต่างๆ ซึ่งเป็นประสบการณ์การโหลดแบบเนทีฟในปีที่แล้ว อย่างที่คุณทราบ นี่เป็นหนึ่งในคุณสมบัติที่เราจัดส่งบางอย่างก่อน และเราสามารถใช้ประโยชน์ของการสนทนากับผู้นำทางความคิดในอุตสาหกรรมเพื่อทำความเข้าใจ เช่น “โอ้ เฮ้ จริงๆ แล้วคุณตั้งค่าเกณฑ์อะไรด้วยตัวเองจริงๆ หากคุณกำลังใช้ขนาดสันหลังยาวหรือคุณใช้ไลบรารีการโหลดแบบสันหลังยาวของ JavaScript อื่นอยู่” จากนั้นเราปรับเกณฑ์ของเราเพื่อพยายามเข้าใกล้สิ่งที่คุณคาดหวังให้มากขึ้นเล็กน้อย

Addy Osmani: ในหลายกรณี คุณสามารถใช้การโหลดแบบ Lazy Loading ดั้งเดิมได้ หากคุณต้องการสิ่งที่ละเอียดกว่านี้มาก หากคุณต้องการการควบคุมที่มากขึ้นในการตั้งค่าเกณฑ์การสังเกตการณ์ทางแยก จุดที่เบราว์เซอร์จะร้องขอสิ่งต่าง ๆ โดยทั่วไปเราแนะนำให้ไปและใช้ไลบรารีในกรณีเหล่านั้น เพียงเพราะว่าเรากำลังพยายามแก้ปัญหาสำหรับกรณีการใช้งาน 90% แต่ 10% ก็ยังใช้ได้ อาจมีคนที่ยังต้องการอะไรอีกสักหน่อย ดังนั้น สำหรับคนส่วนใหญ่ ฉันหวังว่าการโหลดแบบเนทีฟแบบเนทีฟจะดีพอสำหรับอนาคตอันใกล้

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

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

แอดดี้ ออสมานี: หากมีรายการสิ่งที่คุณต้องทำมากมาย ลองพิจารณาโอกาสสูงสุดที่คุณมีในนั้น ว่า “โอ้ เฮ้ คุณประหยัดเวลาได้หลายวินาทีถ้าคุณจะทำสิ่งนี้” สิ่ง." และเน้นพลังงานของคุณที่นั่นเพื่อเริ่มต้น

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

Drew McLellan: นั่นเป็นคำแนะนำที่ดี ตอนนี้ฉันรู้ว่ามันเป็นสิ่งพิมพ์ที่ยอดเยี่ยม แต่ฉันต้องแสดงความยินดีกับคุณในหนังสือเล่มนี้จริงๆ เป็นเนื้อหาที่ครอบคลุมและเข้าใจง่ายมาก ฉันคิดว่ามันเป็นการอ่านที่มีคุณค่าจริงๆ

Drew McLellan: ฉันจึงได้เรียนรู้ทุกอย่างเกี่ยวกับการเพิ่มประสิทธิภาพภาพ คุณได้เรียนรู้อะไรเมื่อเร็ว ๆ นี้ แอดดี้?

แอดดี้ ออสมานี: ช่วง นี้ฉันเรียนรู้อะไรไปบ้าง? ที่จริงแล้ว ในหัวข้อที่ต่างออกไปเล็กน้อยซึ่งยังคงเกี่ยวข้องกับรูปภาพ ดังนั้นเมื่อตอนที่ฉันเรียนปริญญาโทที่วิทยาลัย ฉันจึงได้เจาะลึกถึง Computer Vision และพยายามทำความเข้าใจ เราจะตรวจจับส่วนต่างๆ ของภาพได้อย่างไร สิ่งที่น่าสนใจกับพวกเขา?

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

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

Addy Osmani: และนั่นก็สนุกดี ฉันได้เรียนรู้มากมายเกี่ยวกับความเสถียรของการประกอบเว็บในเบราว์เซอร์ต่างๆ คุณสามารถใช้แนวคิดเหล่านี้สำหรับกรณีการใช้งานแอปพลิเคชันเดสก์ท็อปได้ดีเพียงใด และมันก็สนุกจริงๆ ดังนั้นฉันจึงได้ขุดค้นเว็บแอสเซมบลีจำนวนมากเมื่อเร็ว ๆ นี้ และมันก็เจ๋ง

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

Drew McLellan: ถ้าคุณผู้ฟังที่รัก ต้องการทราบข้อมูลเพิ่มเติมจาก Addie คุณสามารถพบเขาบน Twitter ซึ่งเขาคือ @AddieOsmani และค้นหาโครงการทั้งหมดของเขาที่เชื่อมโยงจาก AddyOsmani.com หนังสือ “Image Optimization” มีจำหน่ายทั้งทางร่างกายและทางดิจิทัลจาก Smashing ที่ smashingmagazine.com ขอบคุณที่มาร่วมงานกับเราในวันนี้ แอดดี้ คุณมีคำพรากจากกันบ้างไหม?

แอดดี้ ออสมานี: มีคำพรากจากกันบ้างไหม? ฉันมีมุมแหลมเล็กน้อยจากประวัติศาสตร์ที่จะแบ่งปันกับผู้คน Tim Berners-Lee อัปโหลดภาพแรกบนอินเทอร์เน็ตในปี 1992 ฉันไม่แน่ใจว่าคุณจะเดาได้ไหมว่ามันคืออะไร แต่คุณอาจจะแปลกใจ ดรูว์ คุณเดาได้ไหม?

Drew McLellan: ฉันเดาว่าเป็นแมว

Addy Osmani: แมว เป็นการเดาที่ดี แต่ไม่ใช่ นี่คือที่ CERN และภาพนั้นเป็นของวงดนตรีชื่อ Les Horribles Cernettes ซึ่งเป็นวงดนตรีป๊อปล้อเลียนที่เกิดจากกลุ่มพนักงาน CERN และเพลงที่พวกเขาทำก็เหมือนกับเพลงดูวอป และพวกเขาจะร้องเพลงรักเกี่ยวกับ colliders และ quirks และไนโตรเจนเหลวและ anti-matter ที่สวมชุดอายุหกสิบเศษซึ่งฉันพบว่ายอดเยี่ยมและสุ่ม