เตรียมรูปภาพสำหรับเว็บให้เบาและคมชัด

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

เลือกขนาดจากพื้นที่ที่ภาพจะไปวาง

หลักง่าย ๆ คือภาพไม่ควรกว้างเกินสองเท่าของพื้นที่ที่มันจะแสดง ภาพที่วางเต็มความกว้างหน้าจอทั่วไปพอที่ 1600 ถึง 2000 พิกเซล ภาพประกอบในเนื้อหาพอที่ 800 ถึง 1200 พิกเซล ส่วนรูปเล็กในรายการพอที่ 400 พิกเซล การอัปโหลดภาพ 4000 พิกเซลมาแสดงในกรอบ 300 พิกเซลคือการส่งข้อมูลทิ้งไปเปล่า ๆ

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

นามสกุลไฟล์ เลือกตามชนิดของภาพ

ภาพถ่าย ใช้ JPEG หรือ WebP คุณภาพประมาณ 75 ถึง 82 มักมองไม่เห็นความต่างจากต้นฉบับ
ภาพที่มีพื้นโปร่งใส ใช้ PNG หรือ WebP
โลโก้ ไอคอน แผนภาพเส้น ใช้ SVG เพราะคมทุกความละเอียดและไฟล์เล็กมาก
ภาพเคลื่อนไหวสั้น ใช้วิดีโอแทน GIF เพราะไฟล์เล็กกว่ามากที่คุณภาพเท่ากัน

บีบอัดอย่างไรไม่ให้ภาพพัง

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

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

ตั้งชื่อไฟล์และเขียนคำบรรยาย

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

ทุกภาพที่สื่อความหมายควรมีข้อความ alt ที่บอกสิ่งที่ภาพต้องการสื่อ ไม่ใช่บรรยายทุกอย่างในภาพ ส่วนภาพที่เป็นการตกแต่งล้วน ให้ปล่อย alt เป็นค่าว่าง เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป ไม่ใช่ใส่คำว่ารูปภาพซ้ำทุกใบ

กันหน้ากระตุกด้วยการจองพื้นที่

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

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