ปรับขนาดรูปให้ถูก: เลิกส่งรูปใหญ่เกินจำเป็น

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

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

ทำไมรูปภาพที่มีขนาดใหญ่เกินไปจึงมีต้นทุนสูง

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

แถวแรกคือกรณีทั่วไปบนเว็บไซต์ที่ผู้ดูแลระบบอัปโหลดภาพตรงมาจากกล้อง เบราว์เซอร์ดาวน์โหลดไฟล์ขนาด 4.2 MB ย่อขนาดลง และแสดงผลเทียบเท่ากับไฟล์ขนาด 180 KB

วิธีวัดขนาดการแสดงผลจริง

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

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

กฎการคูณสองสำหรับหน้าจอความหนาแน่นสูง

คูณความกว้างในการแสดงผลด้วย 2 แล้วหยุดแค่นั้น เพราะหน้าจอที่มีความหนาแน่นเกินกว่านั้นจะไม่แสดงความคมชัดที่ดีขึ้นจนสังเกตเห็นได้ รูปภาพที่แสดงผลที่ 700 พิกเซลควรส่งออกที่ขนาด 1400

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

ความกว้างในการแสดงผลทั่วไปที่ควรปรับขนาดให้

• รูปภาพในเนื้อหาบทความ: แสดงผลประมาณ 700 px, ส่งออกที่ 1400 px
• แบนเนอร์หลักเต็มความกว้าง: แสดงผลสูงสุด 1920 px, ส่งออกที่ 1920 px และบีบอัดให้มากขึ้น
• ฟีเจอร์ครึ่งความกว้าง: แสดงผลประมาณ 600 px, ส่งออกที่ 1200 px
• ภาพย่อยในตารางสินค้า: แสดงผลประมาณ 300 px, ส่งออกที่ 600 px
• รูปผู้เขียนหรือรูปโปรไฟล์: แสดงผลประมาณ 80 px, ส่งออกที่ 160 px
• โลโก้ในส่วนหัว: แสดงผลประมาณ 180 px, ส่งออกที่ 360 px หรือใช้กราฟิกแบบเวกเตอร์

ทำไมรูปภาพเต็มความกว้างจึงเป็นข้อยกเว้น

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

โดยทั่วไปแบนเนอร์จะถูกมองจากระยะไกลและมีรายละเอียดปลีกย่อยน้อยกว่ารูปถ่ายสินค้า ซึ่งหมายความว่าการบีบอัดแบบเข้มงวดจะสังเกตเห็นได้น้อยกว่าบนภาพเหล่านี้ แบนเนอร์ขนาด 1920 พิกเซลที่ระดับคุณภาพ 70 ในรูปแบบ WebP มักจะมีขนาดต่ำกว่า 200 KB และดูถูกต้องบนทุกหน้าจอ ในขณะที่เวอร์ชัน 3840 พิกเซลไม่ได้ให้ประโยชน์ที่มองเห็นได้ชัดเจน แต่มีน้ำหนักไฟล์ถึง 4 เท่า

วิธีแก้ไขคลังรูปภาพทั้งหมด

หากต้องการปรับขนาดเว็บไซต์ที่มีอยู่แล้วให้ถูกต้อง ให้ทำตาม 6 ขั้นตอนเหล่านี้

1. ระบุรายการช่องแสดงรูปภาพในดีไซน์ของคุณ ซึ่งโดยปกติจะมีขนาดที่แตกต่างกันประมาณ 4 ถึง 6 ขนาด ไม่ใช่หลายสิบขนาด
2. วัดความกว้างในการแสดงผลของแต่ละช่องโดยใช้เครื่องมือตรวจสอบของเบราว์เซอร์บนหน้าเว็บจริง
3. คูณความกว้างแต่ละค่าด้วย 2 เพื่อให้ได้ขนาดสำหรับส่งออก
4. จัดเรียงคลังภาพลงในโฟลเดอร์ตามช่องแสดงผล เนื่องจากการประมวลผลแบบชุดจะใช้ขนาดเดียวกับทุกไฟล์ในโฟลเดอร์นั้น
5. ปรับขนาดแต่ละโฟลเดอร์ให้มีความกว้างตามเป้าหมาย จากนั้นบีบอัดและแปลงไฟล์ในขั้นตอนเดียวกัน
6. แทนที่ไฟล์โดยใช้ชื่อเดิม เพื่อให้หน้าเว็บที่มีอยู่ยังคงใช้งานได้ต่อ

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

