วิธีบีบอัดรูปภาพลงเว็บโดยไม่ทำให้เสียหาย

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

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

เริ่มต้นด้วยขนาด ไม่ใช่แถบเลื่อนคุณภาพ

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

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

สิ่งที่การตั้งค่าคุณภาพเปลี่ยนแปลงไปจริงๆ

สำหรับ JPEG ค่าคุณภาพจะควบคุมว่าตัวเข้ารหัสจะโยนรายละเอียดที่ดวงตามีโอกาสสังเกตเห็นได้น้อยเพียงใด ไม่ใช่เปอร์เซ็นต์ของคุณภาพต้นฉบับ และ 80 ไม่ได้หมายความว่า "ดี 80%" มันเป็นเพียงจุดในระดับที่ค่าที่ต่ำกว่าจะสร้างไฟล์ขนาดเล็กลงและสิ่งประดิษฐ์ที่มองเห็นได้ชัดเจนยิ่งขึ้น

• ประมาณ 80–85 เป็นช่วงที่สะดวกสบายสำหรับภาพถ่ายที่ต้องดูสะอาดตา ความแตกต่างจากต้นฉบับมักจะมองเห็นได้ยากในขนาดการรับชมปกติ
• ประมาณ 70–78 ทำงานได้ดีกับรูปภาพบนเว็บที่อยู่ในเลย์เอาต์และไม่เคยได้รับการตรวจสอบอย่างใกล้ชิด ขนาดไฟล์ลดลงอย่างเห็นได้ชัด
• ต่ำกว่าประมาณ 60สิ่งประดิษฐ์ต่างๆ จะมองเห็นได้ง่ายขึ้น: เป็นหย่อมๆ ที่เป็นบล็อกในท้องฟ้าเรียบๆ มีรัศมีรอบๆ ขอบ และข้อความที่ไม่ชัดเจน สำหรับภาพหน้าจอหรือกราฟิกที่มีประเภท ให้หลีกเลี่ยงการใช้ค่าต่ำขนาดนี้

การบีบอัด JPEG ยังรวมเข้าด้วยกัน การบันทึก JPEG ที่บันทึกไว้แล้วด้วยคุณภาพที่ต่ำกว่าจะไม่เปิดเผยรายละเอียดดั้งเดิมอีก มันเพิ่มการสูญเสียชั้นที่สอง เริ่มจากสำเนาที่ดีที่สุดที่คุณมีและส่งออกครั้งเดียวตามขนาดที่คุณต้องการ

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

เลือกรูปแบบก่อนที่คุณจะปรับแต่ง

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

ข้อผิดพลาดทั่วไปคือการบันทึกภาพหน้าจอที่คมชัดของข้อความเป็น JPEG การบีบอัดจะทำให้เกิดรัศมีจางๆ และรอยเปื้อนรอบๆ ตัวอักษร ซึ่งทำให้ภาพมีคุณภาพต่ำแม้จะใช้การตั้งค่าปานกลางก็ตาม PNG หรือ WebP จะรักษาประเภทให้สะอาดและมักจะสร้างไฟล์ขนาดเล็กสำหรับเนื้อหาประเภทนี้ต่อไป มีการเปรียบเทียบอย่างใกล้ชิดใน JPG, PNG หรือ WebP?

A sensible workflow

1. เก็บต้นฉบับไว้ ทำงานจากสำเนาและอย่าเขียนทับรูปภาพเวอร์ชันเดียวที่คุณสนใจ
2. ปรับขนาดให้ใหญ่ที่สุดที่จะแสดง ใช้ความกว้างของเลย์เอาต์เป็นสองเท่าหากคุณต้องการให้หน้าจอที่มีความหนาแน่นสูงคงความคมชัด อย่าครอบตัดหรือยืดเพียงเพื่อให้ได้ตัวเลข คงอัตราส่วนไว้เว้นแต่ว่าองค์ประกอบจำเป็นต้องเปลี่ยนแปลง
3. เลือกรูปแบบตามเนื้อหา รูปภาพ: JPEG หรือ WebP กราฟิกแบบเรียบๆ หรือโปร่งใส: PNG หรือ WebP
4. เริ่มต้นที่คุณภาพ 80 เปรียบเทียบกับ 75 และ 85 หากคุณไม่แน่ใจ เลื่อนลงขณะที่รูปภาพยังคงค้างอยู่ในขนาดที่ผู้คนมองเห็นเท่านั้น
5. ดูที่ 100% และขนาดเค้าโครง ซูมออกเกือบทุกอย่างดูดี เมื่อซูมเข้า คุณจะมองเห็นวัตถุรอบๆ ขอบและใบหน้าได้ ตรวจสอบทั้งสองอย่าง

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

ข้อผิดพลาดทั่วไปและควรทำอย่างไรแทน

บีบอัดก่อนปรับขนาด

การบันทึกภาพถ่ายขนาด 6,000 พิกเซลที่คุณภาพ 50 จะทำให้ได้ไฟล์ที่ยังคงมีขนาดใหญ่ ซึ่งขณะนี้มีความเสียหายที่มองเห็นได้ ปรับขนาดก่อนแล้วจึงบีบอัด รูปภาพเดียวกันที่ 1600 พิกเซลและคุณภาพ 80 มักจะดูดีกว่าและมีน้ำหนักน้อยกว่า

ไล่ตามไฟล์ที่เล็กที่สุดเท่าที่จะเป็นไปได้

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

แปลงความโปร่งใสเป็น JPEG

หากโลโก้มีพื้นหลังโปร่งใส JPEG จะเติมสีขาว บนหน้าสีที่แสดงเป็นกล่องที่ชัดเจน เก็บ PNG หรือ WebP ไว้ หรือเตรียมเวอร์ชันที่ออกแบบมาสำหรับสีพื้นหลังเฉพาะ

บันทึก JPEG เดิมซ้ำๆ กัน

ทุกการบันทึกที่สูญเสียไปจะเพิ่มสิ่งประดิษฐ์ การแก้ไขเป็นกลุ่มควรเริ่มจากไฟล์ต้นฉบับ ไม่ใช่จากเวอร์ชันที่ส่งออกครั้งล่าสุด รักษาต้นแบบคุณภาพสูงไว้และสร้างเวอร์ชันเว็บจากต้นแบบนั้น

ลืมข้อมูลเมตา

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

การบีบอัดเกิดขึ้นที่ไหน

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

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

พร้อมที่จะลองหรือยัง? บีบอัดรูปภาพ หรืออ่าน จริงๆ แล้วการทำงานในพื้นที่หมายถึงอะไร.