การเลือกรูปแบบรูปภาพที่เหมาะกับเว็บ

สามคำถามที่ควรตอบก่อน

บนเว็บไซต์จริง การเลือกรูปแบบให้ภาพแต่ละภาพสรุปได้เป็นสามคำถาม

1. ภาพแสดงอะไร ภาพถ่ายเหมาะกับรูปแบบที่บีบอัดแบบสูญเสียข้อมูล เช่น JPG, WebP แบบสูญเสียข้อมูล และ AVIF เพราะความคลาดเคลื่อนเล็กน้อยจะกลมกลืนไปกับรายละเอียดตามธรรมชาติของภาพ ส่วนภาพหน้าจอ ข้อความ แผนภูมิ และกราฟิกสีพื้นเรียบมีขอบคม ซึ่งการบีบอัดแบบสูญเสียข้อมูลอาจทิ้งรอยฟุ้งรอบขอบที่มองเห็นได้ ภาพเหล่านี้จึงเหมาะกับรูปแบบที่ไม่สูญเสียข้อมูล (PNG, WebP แบบไม่สูญเสียข้อมูล) หรือหากวาดขึ้นจากรูปทรงก็เหมาะกับ SVG
2. ต้องการความโปร่งใสหรือภาพเคลื่อนไหวหรือไม่ JPG ไม่รองรับทั้งสองอย่าง PNG, WebP และ AVIF เก็บช่องอัลฟาได้เต็มรูปแบบ ขอบภาพจึงไล่ระดับความโปร่งใสได้อย่างนุ่มนวล ส่วนพิกเซลของ GIF เป็นได้เพียงโปร่งใสทั้งหมดหรือทึบทั้งหมด ขอบโค้งจึงอาจดูหยักหรือมีขอบสีแปลกปลอมเมื่ออยู่บนพื้นหลังที่มีสี GIF, WebP, AVIF และ APNG (PNG แบบเคลื่อนไหว) เก็บภาพเคลื่อนไหวได้ แต่วิดีโอสั้น ๆ มักมีขนาดเล็กกว่า GIF มาก
3. จะเผยแพร่ที่ใด บนหน้า HTML ของคุณเอง คุณเสนอภาพได้หลายรูปแบบ ส่วนระบบจัดการเนื้อหา (CMS) ร้านค้าออนไลน์ หรือแบบฟอร์มอัปโหลดจะกำหนดเองว่ารับไฟล์แบบใด และอาจแปลงไฟล์ให้เอง จึงควรตรวจสอบเอกสารฉบับปัจจุบันของระบบนั้น โปรแกรมอีเมลแต่ละตัวแตกต่างกันมากกว่าเบราว์เซอร์ JPG และ PNG จึงปลอดภัยกว่าสำหรับจดหมายข่าว

ดูวิธีการทำงานของแต่ละรูปแบบได้ที่JPG, PNG, WebP และ AVIF ต่างกันอย่างไร

เลือกรูปแบบตามเนื้อหา: ตารางช่วยตัดสินใจ

เมื่อแสดง AVIF หรือ WebP บนหน้าเว็บของคุณเอง ให้เก็บเวอร์ชัน JPG หรือ PNG ไว้สำหรับเบราว์เซอร์และแอปที่แสดงรูปแบบเหล่านั้นไม่ได้ หากแพลตฟอร์มรับได้เพียงไฟล์เดียว รูปแบบในคอลัมน์ไฟล์สำรองมักเป็นตัวเลือกที่ปลอดภัย ส่วน Favicon มีหลักเกณฑ์ของตัวเอง ดูขนาด รูปแบบ และแท็ก HTML ของ Favicon

สำหรับภาพวนซ้ำแบบ GIF บนหน้าเว็บ ทางเลือกที่นิยมใช้แทนคือ <video> แบบปิดเสียงที่มีแอตทริบิวต์ autoplay, loop, muted และ playsinline เพราะโดยทั่วไปเบราว์เซอร์อนุญาตให้วิดีโอที่ปิดเสียงเล่นอัตโนมัติได้ ส่วนในอีเมล Outlook บางเวอร์ชันบนเดสก์ท็อปแสดงเฉพาะเฟรมแรกของ GIF แบบเคลื่อนไหว จึงควรใส่ข้อความสำคัญไว้ในเฟรมนั้น

การใช้ WebP หรือ AVIF พร้อมไฟล์สำรอง

บนหน้าที่คุณเขียน HTML เอง องค์ประกอบ <picture> ช่วยให้แต่ละเบราว์เซอร์เลือกใช้รูปแบบแรกที่ตนรองรับ

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="พาสต้าซอสมะเขือเทศในชาม" width="1600" height="1200">
</picture>

