บีบอัดรูปภาพ _

วิธีการบีบอัดรูปภาพในเบราว์เซอร์ทำงานอย่างไร

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

1. อ่านไฟล์ที่อัปโหลดแต่ละไฟล์เป็น Blob และสร้าง URL ของออบเจ็กต์เพื่อให้เบราว์เซอร์ถอดรหัสได้ในเครื่อง โดยไม่ต้องคัดลอกไบต์ไปยังเซิร์ฟเวอร์หรือเขียนลงดิสก์
2. วาดภาพที่ถอดรหัสแล้วลงบนองค์ประกอบ Canvas นอกหน้าจอที่ขนาดพิกเซลเดิม พร้อมสำหรับการเข้ารหัสใหม่
3. เรียก canvas.toBlob(callback, mimeType, quality) เพื่อเข้ารหัสพิกเซลใหม่ ในโหมดคุณภาพ ค่าตัวเลื่อนจะแมปตรงกับการตั้งค่า quantization ของตัวเข้ารหัส ส่วนในโหมดขนาดเป้าหมาย หน้าเว็บจะแบ่งครึ่งค่าคุณภาพจนกว่า blob ผลลัพธ์จะมีขนาดต่ำกว่างบประมาณไบต์ของคุณ
4. แสดงค่าก่อน/หลังพร้อมขนาดเดิม ขนาดที่บีบอัด และเปอร์เซ็นต์การประหยัด จากนั้นเสนอปุ่มดาวน์โหลดต่อรูปภาพหรือ ZIP เดียวสำหรับทั้งกลุ่ม ZIP สร้างในหน่วยความจำโดยใช้ fflate ไลบรารีขนาด 8 KB ที่โหลดเมื่อใช้งานครั้งแรก

ทำไมต้องบีบอัดรูปภาพ?

• รูปภาพที่เล็กลงโหลดเร็วขึ้น การลดรูปภาพหลักขนาด 4 MB เหลือ 600 KB ช่วยปรับปรุง Largest Contentful Paint โดยตรง ซึ่งเป็นหนึ่งใน Core Web Vitals ที่ Google ใช้ในการจัดอันดับ บนหน้าที่มีรูปภาพหลายรูป การประหยัดจะทบต้นกลายเป็นการเรนเดอร์ครั้งแรกที่เร็วขึ้น
• แล้วก็มีขีดจำกัดการอัปโหลด แพลตฟอร์ม CMS เครื่องมือออกตั๋ว และระบบอีเมลจำนวนมากปฏิเสธสิ่งใดก็ตามที่เกิน 1 หรือ 2 MB และการบีบอัดอย่างรวดเร็วจะทำให้รูปภาพอยู่ต่ำกว่าขีดจำกัดโดยไม่ต้องเปิดโปรแกรมแก้ไขรูปภาพเต็มรูปแบบ
• แบนด์วิดท์และพื้นที่จัดเก็บมีต้นทุนเมื่อใช้ในวงกว้าง การส่ง WebP ที่คุณภาพ 0.8 แทน PNG ขนาดเต็มสามารถลดน้ำหนักรูปภาพได้หนึ่งในสามหรือมากกว่า ซึ่งลดค่าใช้จ่าย CDN egress และการใช้ข้อมูลมือถือสำหรับผู้เข้าชมของคุณ
• บางรูปภาพไม่ควรอัปโหลดเลย เนื่องจากทุกอย่างที่นี่ทำงานในเบราว์เซอร์ของคุณ การสแกนบัตรประจำตัว รูปภาพทางการแพทย์ และภาพหน้าจอภายในจึงยังคงอยู่บนอุปกรณ์ของคุณ ไม่มีเซิร์ฟเวอร์บุคคลที่สามอย่าง TinyPNG อยู่ในวงจรให้ต้องกังวล

การใช้งานทั่วไป

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

• การเตรียมรูปภาพสินค้าสำหรับร้านค้าออนไลน์ ต้นฉบับ JPEG ถูกบีบอัดเป็นคุณภาพ 0.8 (หรือเป้าหมาย 200 KB) เพื่อให้หน้าร้านทำงานเร็วและผ่าน Core Web Vitals บนมือถือ
• การย่อภาพหน้าจอก่อนแนบกับตัวติดตามบั๊กหรือวิกิ ชุดภาพ PNG ที่แปลงเป็น JPEG ที่คุณภาพ 0.85 มักลดลงจากหลายสิบเมกะไบต์เหลือเพียงไม่กี่เมกะไบต์
• การทำให้รูปภาพอยู่ต่ำกว่าขีดจำกัดการอัปโหลด — พอร์ทัลสมัครงานที่ปฏิเสธไฟล์เกิน 1 MB ระบบอีเมลที่มีขีดจำกัดไฟล์แนบที่เข้มงวด หรือรูปอวาตาร์ฟอรัมที่ต้องอยู่ในงบประมาณไบต์

ตัวอย่างจริง: JPEG 4 MB เป็น 400 KB

JPEG ขนาด 4 MB ตรงจากกล้องโทรศัพท์เป็นน้ำหนักบรรทุกทั่วไปที่ทำให้เกินขีดจำกัดการอัปโหลดและทำให้หน้าช้า เป็นเกณฑ์มาตรฐานที่ยุติธรรมสำหรับสิ่งที่การบีบอัดประหยัดได้