รูปภาพแบบ Responsive และแอตทริบิวต์ srcset

ใช้ srcset เพื่อเสนอขนาดที่หลากหลายและให้เบราว์เซอร์เลือกขนาดที่เหมาะสมที่สุดสำหรับแต่ละอุปกรณ์ โทรศัพท์มือถือจะดาวน์โหลดไฟล์ขนาด 400 พิกเซล ในขณะที่เดสก์ท็อปจะดาวน์โหลดไฟล์ขนาด 1400 พิกเซลจากมาร์กอัปเดียวกัน

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

ปรับขนาดก่อนบีบอัดเสมอ

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

ลำดับขั้นตอนยังมีผลต่อรูปลักษณ์ของผลลัพธ์ด้วย รูปภาพที่ถูกบีบอัดในขนาดเต็มจะมีสิ่งแปลกปลอม (Artifacts) ที่จะสังเกตเห็นได้ชัดเจนยิ่งขึ้นเมื่อรูปภาพถูกย่อขนาดลง เนื่องจากสิ่งแปลกปลอมเหล่านั้นจะย่อตามไปด้วย การปรับขนาดก่อนจะช่วยให้ได้ต้นฉบับที่สะอาดขึ้นสำหรับตัวเข้ารหัส และให้ผลลัพธ์ที่ดีกว่าอย่างเห็นได้ชัดในขนาดไฟล์ที่เท่ากัน

สิ่งนี้ส่งผลอย่างไรต่อความเร็วของหน้าเว็บ

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

ผลลัพธ์จะมุ่งเน้นไปที่ผู้เข้าชมบนมือถือ ซึ่งการเชื่อมต่อช้ากว่าและมีต้นทุนค่าอินเทอร์เน็ต Largest Contentful Paint จะดีขึ้นโดยตรง เนื่องจากตัวชี้วัดนั้นมักถูกกำหนดโดยรูปภาพขนาดใหญ่เพียงรูปเดียว การผ่านการตรวจสอบเรื่องการปรับขนาดรูปภาพให้ถูกต้อง (Properly size images audit) ใน Lighthouse มักจะช่วยล้างคำเตือนที่เกี่ยวข้องอีก 2 หรือ 3 ข้อไปพร้อมกันด้วย

ห้ามขยายภาพให้ใหญ่ขึ้นเพื่อให้พอดีเด็ดขาด

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

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

การตรวจสอบหน้าเว็บสำหรับรูปภาพที่มีขนาดใหญ่เกินไป

เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ (Developer tools) สลับไปที่แท็บ Network กรองด้วยรูปภาพ (Images) และรีโหลดหน้าเว็บ รายการจะแสดงรูปภาพทั้งหมดพร้อมขนาดที่ถ่ายโอน โดยเรียงจากขนาดใหญ่ที่สุดก่อน

รูปภาพใดๆ ที่มีขนาดเกิน 500 KB ควรค่าแก่การตรวจสอบ และหน้าเว็บใดก็ตามที่รูปภาพมีขนาดรวมกันมากกว่า 2 MB ถือว่ามีปัญหา วางเมาส์เหนือรูปภาพในแผง Elements เพื่อดูขนาดที่แท้จริงและขนาดที่แสดงผลเคียงข้างกัน ช่องว่างขนาดใหญ่ระหว่างตัวเลข 2 ค่านี้คือคำนิยามของรูปภาพที่มีขนาดไม่ถูกต้อง และสามารถมองเห็นได้ภายในไม่กี่วินาที

การปรับขนาดคลังรูปภาพทั้งหมดในการประมวลผลครั้งเดียว

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

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