การปรับแต่งรูปภาพ (Image optimization)

รูปภาพควรใช้ฟอร์แมต JPG, PNG, WebP หรือ AVIF

พื้นฐานในปัจจุบันคือใช้ WebP หรือ AVIF กับรูปถ่ายเป็นหลัก และใช้ SVG กับโลโก้ · ไอคอน web.dev แนะนำให้ใช้ถ้าทำได้ เพราะ WebP กับ AVIF มักบีบอัดได้ดีกว่าฟอร์แมตเก่า (JPG · PNG)

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

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

โลโก้ที่ต้องการพื้นหลังโปร่งใส หรือรูปสินค้าที่ลบพื้นหลังแล้ว หลายครั้งบันทึกเป็น WebP แทน PNG ก็เบากว่า

รูปบนเว็บไซต์ควรอัปโหลดขนาดกี่พิกเซล กี่ KB

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

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

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

ถ้าดูตามธุรกิจ จุดที่มักหนักที่สุดคือแกลเลอรีเมนูของคาเฟ่ · ร้านอาหาร รูปก่อนและหลังทำของร้านทำผม และรูปรายละเอียดสินค้าของร้านขายออนไลน์ ตรวจจุดเหล่านี้ก่อนจะได้ผลมาก

รูปภาพแบบ Responsive กับ Lazy loading คืออะไร

รูปภาพแบบ Responsive คือการเตรียมรูปเดียวกันไว้หลายขนาด แล้วส่งแค่ขนาดที่เหมาะกับหน้าจอลูกค้า ถ้าใช้การตั้งค่า srcset · sizes ของ HTML เบราว์เซอร์จะดูขนาดหน้าจอแล้วเลือกไฟล์ที่เหมาะเอง

Lazy loading คือวิธีโหลดรูปส่วนล่างของหน้าจอเมื่อลูกค้าเลื่อนเข้ามาใกล้ แต่ web.dev แนะนำว่าอย่าตั้ง Lazy loading กับรูปที่เห็นในหน้าจอแรก โดยเฉพาะรูปที่ใหญ่ที่สุด เพราะหน้าจอแรกกลับจะโหลดช้าลง

การระบุความกว้าง · ความสูง (width · height) ของแต่ละรูปก็สำคัญ ถ้าไม่รู้ขนาด ตอนรูปโหลดขึ้นมาข้อความจะถูกดันลงไป จนลูกค้ากดปุ่มผิดจากที่ตั้งใจ

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

ถ้าคุณอัปโหลดรูปเอง ต้องย่ออย่างไร

ถ้าเป็นเว็บไซต์ที่หน้าผู้ดูแลย่อรูปให้อัตโนมัติ อัปโหลดต้นฉบับก็ได้ ถ้าไม่ใช่ ให้ติดนิสัยย่อรูปหนึ่งรอบตามลำดับด้านล่างก่อนอัปโหลด

รูปที่ลงบ่อยอย่างเมนูใหม่ของคาเฟ่หรือผลงานของร้านงานฝีมือ ตั้งเกณฑ์ไว้ครั้งเดียวจะสะดวก จดเกณฑ์ที่ตกลงกับบริษัทไว้ เช่น “รูปแกลเลอรีกว้างกี่พิกเซล ใช้ WebP” แล้วย่อด้วยวิธีเดิมทุกครั้ง

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

1. 01ตรวจว่าตำแหน่งที่จะลงรูป (แบนเนอร์ แกลเลอรี รายการสินค้า) แสดงใหญ่แค่ไหนบนหน้าจอ
2. 02ใช้แอปแต่งรูปหรือเครื่องมือบีบอัดรูปฟรี ย่อความกว้างให้พอดีกับตำแหน่งนั้น
3. 03เลือกบันทึกเป็น WebP และลองลดคุณภาพลงจนตาเปล่ามองไม่เห็นความต่าง
4. 04เปลี่ยนชื่อไฟล์จาก “IMG_1234” เป็นชื่อที่บอกเนื้อหา เช่น “yeonnam-cafe-handdrip.webp”
5. 05อัปโหลดแล้ว เปิดหน้าเว็บด้วยอินเทอร์เน็ตมือถือ (ปิด Wi-Fi) เพื่อตรวจความเร็ว

