ปรับขนาดรูปภาพ _

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

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

1. อ่านไฟล์ที่อัปโหลดแต่ละไฟล์เป็น Blob และสร้าง URL ของออบเจ็กต์เพื่อให้เบราว์เซอร์ถอดรหัสได้โดยไม่ต้องคัดลอกไบต์ไปยังเซิร์ฟเวอร์หรือเขียนลงดิสก์
2. คำนวณขนาดเป้าหมายจากโหมดที่เลือก — ขีดจำกัดด้านที่ยาวที่สุด ความกว้างและความสูงแน่นอน หรือสเกลเปอร์เซ็นต์ การล็อกอัตราส่วนภาพรักษาสัดส่วนให้ถูกต้องเมื่อคุณแก้ไขช่องเดียว
3. สร้าง Canvas นอกหน้าจอที่ขนาดเป้าหมายและเรียก ctx.drawImage(source, 0, 0, width, height) เพื่อวาดพิกเซลที่ถอดรหัสแล้วใหม่ เบราว์เซอร์จัดการการแก้ไขที่ทำให้ผลลัพธ์ที่ปรับขนาดแล้วเรียบ
4. เรียก canvas.toBlob เพื่อเข้ารหัสใหม่ในรูปแบบต้นฉบับ PNG ยังคงไม่สูญเสียข้อมูล JPEG และ WebP เข้ารหัสใหม่ด้วยคุณภาพสูง จากนั้นหน้าเว็บแสดงการ์ดก่อน/หลังและเสนอการดาวน์โหลดต่อรูปภาพหรือ ZIP เดียวที่สร้างในหน่วยความจำด้วย fflate

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

• รูปภาพที่มีขนาดใหญ่เกินไปเป็นสาเหตุที่พบบ่อยที่สุดของหน้าเว็บที่โหลดช้า ภาพถ่ายจากโทรศัพท์ขนาด 4000×3000 ที่วางลงในเลย์เอาต์ความกว้าง 600 พิกเซลจะส่งพิกเซลมากกว่าที่หน้าจอสามารถแสดงได้ประมาณ 40 เท่า การจำกัดด้านที่ยาวที่สุดให้เหลือ 1600 px ก่อนอัปโหลดช่วยลดน้ำหนักหน้าและปรับปรุง LCP ของ Core Web Vitals
• ฟอร์มอัปโหลดบังคับใช้ขนาดที่เข้มงวด ช่องสำหรับรูปโปรไฟล์ พอร์ทัลรูปถ่ายประจำตัว รายการในตลาดออนไลน์ และโซเชียลการ์ด OG ล้วนต้องการขนาดพิกเซลที่เฉพาะเจาะจง: 1200×630 สำหรับพรีวิว Open Graph, 512×512 สำหรับไอคอนแอป, 150×150 สำหรับภาพขนาดย่อ ใส่ตัวเลขที่ถูกต้องแล้วจะข้ามการวนซ้ำจากการอัปโหลดที่ถูกปฏิเสธได้
• เครื่องมืออีเมลและแชทจะบีบอัดซ้ำสิ่งที่มีขนาดใหญ่อย่างเงียบๆ ซึ่งอาจทำให้ภาพหน้าจอที่สวยงามเสียหายได้ การปรับขนาดด้วยตัวเองให้มีความกว้างที่เหมาะสมช่วยให้ผลลัพธ์คาดเดาได้แทนที่จะปล่อยให้ขึ้นอยู่กับกระบวนการแบบสูญเสียของคนอื่น
• ความสอดคล้องของชุดข้อมูลมีความสำคัญสำหรับแกลเลอรีและแคตตาล็อก การประมวลผลโฟลเดอร์ภาพถ่ายที่มีขนาดผสมผ่านเป้าหมาย 800×800 เดียวกันหมายความว่าทุกการ์ดเรียงตัวบนกริดโดยไม่มีรูปภาพขนาดใหญ่ที่ทำให้เลย์เอาต์เสีย

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

การปรับขนาดเกิดขึ้นเมื่อขนาดต้นฉบับและความคาดหวังของปลายทางไม่ตรงกัน รูปแบบเดียวกันปรากฏซ้ำแล้วซ้ำอีก

