Photoshop+PNG = problemy?
Czy nie zastanawiałeś(aś) się czasem, że Photoshop zapisuje odrobinę za duże PNG-i? Gdy pliki stworzone w konkurencyjnych programach mają np. 10kB, to w PS-ie 20? Manipulowanie opcją przeplotu przynosi mizerne efekty? Z powodu wskazań w „Save For Web” wolisz wybrać JPEG/GIF?
Do tego dochodzi niemożność wkomponowania obrazka w tło strony pod IE pomimo, że kolory teł są takie same, tak jak tutaj?
Jest na to sposób!
Wystarczy PngOptimizer.
Swego czasu, borykałem się z tymi problemami i musiałem unikać PNG – raz: obrazki wychodziły większe objętościowo, dwa: wspomniany przeze mnie problem z IE.
Tak naprawdę, zaczęło się od tego, że po wstawieniu mojej stopki (mały pasek @PNG24) na forum, któro nakładało limit 10kB na obrazki w podpisie. Mój obrazek miał ~16kB. Wówczas, praktycznie bezradny popytałem, co jest nie tak z obrazkiem, bo powinien być trochę lżejszy. Poradzono mi w(y)łączenie przeplotu przy eksporcie (już nie pamiętam ;P), ale niewiele to dało – musiałem po prostu obciąć graficzkę.
Głowiłem się trochę, jak rozwiązać m.in. ten problem (IE wtedy było na dalszym planie). Parę dni (sic!) googlowania i natrafiłem na PngOptimizer. Jest to aplikacja dla Win2k/WXP (nie wiem, jak jest z Vistą) na licencji GPL (coś dla grzebiących albo developerów:)). Program jest niewielki i można go użyć na dwa sposoby: „wyklikaczem” albo z konsolki. W przypadku tego programu o niebo wygodniejsze jest „wyklikanie”, ponieważ cała filozofia sprowadza się do przeciągnięcia interesujących nas plików do okna programu. Dodatkowo, możemy przekonwertować np. GIF/JPG/TGA na PNG w ten sam sposób.
Jakie wyniki? W zależności od urozmaicenia grafiki można osiągnąć ciekawe rezultaty. Zazwyczaj, po eksporcie do PNG z Photoshopa i optymalizacji otrzymujemy maksimum (statystycznie) 90% początkowego rozmiaru pliku. Niejednokrotnie mi się zdarzyło, że po optymalizacji było to zaledwie kilkanaście procent!
A co z IE? Wszystko jest już OK:
IMHO niezbędne narzędzie w warsztacie webdesignera.
A ja w warunkowych dawałem inne kolory :> .