เบราว์เซอร์จะอ่านองค์ประกอบ <source> ตามลำดับ และข้ามรายการที่มี type ซึ่งตนไม่รองรับ องค์ประกอบ <img> ซึ่งจำเป็นต้องมีจะเก็บข้อความ alt รวมถึงความกว้างและความสูงที่ช่วยให้เบราว์เซอร์จองพื้นที่ไว้ล่วงหน้า และไฟล์ของ <img> จะถูกแสดงเมื่อไม่มี source ใดตรงเงื่อนไข เมื่อใช้ CSS เช่น img { max-width: 100%; height: auto; } ภาพจะยังย่อลงให้พอดีกับหน้าจอแคบโดยคงสัดส่วนเดิมไว้ หากต้องการเสนอหลายขนาดด้วย ให้ระบุแต่ละไฟล์พร้อมความกว้างใน srcset และเพิ่มแอตทริบิวต์ sizes ตามที่อธิบายไว้ในการปรับขนาดภาพ: พิกเซล อัตราส่วนภาพ และ DPI

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

ตัวอย่างจริง: ภาพทั้งหมดในบทความหนึ่งบทความ

สมมติว่าบทความสูตรอาหารชิ้นหนึ่งมีภาพสามภาพ และคอลัมน์ข้อความกว้างไม่เกิน 760 พิกเซล CSS

• ภาพถ่ายหลัก ต้นฉบับจากโทรศัพท์มีขนาด 4032 × 3024 พิกเซล หรือประมาณ 12.2 เมกะพิกเซล คอลัมน์กว้าง 760 พิกเซลบนหน้าจอที่มี 2 พิกเซลอุปกรณ์ต่อ 1 พิกเซล CSS ต้องใช้ภาพที่กว้างประมาณ 1,520 พิกเซล ขนาด 1600 × 1200 จึงเพียงพอและคงสัดส่วน 4:3 ไว้ได้ โดยมี 1.92 เมกะพิกเซล หรือประมาณ 16% ของต้นฉบับ ให้ปรับขนาดก่อน แล้วจึงบันทึกเป็น AVIF หรือ WebP พร้อม JPG เป็นไฟล์สำรอง ต้นฉบับขนาดเต็มมีจำนวนพิกเซลมากกว่าหกเท่าของเวอร์ชัน 1600 × 1200 และเบราว์เซอร์ก็จะย่อภาพจนพิกเซลส่วนใหญ่เหล่านั้นถูกทิ้งไปอยู่ดี
• โลโก้พื้นหลังโปร่งใส ไฟล์ PNG จากนักออกแบบมีขนาด 1000 × 500 พิกเซล และแสดงที่ความกว้าง 200 พิกเซล CSS ขนาด 400 × 200 จึงเพียงพอสำหรับหน้าจอที่มี 2 พิกเซลอุปกรณ์ต่อ 1 พิกเซล CSS ให้คงไว้เป็น PNG หรือ WebP เพราะ JPG จะเติมพื้นที่โปร่งใสด้วยสีทึบ ซึ่งจะปรากฏเป็นกล่องสี่เหลี่ยมบนส่วนหัวของหน้าที่มีสีพื้น หากนักออกแบบส่งออกเป็น SVG ได้ ก็จะยิ่งดีกว่า
• ภาพหน้าจอของแอปจับเวลา มีข้อความและสีพื้นเรียบ ให้บันทึกเป็น PNG เพราะ JPG อาจเพิ่มจุดรบกวนรอบตัวอักษร ซึ่งผู้อ่านสังเกตเห็นได้ง่ายกว่าความคลาดเคลื่อนเล็กน้อยในภาพถ่าย

การแปลงไฟล์ด้วยตัวแปลงไฟล์ภาพของ LeedyBox

เครื่องมือแปลงไฟล์ภาพเปลี่ยนรูปแบบของภาพตั้งแต่หนึ่งภาพขึ้นไปในเบราว์เซอร์ของคุณ โดยไม่อัปโหลดข้อมูลภาพไปยัง LeedyBox

