วิธีลดขนาดไฟล์รูปสำหรับเว็บ

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

มาใส่ตัวเลขจริงกัน

ขนาดเป้าหมายที่ควรเล็ง

คุณไม่ต้องเดา นี่คืองบน้ำหนักที่ใช้ได้จริงซึ่งทำให้หน้าเว็บเร็ว

• ฮีโร่ / แบนเนอร์เต็มความกว้าง: ต่ำกว่า 200 KB ในอุดมคติราว 100–150 KB
• ภาพถ่ายในบทความ: 80–150 KB ต่อภาพ
• ภาพย่อ / อวตาร: 10–30 KB
• โลโก้หรือไอคอน (PNG/SVG): ต่ำกว่า 30 KB มักน้อยกว่านั้นมาก

และมิติ:

• ฮีโร่เต็มความกว้าง: 1600–2000 px กว้างก็เหลือเฟือสำหรับเลย์เอาต์ส่วนใหญ่ (คูณสองเฉพาะถ้าคุณเล็งจอเรตินาและรับไบต์เพิ่มได้)
• ภาพถ่ายในคอลัมน์: ให้เท่าความกว้างเนื้อหาของคุณ มักเป็น 800–1200 px
• ภาพย่อ: ขนาดที่มันแสดงจริง เช่น 300–400 px

ถ้ารูปเดียวใด ๆ บนหน้าเกินราว 300 KB มันมักเป็นความผิดพลาดที่ควรค่าแก่การแก้

ขั้นที่ 1: ย่อให้เท่าความกว้างที่แสดงจริง

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

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

การปรับขนาดให้ถูกอย่างเดียวมักตัดขนาดไฟล์ลง 80–90% ก่อนคุณจะบีบอัดแม้แต่ไบต์เดียว

ขั้นที่ 2: บีบอัดสิ่งที่เหลือ

ตอนนี้หดข้อมูลภายในมิติที่ถูกต้องเหล่านั้น

• ภาพถ่าย (JPG/WebP): ตั้งสไลเดอร์คุณภาพที่ 75–85 นั่นคือไร้การสูญเสียในสายตาสำหรับรูปส่วนใหญ่ในขณะที่ตัดขนาดลงมาก
• PNG (ภาพหน้าจอ กราฟิก): เครื่องมือบีบอัดรูป ลดพวกมันลงเหลือพาเลตต์ 256 สี มักประหยัด 60–80% โดยไม่มีการเปลี่ยนแปลงที่มองเห็นและรักษาความโปร่งใส

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

เลือกฟอร์แมตที่ถูกไปพร้อมกัน

ถ้ารูปของคุณจะถูกส่งให้เบราว์เซอร์สมัยใหม่ การแปลงภาพถ่ายเป็น WebP มักเอาชนะ JPEG อีก 25–35% ที่คุณภาพเดียวกัน กราฟิกแบนยังเป็น PNG (หรือ WebP) อย่าบันทึกภาพถ่ายเป็น PNG นั่นคือความผิดพลาดพองตัวคลาสสิก โทษง่าย ๆ 5–10 เท่า

ขั้นตอนงานตามจริง

สำหรับโพสต์บล็อกที่มีภาพถ่ายห้าภาพ

1. ย่อแต่ละภาพให้เท่าความกว้างคอลัมน์ของคุณ (สัก 1200 px)
2. บีบอัดที่คุณภาพ 80 หรือแปลงเป็น WebP
3. ยืนยันว่าแต่ละภาพตกต่ำกว่าราว 150 KB
4. เช็กครอป 100% ของภาพหนึ่งเพื่อให้แน่ใจว่าคุณภาพยังอยู่

ภาพถ่ายห้าภาพที่เริ่มต้นรวม 20 MB จะตกราว 600 KB หน้าเว็บที่โหลดในพริบตาแทนที่จะอืด

เป็นส่วนตัวและออฟไลน์

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