Bakit Masyadong Malaki ang PNG Mo?

Ang iyong PNG ay 8 MB dahil eksaktong iniimbak ng PNG ang bawat pixel, at ang isang full page screenshot sa retina resolution ay talagang naglalaman ng ganoon karaming impormasyon. Walang itinatapon ang format, na siyang buong punto ng PNG at siya ring buong problema.

May 3 paraan para ayusin ito, at bawat isa ay may kapalit. Ang pagbawas ng dimensions ay may kapalit na resolution na malamang ay hindi mo naman ginagamit. Ang pagbawas ng colour depth ay may kapalit na katumpakan ng kulay sa mga litrato. Ang pagpapalit ng format ay may kapalit na compatibility sa labas ng mga browser. Pumili batay sa kung para saan ang larawan.

Ang iyong 3 opsyon

• Bawasan ang dimensions. Libre, at karaniwang may pinakamalaking bawas. Walang nangangailangan ng 5000 pixel na screenshot.
• Bawasan ang colour depth. Mahusay para sa mga flat na graphic, hindi maganda para sa mga litrato.
• Palitan ang format. Pinapanatili ng WebP ang transparency at karaniwang 25 hanggang 35 porsyentong mas maliit.

Bakit mabilis lumaki ang mga PNG file

Ang laki ng PNG file ay direktang dumedepende sa bilang ng pixel, dahil dapat eksaktong ilarawan ang bawat pixel. Ang pagdoble sa lapad at taas ay nagpapadami nang apat na beses sa bilang ng mga pixel at halos nagpapadoble nang apat na beses sa laki ng file.

Ang isang 5120 sa 2880 na screenshot mula sa isang high resolution na monitor ay naglalaman ng 14.7 milyong pixel. Sa 3 bytes bawat pixel bago i-compress, iyon ay 44 MB ng raw data, at karaniwang binabawasan ito ng PNG compression sa pagitan ng 4 MB at 12 MB depende sa kung gaano karaming flat colour ang nasa larawan. Ang 8 MB na resulta ay normal at hindi isang depekto.

Solusyon 1: bawasan ang dimensions

I-resize ang larawan sa pinakamalaking sukat kung paano ito ipapakita, na nag-aalis ng karamihan sa bigat ng file bago sumubok ng anupaman. Ito ang solusyon na may pinakamalaking epekto at pinakamababang kapalit.

Sukatin ang pinakamalapad na sukat kung saan ipapakita ang larawan sa pahina, idoble iyon para sa mga high density screen, at i-resize sa kinalabasang sukat. Ang isang screenshot na ipinapakita nang 800 pixels ang lapad ay nangangailangan lamang ng 1600 pixels at wala nang iba pa.

Solusyon 2: bawasan ang colour depth

Ang pag-convert mula sa 24 bit na kulay patungo sa isang 8 bit palette ay nagbabawas sa PNG nang 50 hanggang 70 porsyento, at gumagana lamang sa mga larawang limitado ang mga kulay. Ang mga screenshot ng interface, diagram, logo, at chart ay mga ideyal na halimbawa.

Ang diskarteng ito ay nag-iimbak ng palette ng hanggang 256 na kulay at ginagamit itong reference bawat pixel, sa halip na mag-imbak ng buong mga value ng kulay. Ang isang user interface screenshot ay bihirang maglaman ng higit sa 256 na natatanging kulay, kaya hindi kapansin-pansin ang pagbawas. Ang isang litrato naman ay naglalaman ng sampu-sampung libo, kaya ang parehong pagbawas ay nagdudulot ng kapansin-pansing banding sa kalangitan at balat.

Solusyon 3: palitan ang format

I-convert sa WebP para sa paggamit sa web, na nagpapanatili ng transparency at karaniwang 25 hanggang 35 porsyentong mas maliit kaysa sa PNG. I-convert lamang sa JPG kapag ang larawan ay isang litrato at hindi nangangailangan ng transparency.

• WebP lossless para sa mga graphic at screenshot, na nagpapanatiling eksakto sa bawat pixel at nakakatipid pa rin ng 20 hanggang 30 porsyento.
• WebP lossy para sa mga photographic na PNG file, kung saan ang natitipid ay umaabot sa 70 porsyento o higit pa.
• JPG para sa mga litratong walang transparency, kung saan maling pagpili ang PNG simula pa lang.
• AVIF para sa malalaking photographic na larawan, na mas lalong nagko-compress sa mga file na higit sa 100 KB.
• Vector graphics para sa mga logo at icon, kung saan ang isang SVG file ay maaaring mas magaan kaysa sa anumang raster format.

Ang pinakakaraniwang dahilan: isang litratong na-save bilang PNG

Ang isang litratong na-save bilang PNG ay 3 hanggang 5 beses na mas malaki kaysa sa parehong litrato bilang JPEG, nang walang nakikitang pagkakaiba. Ang nag-iisang pagkakamaling ito ang dahilan ng karamihan sa napakalalaking PNG file.

Naghahanap ang PNG compression ng pag-uulit, at halos walang ganoon ang mga litrato sa pixel level, dahil ang bawat pixel ay may kaunting pagkakaiba mula sa katabi nito. Nagtatapos ang format sa eksaktong pag-iimbak ng milyun-milyong halos natatanging mga value. I-save ang mga litrato bilang JPEG o WebP at ilaan ang PNG para sa mga larawang talagang may flat colour o transparency.

Paano paliitin ang PNG nang hindi nawawala ang kalidad

Upang paliitin ang isang PNG habang pinapanatili itong lossless, sundin ang 5 hakbang na ito ayon sa pagkakasunod-sunod.