วาง JPEG ลงในโซนอัปโหลด ปล่อยรูปแบบไว้ที่ JPEG แล้วลากตัวเลื่อนคุณภาพลงไปที่ 0.7 หรือสลับไปยังโหมดขนาดเป้าหมายและพิมพ์ 400 KB ในโหมดคุณภาพ pipeline ของ Canvas จะเข้ารหัสใหม่หนึ่งครั้งและแสดงผลลัพธ์ โดยทั่วไปประมาณ 500 ถึง 700 KB ขึ้นอยู่กับรูปภาพ ในโหมดขนาดเป้าหมาย หน้าเว็บจะลองค่าคุณภาพสองสามค่า เลือกค่าสูงสุดที่ยังคงอยู่ต่ำกว่า 400 KB และรายงานเปอร์เซ็นต์การประหยัด คลิก ดาวน์โหลด บนการ์ดเพื่อรับไฟล์เดียว หรือคลิก ดาวน์โหลด .zip หากคุณบีบอัดหลายรูปพร้อมกัน กระบวนการทั้งหมดทำงานในเวลาน้อยกว่าหนึ่งวินาทีสำหรับรูปขนาดนี้ และใช้แบนด์วิดท์เป็นศูนย์หลังจากหน้าเว็บโหลดเสร็จ

ความแตกต่างระหว่างโหมดคุณภาพและโหมดขนาดเป้าหมายคืออะไร?

โหมดคุณภาพให้ตัวเลื่อนเดียวจาก 0.1 ถึง 1.0 ที่แมปกับการตั้งค่า quantization ของตัวเข้ารหัส JPEG หรือ WebP — ตัวเลขที่ต่ำกว่าหมายถึงไฟล์ที่เล็กลงและสิ่งแปลกปลอมที่มองเห็นได้มากขึ้น โหมดขนาดเป้าหมายพลิกปัญหากลับด้าน: คุณระบุขนาดเป็นกิโลไบต์ และหน้าเว็บจะแบ่งครึ่งค่าคุณภาพ เข้ารหัสหลายครั้งจนกว่าจะพบคุณภาพสูงสุดที่ยังคงอยู่ต่ำกว่างบประมาณของคุณ โหมดขนาดเป้าหมายมีประโยชน์เมื่อขีดจำกัดที่เข้มงวดมีความสำคัญ (เช่นขีดจำกัดการอัปโหลด 1 MB) ส่วนโหมดคุณภาพเร็วกว่าและดีกว่าเมื่อคุณต้องการเพียงผลลัพธ์ภาพที่คาดเดาได้ PNG ไม่สูญเสียข้อมูล ดังนั้นจึงไม่มีโหมดใดที่ใช้กับมันได้

สิ่งนี้เกิดขึ้นบนอุปกรณ์ของฉันหรือไม่?

ใช่ ทั้งหมด หน้าเว็บใช้ Canvas API ดั้งเดิมของเบราว์เซอร์และ Web File API เพื่อถอดรหัสและเข้ารหัสรูปภาพแต่ละรูปในหน่วยความจำ ไม่มีข้อมูลรูปภาพถูกส่งไปยังเซิร์ฟเวอร์ ไม่มีการอัปโหลดชั่วคราว และไม่มีการเดินทางไปกลับบนคลาวด์ คุณสามารถตรวจสอบได้ด้วยตนเอง: เปิด DevTools สลับไปที่แผง Network และเรียกใช้การบีบอัด คำขอขาออกเดียวที่คุณจะเห็นคือการโหลดหน้าเว็บครั้งแรกและการเรียกโฆษณา ไม่มีสิ่งใดที่มีรูปร่างเป็นรูปภาพออกจากแท็บ

ทำไมการบีบอัด PNG บางครั้งจึงแทบไม่ลดขนาดเลย?

PNG เป็นรูปแบบที่ไม่สูญเสียข้อมูล ดังนั้น Canvas API จึงไม่สามารถทิ้งรายละเอียดเพื่อทำให้เล็กลงได้ — ทำได้เพียงบรรจุพิกเซลเดิมใหม่เท่านั้น สำหรับภาพถ่าย PNG มีขนาดใหญ่อยู่แล้วและการเข้ารหัสใหม่แบบไม่สูญเสียข้อมูลช่วยประหยัดได้น้อย ประโยชน์ที่แท้จริงมาจากการเปลี่ยนรูปแบบผลลัพธ์เป็น JPEG หรือ WebP ซึ่งใช้การบีบอัดแบบสูญเสียข้อมูลที่เหมาะกับภาพถ่ายและมักจะเล็กลง 4 ถึง 10 เท่า เก็บ PNG ไว้เฉพาะเมื่อคุณต้องการคุณภาพแบบไม่สูญเสียหรือความโปร่งใส มิฉะนั้นให้เลือก JPEG สำหรับภาพถ่ายหรือ WebP สำหรับสมดุลขนาดต่อคุณภาพที่ดีที่สุด

ฉันควรเลือกรูปแบบใด?

สำหรับภาพถ่าย WebP ที่คุณภาพ 0.8 ให้สมดุลขนาดต่อคุณภาพที่ดีที่สุดและรองรับโดยทุกเบราว์เซอร์ที่เปิดตัวตั้งแต่ปี 2021 JPEG เป็นทางเลือกสากลที่ปลอดภัยเมื่อปลายทางเก่ากว่าหรือเข้มงวดกว่า เลือก PNG เฉพาะเมื่อคุณต้องการคุณภาพแบบไม่สูญเสียหรือช่องอัลฟา — งานเส้น ภาพหน้าจอ UI โลโก้ที่มีความโปร่งใส หากคุณกำลังปรับให้เหมาะกับความเร็วหน้าและผู้ชมของคุณใช้เบราว์เซอร์สมัยใหม่ WebP มักจะเป็นทางเลือกที่ถูกต้องเสมอ หากคุณป้อนข้อมูลให้ CMS เก่าหรือ pipeline การพิมพ์ที่ปฏิเสธ WebP ให้ใช้ JPEG ต่อไป

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