คำอธิบายรูปภาพ (alt) และชื่อไฟล์ควรเขียนอย่างไร

คำอธิบายรูปภาพให้เขียนเหมือนบอกคนที่มองไม่เห็นรูปเป็นประโยคเดียวว่า “รูปนี้สื่ออะไร” Google Search Central มองว่าคำอธิบายรูปภาพเป็นแอตทริบิวต์ที่สำคัญที่สุดในข้อมูลรูปภาพ และแนะนำว่าอย่ายัดคีย์เวิร์ดลงไปอย่างฝืน ๆ

รูปที่ไม่มีเนื้อหาอย่างลวดลายหรือพื้นหลังเพื่อการตกแต่ง ปล่อยคำอธิบายว่างไว้จะถูกต้อง คำแนะนำเรื่องรูปภาพของ W3C ก็ให้ปล่อยค่าคำอธิบายของรูปตกแต่งว่างไว้ กลับกัน รูปที่มีตัวอักษรอย่างรูปเมนู ต้องคัดลอกตัวอักษรนั้นลงในคำอธิบายให้ครบ

ชื่อไฟล์ก็เป็นเบาะแสเล็ก ๆ ได้ Google แนะนำชื่อไฟล์สั้น ๆ ที่อธิบายเนื้อหา มากกว่าชื่ออย่าง “IMG00023.JPG” ถ้าตั้งชื่อด้วยตัวอักษรภาษาอังกฤษพิมพ์เล็กกับขีดกลาง (-) ที่อยู่จะไม่เพี้ยนและดูแลง่าย

• ตัวอย่างที่ดี: “เค้กสตรอว์เบอร์รีวิปครีมหนึ่งชิ้น มีสตรอว์เบอร์รีสด 3 ลูกอยู่ด้านบน”
• ตัวอย่างที่ยังไม่ดี: “ร้านเค้กอร่อย แนะนำเค้ก สั่งเค้ก” (เรียงแต่คีย์เวิร์ด)
• ตัวอย่างที่ยังไม่ดี: “รูป1” “image” (ไม่มีข้อมูลอะไรเลย)

ความผิดพลาดที่พบบ่อยในการปรับแต่งรูปภาพมีอะไรบ้าง

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

การลงเมนู · ตารางราคา · ประกาศโปรโมชันเป็นรูปรูปเดียวก็เป็นปัญหา นอกจากหนักแล้ว เครื่องมือค้นหาและโปรแกรมอ่านหน้าจอยังอ่านเนื้อหาไม่ได้

ตรวจความเร็วได้แค่ใส่ที่อยู่ในเครื่องมือฟรีอย่าง Google PageSpeed Insights ถ้าผลลัพธ์มีคำแนะนำให้ปรับปรุงเรื่องรูปภาพ ก็เริ่มแก้ที่รูปก่อน

ถ้ารูปในแกลเลอรีมีหลายสิบรูป อาจใช้วิธีแสดงแค่ไม่กี่รูปก่อน แล้วโหลดที่เหลือเมื่อกด “ดูเพิ่มเติม” หน้าจอแรกจะเบาลงมาก

เรื่องการปรับแต่งรูปภาพ ควรถามบริษัทรับทำเว็บไซต์อะไรบ้าง

รูปภาพเพิ่มขึ้นเรื่อย ๆ แม้หลังเปิดเว็บไซต์ จึงควรถาม 4 ข้อด้านล่างนี้ แยกระหว่างตอนอัปโหลดครั้งแรกกับตอนดูแลเว็บไซต์

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