1. I-crop ang anumang hindi ginagamit na espasyo, dahil nagdaragdag pa rin sa laki ng file ang mga bakanteng margin.
2. I-resize sa pinakamalaking display size na kakailanganin ng larawan, na dinoble para sa mga high density screen.
3. Suriin kung talagang kailangan ng larawan ang transparency, dahil mas napapaliit ang isang flattened image kapag na-compress.
4. Bawasan ang colour palette kung ang larawan ay isang graphic sa halip na isang litrato.
5. I-convert sa WebP lossless, na nananatiling eksakto at karaniwang 20 hanggang 30 porsyentong mas maliit.

Karaniwang nasosolusyunan na ng mga hakbang 1 at 2 ang problema. Mahalaga ang mga natitirang hakbang kapag ang isang larawan ay kailangang manatiling napakalaki, tulad ng isang full page screenshot sa dokumentasyon.

Bakit napakalaki ng mga screenshot sa mga modernong screen

Ang mga high density display ay kumukuha sa 2 o 3 beses ng logical resolution, kaya ang isang screenshot ng isang window na 1200 pixels ang lapad ay nase-save sa 2400 o 3600 pixels. Ang file ay mas malaki kaysa sa aktwal na hitsura ng window.

Ang dagdag na resolution na iyon ay kapaki-pakinabang kapag titingnan ang screenshot sa isa pang high density screen at nasasayang lamang kung hindi. Para sa dokumentasyon at mga artikulo ng suporta, ang pag-resize pabalik sa logical size ay naghahati sa dimensions at nagbabawas sa file nang humigit-kumulang 75 porsyento habang nananatiling magkapareho ang itsura para sa karamihan ng mga mambabasa.

Kailan dapat panatilihing malaki ang PNG

Panatilihin ang buong sukat ng PNG kapag ang larawan ay isang master file, isang asset para sa pag-print, o isang source na ie-edit pa sa hinaharap. Ang mga desisyon sa pag-compress ay para sa mga delivery copy sa halip na sa mga orihinal.

Ang mga design file, master ng logo, print artwork, at mga na-scan na dokumento ay pawang makatwiran sa kanilang laki. I-store ang mga iyon sa buong resolution at gumawa ng mas maliliit na kopya para sa bawat paggagamitan. Ang pagkakamali ay ang pag-publish ng master sa halip na itabi ito, dahil ang isang master ay kumukonsumo ng espasyo sa disk nang minsan lamang habang ang na-publish na master ay kumukonsumo ng bandwidth sa bawat pagbisita.

Mas magastos ang transparency kaysa sa inaasahan ng marami

Ang isang transparency channel ay nagdaragdag ng ikaapat na value sa bawat pixel, na nagpapalaki sa raw data nang humigit-kumulang 33 porsyento bago ang compression. Maraming PNG file ang may dalang ganoong channel nang hindi naman ginagamit.

Ang mga screenshot, na-export na chart, at mga larawang na-flatten sa puting background ay madalas na nagpapanatili ng isang alpha channel na ganap na opaque sa lahat ng bahagi. Ang pag-alis nito ay walang binabago sa visual na itsura at kapansin-pansing nagpapaliit sa file. Suriin kung talagang kailangan ng larawan ang transparent background bago ipalagay na kailangan ang channel, dahil karamihan sa mga larawang inilalagay sa puting pahina ay hindi naman ito kailangan.

Nawawalan ba ng kalidad ang pag-compress ng PNG

Walang nawawala sa lossless PNG optimisation, habang ang pagbawas ng mga kulay o dimensions ay permanenteng nagbabago sa larawan. Ang 3 diskarteng ito ay madalas na ipinapaliwanag nang magkakasama ngunit hindi magkakapareho.

Muling isinasaayos ng lossless optimisation kung paano iniimbak ng file ang data nito at karaniwang nakakatipid ng 5 hanggang 20 porsyento na may eksaktong kaparehong output sa bawat pixel. Ang pagbawas ng palette at pag-resize ay nagbabago mismo sa larawan, na katanggap-tanggap para sa mga delivery copy at hindi katanggap-tanggap para sa mga master. Panatilihin ang orihinal tuwing hindi na maibabalik sa dati ang ginawang pagbawas.

Pag-aayos sa isang buong folder ng napakalalaking PNG file

Iproseso ang folder nang sabay-sabay sa isang batch, dahil ang napakalalaking PNG file ay karaniwang dumarating nang maramihan mula sa iisang source. Ang isang set ng dokumentasyon, screenshot library, o export mula sa isang design tool ay karaniwang may parehong problema sa kabuuan.

Maglagay ng hanggang 500 file nang sabay-sabay, o direktang mag-drag ng ZIP archive, at itakda ang dimensions at format nang isang beses para sa buong set. Ang lahat ay tumatakbo sa loob ng iyong browser sa sarili mong processor, kaya ang mga internal na screenshot, disenyo ng produkto, at dokumentasyon ng kliyente ay hindi kailanman umaabot sa isang server. Walang ina-upload, kaya walang retention policy na kailangang basahin at walang maiiwang bakas pagkatapos.

Ayusin ang pinagmulan ng problema pati na rin ang mga file. Ang isang screen capture tool na nakatakdang mag-save ng PNG sa buong retina resolution ay patuloy na gagawa ng 8 MB na mga file nang walang katapusan. Karamihan sa mga capture tool ay nagbibigay-daan sa pagtatakda ng default na format at scale factor, at ang pagpapalit sa parehong setting nang isang beses ay nag-aalis sa pangangailangang iproseso muli ang mga screenshot pagkatapos ng bawat artikulo ng suporta.