จะลดขนาดไฟล์ PNG สำหรับเว็บได้อย่างไร

ฉันมีไฟล์ PNG-24 ที่มีพื้นหลังโปร่งใสและขนาดปัจจุบันคือ 1.5 MB จะลดขนาดหรือใช้รูปแบบไฟล์ PNG-8 และรักษาคุณภาพเดิมได้อย่างไร

ไฟล์ PNG จากที่นี่: http://www19.zippyshare.com/v/69590430/file.html

ตัวอย่างภาพที่อัปโหลดฉันลองคำแนะนำทั้งหมด แต่ไม่มีผลลัพธ์ที่ดี

ขอบคุณ

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

หากคุณต้องการบีบอัดภาพในระดับสูงและไม่สนใจที่เก็บข้อมูลแบบไม่สูญเสียให้ใช้ JPEG

RIOTสามารถทำสิ่งนั้นได้และอื่น ๆ อีกมากมาย

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

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

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

ความเป็นไปได้อีกอย่างคือการใช้การรวมกันของ pngquant, pngout และ pngcrush ดังที่อธิบายไว้ที่นี่แต่นี่มาจากบรรทัดคำสั่ง

นี่คือคำแนะนำวิธีการแปลงภาพ png24 เป็น png8 สำหรับความดี ie6 ทั้งหมดผ่านบรรทัดคำสั่งโดยใช้เครื่องมือโอเพ่นซอร์ส (ฉันคิดว่า) pngquant + pngout + pngcrush

1- ปรับภาพเป็น 256

pngquant 256 some_24_bit.png

2- แปลงภาพในรูปแบบ png24 เป็น png8

pngout -c3 -d8 -y -force some_24_bit.png some_8_bit.png

3 - บีบอัดภาพ

pngcrush some_8_bit.png -bit_depth 8 -brute -rem alla - ลด some_8_bit_small.png

ลองTinyPNG

จากเว็บไซต์ของพวกเขา:

มันทำงานยังไง?

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

พวกเขามีสองตัวเลือก:

• ลากและวางภาพลงบนเว็บไซต์ของพวกเขาและมันจะได้รับการประมวลผลโดยอัตโนมัติ บริการฟรี (สูงสุด 20 ภาพแต่ละชิ้นมีสูงสุด 5 MB)
• ปลั๊กอิน Photoshop ค่าใช้จ่ายนี้ $

ฉันยังไม่ได้ลองปลั๊กอิน PS ดังนั้นจึงไม่สามารถให้ความเห็นเกี่ยวกับการทำงานของมันได้ดี

หากคุณไม่สนใจบรรทัดคำสั่งลองดูที่OptiPNGมันอาจเป็นสิ่งที่คุณต้องการ

OptiPNG เป็นเครื่องมือเพิ่มประสิทธิภาพ PNG ที่บีบอัดไฟล์ภาพให้มีขนาดเล็กลงโดยไม่สูญเสียข้อมูลใด ๆ โปรแกรมนี้ยังแปลงรูปแบบภายนอก (BMP, GIF, PNM และ TIFF) เป็น PNG ที่ปรับให้เหมาะสมและทำการตรวจสอบความถูกต้องและการแก้ไข PNG

ใช้การรวมกันของและpngout defloptpngoutจะตรวจสอบโดยอัตโนมัติว่าสี PNG ของคุณพอดีกับ PNG-8 และใช้หรือไม่ defloptจะบีบไบต์พิเศษบางส่วนจากภาพที่ปรับให้เหมาะสมแล้ว - เป็นยูทิลิตี้สำหรับทำงานกับข้อมูลที่ลดลงและ PNG เป็นหนึ่งในนั้น

ความคิดที่ดีสำหรับการจัดการ PNG ด้วยช่องอัลฟา ในบริบทของการพัฒนาเว็บไซต์คือให้เซิร์ฟเวอร์ทำการเคล็ดลับสำหรับคุณ: แยกข้อมูลภาพออกจากช่องอัลฟาบนเซิร์ฟเวอร์แบบไดนามิกปรับทั้งสองอย่างแยกจากกันและรวมเข้าด้วยกันโดยใช้ องค์ประกอบ Canvas และ JavaScript ในเบราว์เซอร์ Ta-Da! ทำงานร่วมกับเบราว์เซอร์ที่ทันสมัยทั้งหมด

