Photoshop: วิธีลดขนาด PNG สำหรับการใช้งานเว็บ


10

ฉันมีไฟล์ PNG ที่ 2042 x 1250 และ 6.1 MB เมื่อฉันเปิดด้วย Photoshop และทำ"บันทึกเป็น> PNG 24"และเลือกขนาดไฟล์บีบอัดของสองตัวเลือก (ตัวเลือกที่ไม่มีการบีบอัด) ฉันยังคงได้รับภาพที่อยู่ในลำดับไม่กี่ MB ซึ่งเนื่องจาก จะเป็นเนื้อหาเว็บฉันต้องการเป็น KB ไม่ใช่ MB ฉันจะบีบอัดภาพนี้อย่างชาญฉลาดไปยังสนามเบสบอลในระยะไม่กี่พัน KB ได้อย่างไร


1
ใช้ไฟล์ -> บันทึกสำหรับเว็บแทนและเลือก png 24 จากรายการรูปแบบไฟล์ (โดยปกติจะเป็น JPG)
AndrewH

อะไรทำให้คุณคิดว่าสามารถบีบอัดไฟล์ได้มากเท่าที่คุณต้องการ คุณอาจต้องการเปลี่ยนเป็น JPEG และคนจรจัดด้วยการตั้งค่าคุณภาพต่ำ
usr2564301

คำตอบ:


13

รายละเอียดที่เกินบรรยาย (คุณไม่ได้ขอ)

บางรูปแบบภาพเช่น JPG, สนับสนุนLossy การบีบอัด เมื่อภาพที่ถูกบีบอัดแบบ Lossy ถูกบันทึกและแสดงผลกลับมาภาพนั้นจะไม่ตรงตามที่คุณออกแบบไว้ 100% แต่เพียงแค่ "ปิด" ภาพร่าง บางส่วนของรายละเอียดเดิมจะหายไป เนื่องจากไม่มีความคาดหวังของความถูกต้องภาพที่ถูกบีบอัดของ Lossy จึงมีความหรูหราในการเก็บข้อมูลเพียงเล็กน้อยเกี่ยวกับการออกแบบดั้งเดิมส่งผลให้มีไฟล์ขนาดเล็ก พวกเขายังอนุญาตให้คุณระบุความถูกต้องของผลลัพธ์: ความแม่นยำน้อยกว่าที่ผลลัพธ์จะต้องมีขนาดเล็กลง

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

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

คำแนะนำบางอย่าง

ต้องบอกว่ามีบางสิ่งที่คุณสามารถทำได้เพื่อลองรับไฟล์ขนาดเล็ก

  • พื้นที่ขนาดใหญ่ของสีแบนบีบอัดได้ดีกว่าพื้นที่ที่มีลวดลายซับซ้อน ดูว่าคุณสามารถทำให้ภาพของคุณง่ายขึ้นหรือไม่
  • คุณมีพื้นที่เชิงลบรอบภาพมากหรือไม่? พยายามลดให้เหลือน้อยที่สุด
  • คุณใช้ความโปร่งใสหรือไม่ หากไม่ใช่ให้ลองบันทึกรูปภาพเป็น JPG แทน
  • หากคุณไม่สามารถบันทึกเป็น JPG ไม่ว่าด้วยเหตุผลใดก็ตาม แต่ไม่ได้ใช้ความโปร่งใสให้ยกเลิกการเลือก "โปร่งใส" จากตัวเลือกการบันทึก วิธีนี้จะทำให้กัดได้เล็กน้อยจากผลลัพธ์สุดท้ายของคุณ
  • ลองตัดภาพเป็นบางส่วนแล้วเขียนเป็น HTML ขั้นสุดท้ายเช่นเรียงตัวต่อ คุณสามารถบันทึกชิ้นส่วนที่ต้องการความโปร่งใสเช่น PNG และส่วนอื่น ๆ เป็น JPG ที่บีบอัดได้สูง ผลรวมควรจะหนักน้อย
  • ใช้เครื่องมือบีบอัด PNG (เช่นhttps://tinypng.com/ ) โปรดทราบว่าเครื่องมือเหล่านี้ใช้อัลกอริทึมแบบสูญเสีย พวกเขาพยายามทำให้รูปภาพของคุณง่ายขึ้นเพื่อให้สามารถบันทึกเป็นไฟล์ขนาดเล็กลงได้ มันลดขนาดไฟล์ของคุณลงอย่างมาก แต่ผลลัพธ์สุดท้ายอาจหลวมรายละเอียดมากเกินไป คุณสามารถลองและตัดสินผลขึ้นอยู่กับแอปพลิเคชัน

หากคุณแบ่งปันภาพฉันสามารถให้คำแนะนำกับคุณได้


TinyPNG แปลงเป็น PNG 8 บิตซึ่งดูเหมือน GIF
Hannes Schneidermayer

@Heanz จริง มันแปลงเป็น 8 บิต แต่มันไม่ใช่ GIF แต่อย่างใด สนับสนุนความโปร่งใสอัลฟา จากประสบการณ์ของฉันฉันไม่เคยสังเกตเห็นความแตกต่างระหว่าง PNG เป่าเต็มรูปแบบและหนึ่งที่พวกเขาผลิต
cockypup

@cokcypup สำหรับโลโก้ที่เป็นจริงของฉัน แต่สำหรับใบหน้ามนุษย์ไม่มีทาง
Hannes Schneidermayer

@Heanz ฉันไม่เคยใช้กับใบหน้ามนุษย์ แต่ฉันใช้มันเป็นประจำเพื่อถ่ายรูปบรรจุภัณฑ์เครื่องสำอาง ฉันไม่สามารถบอกความแตกต่างในสิ่งเหล่านั้น ยังความคิดเห็นของฉันเกี่ยวกับอัลฟาถูกต้อง รูปแบบ GIF ไม่สนับสนุนความโปร่งใสอัลฟ่า
cockypup

2

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


ทำงานเหมือนจับใจ!
Christian Strang

0

6.1MB PNG อยู่ไกลจากช่วง KB ดังนั้นคำแนะนำของ Cokypup น่าจะดีที่สุด

สำหรับ PNG อื่น ๆ ที่คุณอาจสร้างวิธีที่ดีที่สุดในการบันทึกไว้สำหรับใช้ในเว็บเพื่อบันทึกใน Photoshop ด้วย "บันทึกสำหรับเว็บ" แทนที่จะเป็น "บันทึกเป็น" "Save for Web" ของ Photoshop ช่วยเพิ่มประสิทธิภาพซึ่งจะลดขนาดไฟล์ลงอย่างมาก

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


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

มันแปลงเป็น 8 บิตและดูเหมือนว่า GIF บนภาพที่มีสีสัน
Hannes Schneidermayer

-1

อาจไปโดยไม่บอก แต่หลายคนลืมตั้งความละเอียดที่ 72 พิกเซล / นิ้วสำหรับสินทรัพย์เว็บ

ภาพ> ขนาดภาพ> ตั้งความละเอียดเป็น 72 ppi


ที่ไม่มีผลกับรูปภาพที่ใช้สำหรับเว็บเฉพาะขนาด px
Luciano
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.