1. คลิก "เลือกไฟล์หรือลากและวางที่นี่" หรือลากไฟล์ PNG, JPG, WebP, BMP, GIF หรือ AVIF มาวางที่ช่องนั้น ไฟล์ประเภทอื่น เช่น HEIC หรือ SVG และไฟล์ที่เบราว์เซอร์ถอดรหัสไม่ได้จะถูกปฏิเสธพร้อมข้อความแจ้ง
2. แต่ละไฟล์จะมีเมนูเลือกรูปแบบของตัวเอง (บนหน้าจอที่กว้างพอจะมีป้าย "To:" กำกับไว้) ซึ่งตั้งต้นไว้ที่ JPG เลือก JPG, PNG, WEBP, BMP, AVIF หรือ ICO แยกทีละไฟล์ หรือตั้งให้ทุกไฟล์พร้อมกันด้วย "ตั้งค่ารูปแบบทั้งหมดเป็น..." ใน "ตัวเลือกการแปลงหลายไฟล์"
3. คลิก "แปลงและดาวน์โหลด" หากมีไฟล์เดียว ไฟล์จะถูกบันทึกในชื่อ เช่น logo_converted.webp หากมีหลายไฟล์ จะได้รับรวมกันใน leedybox_converted_images.zip

• ขนาดพิกเซลจะคงเดิม ยกเว้น ICO ให้ปรับขนาดก่อนด้วยเครื่องมือปรับขนาดภาพ หรือใช้ตัวเลือก "จำกัดความกว้างและความสูงด้วย" ในเครื่องมือบีบอัดภาพ
• สำหรับ JPG, WebP และ AVIF ตัวแปลงจะขอให้เบราว์เซอร์ใช้คุณภาพ 0.92 บนสเกล 0 ถึง 1 และไม่มีแถบเลื่อนปรับคุณภาพ การตั้งค่านี้ให้ความสำคัญกับรายละเอียดมากกว่าขนาดไฟล์ และยังหมายความว่า WebP จะถูกบันทึกแบบสูญเสียข้อมูล เพราะไม่มีตัวเลือก WebP แบบไม่สูญเสียข้อมูล จึงควรแปลงภาพหน้าจอและกราฟิกที่มีข้อความเป็น PNG หากต้องการไฟล์ที่เล็กลง เครื่องมือบีบอัดภาพมีแถบเลื่อนปรับคุณภาพ (ค่าเริ่มต้น 75) และตัวเลือกขนาดไฟล์เป้าหมาย ดูอธิบายการตั้งค่าการบีบอัดภาพ
• JPG และไฟล์ BMP ที่ตัวแปลงสร้างไม่มีความโปร่งใส พื้นที่โปร่งใสจึงกลายเป็นสีขาว ไฟล์ BMP เหล่านี้ยังไม่ถูกบีบอัด โดยใช้ 3 ไบต์ต่อพิกเซล (แต่ละแถวจะถูกเติมให้ยาวเป็นพหุคูณของ 4 ไบต์) บวกส่วนหัว 54 ไบต์ ภาพขนาด 1200 × 800 จึงมีขนาด 2,880,054 ไบต์ (ประมาณ 2.9 MB) ไม่ว่าภาพจะแสดงอะไร BMP จึงไม่เหมาะกับหน้าเว็บ
• ไฟล์ ICO เก็บภาพ PNG หนึ่งภาพและคงความโปร่งใสไว้ ภาพที่มีด้านใดด้านหนึ่งยาวเกิน 256 พิกเซลจะถูกย่อให้พอดีในกรอบ 256 × 256 โลโก้ขนาด 1000 × 500 จึงกลายเป็น 256 × 128 ส่วนภาพที่เล็กกว่านั้นจะคงขนาดเดิม หากต้องการ favicon.ico ที่มีขนาด 16, 32 และ 48 พิกเซล พร้อมไอคอน PNG และไอคอน Apple Touch ให้ใช้เครื่องมือสร้าง Favicon
• เลือก AVIF ได้เฉพาะเมื่อเบราว์เซอร์ของคุณสร้างไฟล์ AVIF ได้ ซึ่งในปัจจุบันเบราว์เซอร์หลายตัวยังทำไม่ได้ หากสร้างไม่ได้ ตัวเลือกจะแสดงเป็น "AVIF (เบราว์เซอร์นี้ไม่รองรับ)" หากเบราว์เซอร์สร้างรูปแบบที่เลือกไม่ได้ (การบันทึกเป็น WebP ก็ขึ้นอยู่กับเบราว์เซอร์เช่นกัน) จะมีข้อความแจ้งและไม่มีการบันทึกไฟล์ใด ๆ แทนที่จะบันทึกข้อมูล PNG ไว้ภายใต้นามสกุลที่ไม่ถูกต้อง เมื่อแปลงหลายไฟล์ หากไฟล์ใดไฟล์หนึ่งล้มเหลวในลักษณะนี้ การแปลงทั้งชุดจะหยุดลงและจะไม่มีการสร้างไฟล์ ZIP
• ภาพแต่ละภาพจะถูกวาดใหม่และเข้ารหัสใหม่ ข้อมูล EXIF ตำแหน่ง GPS และโปรไฟล์สีของต้นฉบับจึงไม่ถูกคัดลอกไปด้วย และ GIF, WebP หรือ AVIF แบบเคลื่อนไหวจะกลายเป็นภาพนิ่งเพียงเฟรมเดียว ตัวแปลงไม่สร้างไฟล์ SVG, GIF หรือไฟล์ภาพเคลื่อนไหว