นี่คือคำอธิบายวิธีการทำ:

http://headers-already-sent.com/artikel/shrinkimage-1/

นอกจากนี้คุณยังจะได้พบกับแพ็คเกจ ZIP ที่สมบูรณ์แบบด้วยสคริปต์ PHP และปลั๊กอิน jQuery บอกให้เรารู้ว่าคุณคิดอย่างไรกับเรื่องนี้

หากคุณต้องการลดขนาดรูปภาพจริง ๆ และคำแนะนำง่าย ๆ ทั้งหมดไม่ทำงานคำตอบสุดท้ายคือการแบ่งภาพออกเป็นชิ้นเล็ก ๆ ที่บีบอัดได้

ภาพจากคำถามดูเหมือนว่าการไล่ระดับสีที่มีเส้นแนวตั้งและ splotches / สัญญาณรบกวนบางส่วน แยกมันออกเป็นเลเยอร์ต่อไปนี้:

1. การไล่ระดับสีโดยไม่มีเส้นหรือจุดรบกวน สิ่งนี้จะบีบอัดได้ดีใน PNG และ JPEG ได้ดี ยิ่งไปกว่านั้นใช้ JavaScript เพื่อสร้างการไล่ระดับสีของลูกค้า คุณอาจทำได้ใน JS น้อยกว่า 200 ไบต์
2. เส้นแนวตั้งที่ไม่มีสีหรือเสียงรบกวน คุณสามารถบีบอัดข้อมูลนี้ลงในช่อง 4 บิตเดียว (อัลฟาหรือสีเทา) คุณต้องการรูปที่มีความสูง 1 พิกเซลเท่านั้นซึ่งคุณสามารถยืดได้ นั่นจะบีบอัดได้ดีมากใน PNG
3. เสียงดัง. สิ่งที่คุณต้องการคือแชนเนล 4 บิตเดียว (อัลฟาหรือสีเทา) หากไม่มีสีหรือเส้นนี่ควรบีบอัดได้ดีใน PNG หรือ JPEG

รวมเลเยอร์เป็นภาพเดียวกับ JavaScript และ "รูปภาพ" ทั้งหมดของคุณอาจเป็น 15KB หรือน้อยกว่า

งานประเภทนี้เป็นมาตรฐานอุตสาหกรรมในเกมมานานหลายทศวรรษและยังคงเป็น สิ่งที่ยอดเยี่ยมคือ Photoshop มีเลเยอร์แยกทั้งหมดแล้วถ้าคุณสร้างภาพของคุณอย่างมืออาชีพ

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

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

ซอฟต์แวร์ฟรีอัตโนมัติที่ดีที่สุดที่มีเปอร์เซ็นต์การบีบอัดโดยรวมสูงสุดที่ฉันพบคือFileOptimizerซึ่งใช้เอ็นจิ้นหลายตัว (เช่น PngOptimizer, PNGOUT, pngwolf ฯลฯ ) เพื่อบีบอัดภาพให้มีขนาดเล็กที่สุดเท่าที่จะทำได้

อีกหนึ่งเครื่องมือออนไลน์ที่ฉันพบว่ามีผลลัพธ์ดีคือเครื่องมือนี้: http://www.giftofspeed.com/png-compressor/

ให้ฉันแนะนำFileOptimizer FileOptimizerมันรวมวิธีการต่าง ๆ สำหรับการเพิ่มประสิทธิภาพของภาพ (รวมถึงการลบ EXIF ​​สำหรับการบันทึกพิเศษสองสามไบต์ - สามารถปิดได้)

ผลการทดสอบและเปรียบเทียบกับโซลูชันอื่น ๆ

ScriptPNG http://css-ig.net/scriptpng

มันให้ตัวเลือกต่าง ๆ ประมาณ 10 แบบรวมถึง lossy! ฉันลองใช้พวงและไฟล์แบตช์ windows นี้ (พร้อมกับ. exes) ดีมาก

ฉันใช้มันเป็นการบีบอัดข้อมูล 8 บิตเป็นการสูญเสีย ไม่แน่ใจจริงๆว่ามันทำงานอย่างไร แต่ภาพหน้าจอของฉันเหมือนกัน ฉันใช้มันเพื่อบีบอัดภาพหน้าจอ ฉันมี pngs ประมาณ 2GB ตอนนี้เหลือเพียง 700mb