• เตรียมรูปภาพสินค้าสำหรับร้านค้า Shopify หรือ WooCommerce โฟลเดอร์ภาพกล้องต้นฉบับขนาด 4000 พิกเซลถูกจำกัดด้านที่ยาวที่สุดไว้ที่ 1600 px เพื่อให้หน้าร้านโหลดเร็ว ในขณะที่อัตราส่วนภาพยังคงเดิมเพื่อไม่ให้รูปดูยืด
• สร้างแอสเซ็ตโซเชียลและแอปจากไฟล์หลักหนึ่งไฟล์ กำหนด 1200×630 แน่นอนสำหรับการ์ด Open Graph จากนั้น 512×512 สำหรับไอคอนแอป ส่งออกแต่ละรูปในไม่กี่คลิกโดยไม่ต้องเปิดโปรแกรมตกแต่งภาพหนักๆ
• ย่อชุดภาพหน้าจอ QA หรือซัพพอร์ตก่อนแนบใส่ตั๋ว การปรับขนาดโฟลเดอร์ 50 ภาพเป็น 50% มักช่วยลดขนาดไฟล์เก็บถาวรลงประมาณสามในสี่ก่อนนำเข้าบักแทร็กเกอร์

ตัวอย่างจริง: ภาพถ่าย 4000 px เป็นภาพเว็บ 1600 px

ภาพถ่าย 4000×3000 จากโทรศัพท์มือถือเป็นไฟล์ขนาดใหญ่ทั่วไปที่ใหญ่กว่าที่เลย์เอาต์เว็บใดๆ ต้องการมาก เป็นเกณฑ์มาตรฐานที่ยุติธรรมสำหรับสิ่งที่การปรับขนาดช่วยประหยัดได้

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

มีโหมดปรับขนาดอะไรบ้าง?

สามโหมด จำกัดด้านที่ยาวที่สุด จำกัดด้านที่ยาวกว่าของความกว้างหรือความสูงให้เป็นค่าพิกเซลและปรับอีกด้านให้ตรงกัน ซึ่งเป็นค่าเริ่มต้นที่ปลอดภัยเพราะไม่มีการบิดเบือนเลย กำหนดความกว้าง × ความสูงแน่นอน ให้คุณพิมพ์ตัวเลขทั้งสองโดยมีฟีเจอร์ล็อกอัตราส่วนภาพที่คำนวณช่องที่สองจากอัตราส่วนต้นฉบับเมื่อคุณแก้ไขช่องแรก — ปิดล็อกเมื่อฟอร์มต้องการขนาดที่ไม่สัดส่วนที่แน่นอน ปรับขนาดตามเปอร์เซ็นต์ คูณทั้งสองขนาดด้วยตัวประกอบเดียว สะดวกสำหรับการลดหรือเพิ่มขนาดชุดข้อมูลทั้งหมดพร้อมกัน พรีเซ็ตคลิกเดียวหกรายการ (จาก 1920×1080 ลงมาถึงภาพขนาดย่อ 150×150) ครอบคลุมเป้าหมายที่พบบ่อยที่สุด

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

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

การปรับขนาดจะลดคุณภาพหรือไม่?

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

รองรับรูปแบบไฟล์ใดบ้าง?

ฝั่งอินพุต รูปแบบใดก็ตามที่เบราว์เซอร์สามารถถอดรหัสได้จะถูกยอมรับ: PNG, JPEG, WebP, GIF และ BMP ครอบคลุมไฟล์เกือบทั้งหมดที่โทรศัพท์ กล้อง หรือเครื่องมือภาพหน้าจอสร้างขึ้น ผลลัพธ์รักษารูปแบบต้นฉบับเมื่อ Canvas encoder รองรับ — PNG, JPEG และ WebP สามารถรับส่งได้โดยตรง GIF และ BMP (ที่ Canvas API สามารถถอดรหัสได้แต่เข้ารหัสใหม่ไม่ได้) จะถูกบันทึกเป็น PNG แบบไม่สูญเสียข้อมูลแทน ชื่อไฟล์ที่ปรับขนาดแล้วจะมีขนาดใหม่รวมอยู่ด้วย (เช่น photo-1600x1200.jpg) เพื่อให้ชุดข้อมูลเรียงได้ง่าย

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