ปัญหาที่พบบ่อยและวิธีแก้ไข

• โลโก้โปร่งใสมีกล่องสีขาวหรือสีดำล้อมรอบ ไฟล์อาจถูกบันทึกเป็น JPG หรือ BMP ที่ไม่มีความโปร่งใส ให้ใช้ PNG หรือ WebP แทน ดูเหตุผลที่ความโปร่งใสหายไปใน JPG
• PNG ใหญ่กว่า JPG ต้นทางมาก PNG เก็บทุกพิกเซลไว้อย่างแม่นยำ รวมถึงสัญญาณรบกวนและร่องรอยการบีบอัดของ JPG และการแปลงไม่ได้นำรายละเอียดที่ JPG สูญเสียไปแล้วกลับคืนมา สำหรับภาพถ่าย ให้ใช้ WebP หรือ JPG
• แบบฟอร์มอัปโหลดไม่รับ WebP หรือ AVIF บางแบบฟอร์มรับเฉพาะ JPG และ PNG ให้แปลงภาพถ่ายเป็น JPG และกราฟิกโปร่งใสเป็น PNG การเปลี่ยนนามสกุลไฟล์ไม่ได้เปลี่ยนรูปแบบไฟล์
• ไฟล์ WebP แทบไม่เล็กกว่า JPG หรือกลับใหญ่กว่า JPG ต้นฉบับอาจถูกบีบอัดมาอย่างหนักแล้ว และคุณภาพ 0.92 ของตัวแปลงยังเก็บรายละเอียดไว้มาก รวมถึงร่องรอยการบีบอัดของ JPG เอง ซึ่งต้องใช้พื้นที่ในการจัดเก็บ หากไฟล์ยังใหญ่เกินไปไม่ว่าจะเป็นรูปแบบใด ภาพอาจยังมีขนาดเต็มตามที่กล้องถ่ายมา ให้ปรับขนาดให้เท่ากับขนาดที่แสดง แล้วใช้เครื่องมือบีบอัดภาพและเปรียบเทียบผลลัพธ์
• สีดูหม่นกว่าต้นฉบับ ตัวแปลงวาดภาพแต่ละภาพบนแคนวาสของเบราว์เซอร์ ซึ่งโดยค่าเริ่มต้นทำงานในพื้นที่สี sRGB และไม่เก็บโปรไฟล์สีของต้นฉบับไว้ ภาพถ่ายในพื้นที่สีที่กว้างกว่า เช่น Display P3 หรือ Adobe RGB จึงอาจสูญเสียสีที่สดที่สุดไปบางส่วน ซึ่งจะเห็นชัดที่สุดบนหน้าจอที่แสดงขอบเขตสีกว้าง ให้ส่งออกสำเนาแบบ sRGB จากโปรแกรมแต่งภาพ ตรวจดูสีในโปรแกรมนั้น แล้วจึงแปลงสำเนานั้น
• ภาพถ่าย HEIC จากโทรศัพท์ไม่ถูกรับ HEIC ไม่อยู่ในรายการรูปแบบที่ตัวแปลงรับได้ โทรศัพท์หลายรุ่นส่งออกหรือแชร์ภาพเป็น JPG ได้ ให้แปลงสำเนานั้นแทน

สิ่งที่ควรตรวจสอบก่อนเผยแพร่

• เปิดหน้าเว็บในเบราว์เซอร์สองตัวและบนโทรศัพท์ หากใช้ <picture> ให้ทดสอบไฟล์สำรองด้วย โดยลบ source ของ AVIF และ WebP ออกชั่วคราว
• เปรียบเทียบไฟล์ใหม่กับต้นฉบับที่ขนาดจริง โดยดูที่ใบหน้า ข้อความ และการไล่ระดับสี
• ในแผง Network ของเครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์ ให้ตรวจสอบว่าไฟล์ใดถูกดาวน์โหลดและมีขนาดเท่าใด
• หากเว็บไซต์มีโหมดมืด ให้ดูภาพโปร่งใสทั้งบนพื้นหลังสีอ่อนและสีเข้ม
• เก็บต้นฉบับไว้และแปลงจากต้นฉบับ เพราะการบันทึกไฟล์แบบสูญเสียข้อมูลซ้ำจะเพิ่มความคลาดเคลื่อนใหม่ซ้อนทับความคลาดเคลื่อนเดิม

คำถามที่พบบ่อย