What does the Image Compare Slider do?

Place two images side-by-side and drag a vertical handle left or right to reveal more of the 'before' or 'after' image. Useful for visualizing the result of image compression, resizing, color correction, or AI super-resolution.

Are my images uploaded anywhere?

No. Both images stay in your browser via object URLs created with URL.createObjectURL(). Nothing is sent to a server.

What image formats are supported?

Anything the browser can render — PNG, JPEG, GIF, WebP, SVG, AVIF (in modern browsers). Both images don't need to be the same format, but they should ideally have the same dimensions for the most useful comparison.

สไลเดอร์เปรียบเทียบรูปภาพ

Beforechoose file…Afterchoose file…

Upload a 'before' and 'after' image to start comparing.

รายละเอียดทางเทคนิค

สไลเดอร์เปรียบเทียบภาพทำงานอย่างไร

เครื่องมือนี้ทำอะไร

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

กรณีการใช้งานทั่วไปของนักพัฒนา

วิศวกรที่ตรวจสอบการบีบอัดภาพแบบสูญเสียข้อมูลจะเปรียบเทียบ JPEG กับ WebP ของแหล่งต้นฉบับเดียวกัน นักออกแบบตรวจทานการทำโทนแมป การรีทัช หรือการปรับแก้สีระหว่างฉบับร่างกับฉบับสุดท้าย วิศวกร ML/AI แสดงภาพผลลัพธ์ของการเพิ่มความละเอียด (super-resolution) การลดนอยส์ (denoise) หรือการถ่ายโอนสไตล์ (style-transfer) เทียบกับอินพุตของตน ทีมการตลาดสร้างเดโมก่อน/หลังที่โดดเด่นสำหรับหน้าแลนดิ้งเพจ

รูปแบบข้อมูล ชนิด หรือรูปแบบย่อย

รองรับรูปแบบภาพใดๆ ที่เบราว์เซอร์สามารถเรนเดอร์ได้ — PNG, JPEG, WebP, AVIF, GIF, SVG รูปภาพจะคงอยู่ในเบราว์เซอร์ของคุณผ่าน object URL (URL.createObjectURL) ดังนั้นจะไม่มีการอัปโหลดอะไรขึ้นไป เพื่อให้การเปรียบเทียบมีประโยชน์ที่สุด รูปภาพทั้งสองควรมีขนาดและอัตราส่วนภาพตรงกัน; หากต่างกัน ทั้งคู่จะเรนเดอร์ด้วย object-fit: contain เพื่อไม่ให้ภาพใดถูกครอป

ข้อผิดพลาดที่พบบ่อยและกรณีขอบ

การเปรียบเทียบรูปภาพที่มีอัตราส่วนภาพต่างกันจะทำให้เกิดแถบ letterbox อยู่ด้านหนึ่ง รูปภาพที่ใหญ่มาก (>50 MB) อาจทำให้การลากสไลเดอร์ช้าลงในเบราว์เซอร์รุ่นเก่า สไลเดอร์จะแสดงรูปภาพ 'หลัง' ทั้งหมด — หากทั้งสองไฟล์มีความโปร่งใส ให้เลื่อนสไลเดอร์ไปทับบริเวณที่ทึบแสง ไม่เช่นนั้นคุณจะเห็นพื้นหลังของหน้าเว็บทะลุผ่านทั้งสองฝั่ง

เมื่อใดควรใช้เครื่องมือนี้แทนการเขียนโค้ด

ใช้เครื่องมือในเบราว์เซอร์สำหรับการเปรียบเทียบแบบเฉพาะกิจระหว่างพัฒนา หรือสำหรับเดโมให้ผู้มีส่วนได้ส่วนเสียแบบรวดเร็ว สำหรับเว็บไซต์ที่ใช้งานจริง ให้ผสานรวมไลบรารีเฉพาะทางอย่าง react-compare-slider หรือ img-comparison-slider เพื่อรองรับการช่วยการเข้าถึง (accessibility), การโหลดแบบ lazy loading และการรองรับ SSR; สำหรับการตรวจคุณภาพแบบอัตโนมัติเป็นชุดกับรูปภาพหลายร้อยภาพ ให้ใช้เครื่องมือที่อิง SSIM/PSNR เช่น ImageMagick `compare` หรือ pixelmatch