Други уроци
Adobe Photoshop
Adobe Illustrator
Adobe Flash
Adobe Fireworks
DreamWeaver
CSS и HTML
Corel Draw
Image Ready
PHP
SEO
CMS
Microsoft Windows
Microsoft Word
Microsoft Excel
PowerPoint
Microsoft Access
Microsoft Publisher
Linux
Visual basic
JavaScript
Ajax
3ds Max
Maya 3D
C++
Sound Forge
Gimp
SWiSH
Оптимизация на изображения
видян: 27032
PNG (Portable Network Graphics)
Свойствата му са много подобни на gif, което го прави негов главен конкурент, той всъщност е създаден да го измести. Няма загуби след запазване(сейване). За да го пребори излиза напред със повече цветове(png24), 256 степенна прозрачност(png24), дори гама коректор, който подсигурява излизането на едни и същи цветове при Windows, Linux и Mac. Най-интересното е, че компресията им е по-съвършенна и някой път(не винаги) излизат по-малък размер от gif (забелязвам го повече при "плоските цветове"(flat colors)). Единствения малък недостатък е, че малък брой браузъри не извеждат този формат и това спира много дизайнери да го използват. Не поддържа анимации.
Първото изображение е gif - 952 байта, второто е png - 925 байта.
PNG-8 - Много прилича на gif, като повече от номерата с
предшественика му ще минат и тук. Все пак се забелязва нова функция:
Interlaced. Тази опция увеличава размера на файла забележимо, но предлага възможността изображението да се зарежда на етапи с браузърите ви. Така ако почне да ви зарежда в някой сайт няма да се появи изведнъж когато е заредило, а първо ще се покаже в малка резолюция и постепенно ще се подобрява качеството и. Интересното е, че някои твърдят, че им зареждало по-бързо така, но и да не е - имаме картинка от началото на зареждането и не стои празно поле.
PNG-24 - Много добро качество и съответно размера тук е огромен. Нещото което ми направи най-голямо впечатление е степенната прозрачност, която стои на всякакъв фон - така можете да направите изображението да стои полупрозрачно на фона на уеб страницата ви! Но размера си казва думата и сякаш няма да намери голямо приложение в тази област. Присъства и функцията interlaced, спомената по-горе.
Втората картинка е полупрозрачна, но размера и е 45кб спрямо 8.7кб на първата
Оптимизация - Както много други програми нямаме голяма възможност за оптимизация с фотошоп на 24 битовия вариант. Това не означава, че няма начини, напротив има успешни оптимизатори с които не се губи качество, при това безплатни като:
OptiPNG
pngcruas
Други техники:
Weighted optimization / регионална оптимизация
Това е доста интересна и доста полезна техника за компресиране на определени части от изображението. Ако примерно имате 1-2 по-детайлни и важни елемента в картинката можете да ги оставите с добро качество, а останалата част да бъде компресирана. За целта ще използваме канали (channels).
1. Започнете със селектиране на важните части от изображението, след това отидете в Window -> Show Channels и кликнете на Save selection as channel, както е указано по-долу.
2. След това сме на етап сейване - File -> Save for web. Понеже съм избрал снимки ще я сейвам като jpeg и избирам Use channel to modify Jpeg quality, намиращ се до Quality.
След това в показалото се меню избираме за channel Alpha 1 и по слайдера активирал се по-долу настройваме компресирането, като черната стрелка е за качеството извън селекцията (ненужната част), а бялата е за селектираната (тази която е нужна с високо качество).
Тук коефициента за качество на селектираната част е 79, на останалата 64.
Конкретно за снимка не препоръчвам голяма разлика в коефициентите.
И крайните резултати:
Първата картинка е не оптимизирана и размерът и е 32.2кб, на втората е приложена техниката и е с размер 24.2кб.
Метода важи също за Lossy и Dither при gif и dither при png-8 по същия начин.
Композиционна оптимизация
Този метод се осъществява със използването на slices (резки от картинката), които се запазват - всяка в най-подходящия формат. Това най-добре го може програмата Image Ready, идваща в пакет с фотошоп, но сега ще разгледаме начина с фото шоп. Като приготвим нужното изображение, взимаме инструмента Slice Tool 
и нарязваме картинката на части определени за различни формати.
След това пристъпваме към етап - запазване. Отиваме в вече до болка познатото ни Save for web меню и откриваме, че седящите в ляво инструменти ще ни влезнат най-накрая в употреба. В случая ни интересува Slide select tool 
, с който ще посочваме парче(slice) чието качество ще настройваме в познатото ни поле. Така правим желаните оптимизации и избираме оптималния формат и пристъпваме към самото запазване. След като сме кликнали OK ни дава директория където да запази HTML (да, правилно разбрахте) файл, в който можем да намерим резките ни перфектно наредени като цяло изображение в таблица. Спокойно можем да копираме нужния код и резки и да ги сложим в нашата страница страница.
Толкова информация в един урок на тази тема няма никъде и се надявам се да сте осъзнали важността от компресиране на изображения и по този начин да намаля терора над трафика и скоростта на интернет връзката на някои потребители (включително и мен). Най-важното е да съм ви помогнал да правите кадърни и успешни уеб сайтове! Не знам за вас, но след писането на този урок винаги мисля в какъв формат и как да оптимизирам картинка, като преди не се замислях особено и правих грешки :)
Автора съм аз (Sunerphey), но съм използвал сайтове за допълване на знанията ми и някои от изображенията са взети от там. Част от сайтовете са:
http://www.webdevelopersnotes.com/
http://www.webmonkey.com/
http://en.wikipedia.org/
http://www.peachpit.com/
http://www.bath.ac.uk/
Коментари (5)
Още веднъж БРАВО ЗА ТРУДА :)