Уроци Форуми Блогове

Помогни ни да направим Uroci.net по - богат! Добави урок

Категории Други уроци 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

Въведение:

Неоптимизираната картинка предназначена за уеб сайт е като полу завършена. Процеса на компресиране е задължителен за качествено направен уеб сайт. Тук ще ви запозная със характерните особености на форматите, както и методи за намаляване размера на изображенията.

Честно да ви кажа ми стана смешно като чух рекламата на небезизвестен Интернет доставчик, как Интернет страниците ви ще зареждат моментално. Не е необходимо да сте на 1-2 мбита интернет за да чакате някой кадърно направен сайт (като изключим флаш сайтовете както и фотографските такива) да зареди. Ако накарате потребителя да чака повече време за зареждане рискувате да отвори друг прозорец и да започне да се занимава с друго нещо и е възможно да загубите посетители. Други луди си правят сигнатури с невъобразимо голям размер - не го разбирам това 100кб + за подпис при положение, че за 20-40 кб ще изкарам подобно качество, което трудно може да бъде различено от незаинтересуван към търсене на кусури поглед. Просто има вероятност да съм му прочел мнението преди да ми е заредила "красотата" му.
Ако до сега не сте оптимизирали (намалявате размера(дисковото пространство)) е време да започнете за да не тровите хората с тежките си изчадия :)


За да достигнем най-добрия ефект трябва да изберем правилния формат за картинката и ето предложенията на фотошоп (Оптимизацията при него се осъществява чрез менюто File -> Save for Web).

Менюто Save for Web ^

Сега ще ви запозная с трите най-разпространени формата за изображения в интернет. Според вида на картинката трябва да се съобразите кой от трите да изберете - JPEG, GIF, PNG(8,24). На кратко jpeg е подходящ за многоцветни снимки, картинки; GIF за графики и изображения с малко цветове, а PNG-8 е леко подобрена версия на GIF, а 24 битовата му версия е скъпо удоволствие (заема доста място), което някога с малко специални оптимизатори може и да влезе в употреба.



JPEG (Joint Photographic Experts Group)

Подходящо за снимки, загладени ъгли, плавно сливащи се цветове, сияния, но не за точни и остри обекти като остри ъгли, графики и наситени цветове. Добавя нежелани ефекти при плътни цветове и остра смяна на цвета, неподходящ за надписи, графики, малкоцветни изображения, не поддържа анимации.



Първата картинка е във формат jpg със размер 10кб, а втората е gif - 18кб.

Методи на оптимизация :

1. Най-лесния и рядко осъществим метод е намаляването на физическия размер на картинката (ширина, дължина).
Разбира се не всеки път имаме възможност да изрежем нещо, но когато е възможно е повече от задължително (със инструмента crop tool ).
Да приемем, че фона на страницата ви е бял, тогава примера ще изглежда така:


В първия вариант е изрязано излишното пространство от изображението. Първата версия е малко под 1кб, а втората е 1.22кб. За примера е използван GIF формат. Маркирайте изображенията за да видите излишния бял фон.

2. Повечето оптимизиращи програми предлагат ниво на компресията low, medium и high, но adobe photoshop ни предоставя богати възможности по скала на "Quality"(качество) от 1 до 100. Механизмът е: колкото по-голяма компресия, толкова по-ниско качество и по-малък размер.Quality 100 в случая е максимален коефициент за "красота", така че колкото по-малко е числото, толкова по-оптимизирано е изображението. Обикновено тънкостта при jpeg е да се докара изгоден баланс между качество/размер като по лични наблюдения приемам около 60 за често най-доброто решение.


Първата картинка е не оптимизирана с размер ~37kb - втората е оптимизирана с размер 12кб - Quality 60. Разликата е незабележима.

3. Колкото по-замазано/неясно е изображението (blur), толкова по-добре за jpeg. При тях компресора се справя доста по-добре. Не заостряйте(sharpen) излишно картинката си. Като опция на менюто save for web можете да намерите blur (под Quality) и да прецените колко и дали ви устройва. Сякаш е по-добре замазването на определени места с blur инструмента .

4. Намалете контраста. Jpeg компресиращите алгоритми си допадат повече с изображения с нисък контраст(saturation) => колкото по-малко контраст, толкова по-малък размер на файла. И все пак по мое мнение рядко си заслужава поради малката печалба и голямата жертва.

5. Винаги използвайте оригиналния файл за обработка. Колкото повече сейвате изображението в jpeg формат, толкова повече качество губи. Самия формат претърпява загуби при сейване или трансфер, което означава, че при намаляване на качеството един пиксел сменя цвета си с друг и този ефект не е обратим. Използвайте формати които нямат такива проблеми като PNG, TIFF(*.TIF).

6. JPGs и Greyscale. Greyscale изображенията притежават 256 нюанса на сивото (включително бяло и черно). Препоръчително е при чернобели изображения да го използвате спестявайки някой друг байт. При photoshop промяната в прословутия формат се извършва от менюто Image -> Mode -> Grayscale.

7. Специални Jpeg оптимизатори предлагат по-съвършено манипулиране като например различно качество на различни части на изображението (виж също Weighted optimization / полева оптимизация по-долу на страницата) или по-добри методи за компресиране на кода. Такава програма например е:

Jpeg Optimizer

Калдейта Ком ЕООД - © 2003-. Всички права запазени.

Контакти За реклама Условия за ползване