รูปที่เตรียมไว้ให้เห็นเต็มจอคอมอาจถูกแสดงบนมือถือในพื้นที่เล็กลงมาก แต่ถ้าหน้ายังเรียกไฟล์เดียวกัน โทรศัพท์ก็ต้องรับข้อมูลต้นทางเท่าเดิมก่อนย่อให้พอดี พื้นที่ที่มองเห็นเล็กลงจึงไม่ได้แปลว่างานดาวน์โหลดลดลงตามไปด้วย
ขณะเดียวกัน การส่งรูปเล็กที่สุดให้มือถือทุกเครื่องก็อาจทำให้เส้นหรือข้อความไม่คม เพราะพื้นที่ใน CSS กับความละเอียดพิกเซลของหน้าจอเป็นคนละส่วนที่ต้องคิดร่วมกัน
แนวทางที่น่าสนใจคือเตรียมภาพที่เหมาะสมหลายขนาด แล้วบอกข้อมูลการใช้งานให้เบราว์เซอร์ช่วยเลือกครับ โดยยังตรวจว่าไฟล์ที่ถูกเลือกจริงตรงกับหน้าที่ของภาพหรือไม่
สมมติว่าภาพแสดงกว้าง 360 CSS pixels จอที่มีความหนาแน่นพิกเซลต่างกันอาจต้องใช้จำนวนพิกเซลภาพต่างกันเพื่อให้รายละเอียดดูใกล้เคียงกัน ตัวอย่างนี้จึงใช้แยกแนวคิด ไม่ใช่กติกาว่าทุกเครื่องต้องโหลดไฟล์กว้างเท่าตัวเลขเดียว
การตั้ง width:100% ช่วยให้ภาพพอดีกับกรอบ แต่ไม่ได้บอกให้เบราว์เซอร์สร้างไฟล์เล็กจากต้นฉบับบนเซิร์ฟเวอร์ หากต้องการลดข้อมูล ต้องมีไฟล์ทางเลือกหรือบริการที่ส่งภาพขนาดที่เลือกได้จริงด้วย
เริ่มจากตรวจขนาดกรอบของหน้าในแต่ละช่วงหน้าจอ รวมทั้งระยะขอบกับความกว้างสูงสุดของคอลัมน์ เพราะภาพในบทความอาจไม่ได้กินเต็ม viewport เสมอ หากบอกพื้นที่กว้างกว่าที่แสดงจริงมาก เบราว์เซอร์ก็อาจเลือกไฟล์เกินความจำเป็น
รูป thumbnail ในรายการกับรูปในหน้าบทความควรถูกพิจารณาแยกกันด้วย แม้ใช้ภาพต้นฉบับเดียวกัน แต่พื้นที่และความสำคัญในการโหลดต่างกัน จึงไม่จำเป็นต้องส่งตัวเลือกชุดเดียวทุกตำแหน่ง
สำหรับภาพเดียวกันที่ย่อขยายโดยรักษาเนื้อหาไว้ สามารถให้รายการไฟล์กับความกว้างผ่าน srcset และบอกขนาดที่คาดว่าจะแสดงผ่าน sizes เพื่อให้เบราว์เซอร์มีข้อมูลประกอบการเลือก
ตัวอย่างสมมติสำหรับคอลัมน์บทความที่มีขอบรวม 32px ในจอเล็ก และกว้างสูงสุด 864px:
<img
src="/images/diagram-1200.webp"
srcset="/images/diagram-480.webp 480w,
/images/diagram-960.webp 960w,
/images/diagram-1440.webp 1440w"
sizes="(max-width: 896px) calc(100vw - 32px), 864px"
width="1440"
height="810"
alt="แผนผังการเชื่อมต่อของระบบ"
style="width:100%;height:auto"
>
ตัวเลขต้องเปลี่ยนให้ตรง layout จริงและขนาดของไฟล์แต่ละตัว ไม่ใช่แค่แก้ชื่อไฟล์ให้ดูเหมือนมีขนาดนั้น การระบุความกว้างผิดทำให้ข้อมูลที่เบราว์เซอร์ใช้ตัดสินใจไม่ตรงกับทรัพยากรที่ได้รับ
sizes ไม่ใช่คำสั่ง CSS ที่จัดความกว้างภาพ ส่วน srcset ก็ไม่ได้สัญญาว่าถึง breakpoint หนึ่งแล้วจะสลับไฟล์ตามที่เราคาดแบบตายตัว เบราว์เซอร์ยังใช้ข้อมูลสภาพการเปิดหน้าในการเลือก จึงควรตรวจผลจริงแทนการอนุมานจาก markup อย่างเดียว
บางภาพเมื่อย่อทั้งใบแล้วรายละเอียดสำคัญเล็กเกินไป เช่น diagram ที่มีกล่องมาก หรือภาพถ่ายที่จุดสนใจอยู่มุมหนึ่ง กรณีนี้อาจต้องมีภาพตัดหรือจัดวางสำหรับจอแคบโดยเฉพาะ ซึ่งต่างจากการย่อไฟล์เดิมเฉยๆ
picture กับ source ใช้กำหนดแหล่งภาพตามเงื่อนไขที่ระบุได้ จึงเหมาะกับโจทย์ที่ต้องควบคุมเนื้อหาหรืออัตราส่วนของภาพ ส่วนการเลือกไฟล์ย่อของภาพเดียวกันยังเป็นหน้าที่ที่ใช้ srcset ได้
เวลาทำ art direction ต้องดูด้วยว่าจุดที่อธิบายในเนื้อหายังอยู่ครบหรือไม่ ไม่ตัด label ที่บทความอ้างถึงออกไปเพียงเพื่อให้ภาพเต็มจอสวย และถ้าอัตราส่วนเปลี่ยนควรจองพื้นที่ตามแต่ละแบบเพื่อไม่ให้หน้าเคลื่อนตอนภาพมา
สำหรับ diagram ที่รายละเอียดมาก บางครั้งการแยกเป็นภาพย่อยตามประเด็นอาจช่วยคนอ่านได้มากกว่าสร้างไฟล์ใหญ่แล้วให้ซูมทุกครั้ง ควรเลือกจากสิ่งที่ต้องอธิบาย ไม่ใช่ใช้ responsive image แก้ปัญหาข้อมูลแน่นในภาพทุกกรณี
เปิดหน้าด้วย viewport และความหนาแน่นจอที่ต้องการตรวจ แล้วดู currentSrc ของรูปกับคำขอใน Network จะรู้ว่าใช้ไฟล์ใด รวมถึงดูขนาดแสดงและมิติของไฟล์ประกอบ ไม่ตรวจเพียงค่า src เพราะอาจไม่ใช่ตัวที่ถูกเลือกจากชุดทางเลือก
ควรมีรอบเปิดใหม่ภายใต้สถานะแคชที่กำหนดด้วย การย่อหน้าต่างหลังโหลดรูปใหญ่แล้วไม่ได้รับรองว่าเบราว์เซอร์จะดาวน์โหลดไฟล์เล็กแทนทันที ผลที่เห็นจากการลากหน้าต่างไปมาอาจไม่แทนการเข้าหน้าครั้งแรกบนมือถือ
ดูข้อมูลที่โอนจริงร่วมกับความคมของภาพ ทั้งตัวหนังสือ เส้นบาง และภาพที่มีรายละเอียดแตกต่างกัน การลดจำนวน bytes จะมีความหมายเมื่อภาพยังทำหน้าที่ได้ ไม่ใช่ลดข้อมูลได้แล้วคนอ่านต้องออกไปเปิดภาพอื่นเพื่อเข้าใจเรื่องเดิม
ถ้าเว็บมีบทความเพิ่มเรื่อยๆ ควรเก็บต้นฉบับและสร้างขนาดที่ต้องใช้เป็นกระบวนการเดียวกับการรับภาพ พร้อมเก็บมิติและชนิดไฟล์ไว้ การเตรียมด้วยมือทุกครั้งมีโอกาสที่บทเก่ากับบทใหม่ใช้เงื่อนไขไม่เหมือนกัน
จำนวนตัวเลือกไม่ต้องมากทุกพิกเซล ควรเริ่มจากตำแหน่งใช้ภาพจริงและช่วงที่มีเหตุผล แล้วตรวจว่าตัวเลือกที่เพิ่มลดข้อมูลได้คุ้มกับพื้นที่เก็บกับงานดูแลหรือไม่ ส่วนการเปลี่ยนรูปแบบไฟล์ก็ควรมีทางรองรับตามเบราว์เซอร์ที่เว็บสนใจ
เมื่อรายงานผลให้ระบุหน้า สภาพจอ ไฟล์ที่เลือก และการตั้งแคช ภาพในบทนี้แสดงกระบวนการเลือกเท่านั้น ไม่มีผลเปรียบเทียบน้ำหนักหรือความเร็วที่อ้างจากเว็บจริง จึงต้องวัดเพิ่มก่อนบอกว่าการสร้างชุดภาพช่วยลดได้เท่าไร
ตรวจกรณี URL ทางเลือกใช้ไม่ได้ด้วย เพื่อให้คนอ่านยังมีทางเข้าใจภาพผ่านข้อความทดแทนและเนื้อหาประกอบได้
มือถือควรได้รับภาพตามพื้นที่แสดงและสภาพจอ โดยมีไฟล์ทางเลือกกับข้อมูลที่ถูกต้องให้เบราว์เซอร์เลือก ใช้ srcset กับ sizes สำหรับภาพเดียวกันหลายขนาด และพิจารณา picture เมื่อเนื้อหาภาพต้องเปลี่ยน เมื่อย้อนตรวจไฟล์จริงพร้อมความคมและข้อมูลที่โอน เราจะลดงานโหลดได้โดยยังรักษาหน้าที่ของภาพในบทความไว้ครับ