Малюнок сотень слів дорожче нам

Михайло Мельников, Web-studio "Cherry-Design"

Тепер поговоримо про графік на Web-сторінках, адже саме завдяки їй WWW стала найпопулярнішим сервісом Internet, саме їй ми зобов'язані всього цього різноманіття сторінок.

Що особливого в графіку, що застосовується на web-сторінках?

А те, що вона має свої певні обмеження, з якими ми повинні рахуватися і отримувати з цього вигоду.

Для використання в Web застосовується два основні формати файлів – GIF та JPG. Зараз просувається новий формат для web-графіки під назвою PNG (вимовляється "пінг"), але він поки що мало поширений, і не всі броузери його розуміють, тому з цим форматом ми поки розбиратися не будемо.

Отже, приступимо до розбору форматів GIF і JPG, опишемо їх основні властивості і особливості.

Формат GIF

А тепер трошки роз'яснень – до чого ці властивості можуть привести. Як Ви прочитали, GIF підтримує не більше 256 кольорів, а це значить, що всі зображення, які ми зберігаємо в GIF-форматі, явно або неявно зменшують кількість кольорів, щоб укластися в цей ліміт (різні програми з різним успіхом). А звідси висновок – якщо у Вас гарна фотографія з плавними переходами і ледве помітним відтінком кольору, то після перетворення все буде набагато гірше – відтінки перестануть бути невловимими, і вся фотографія придбає неприродний, нереалістичний вигляд. Тому, якщо Ви хочете все-таки зберегти фотографію у форматі GIF і передати всі відтінки, то доводиться йти на хитрощі. Наприклад, до фотографії можна застосувати будь-який художній фільтр і перетворити її в малюнок або застосувати тонування. Зате немає жодних проблем із збереженням малюнків і креслень в цьому форматі, вони, як правило, добре стискаються і не містять багато кольорів.

А тепер розглянемо властивості і особливості другого популярного формату в мережі.

Формат JPEG

Мабуть, це всі переваги формату JPG, і основне його призначення – зберігання зображень фотографічної якості.

Всю роботу з обробки графіки робіть в проміжному форматі

Ну ось, з форматами розібралися, тепер розглянемо деякі особливості роботи з графікою. Незважаючи на те, що ми зберігаємо зображення в GIF-файлі з підтримкою 256 кольорів або в JPG-файлі з 16,7 млн. квітів, працювати із зображенням потрібно в якому-небудь проміжному форматі, який дозволяє зберігати картинку без спотворень і без втрати глибини кольору (наприклад, TIFF і внутрішні формати редакторів типу PSD). Справа в тому, що в процесі роботи Вам знадобиться багато разів змінювати або спотворювати зображення, що, врешті-решт, призводить до багаторазового перезапису файлу. Багаторазова запис у форматі GIF призведе до того, що загубляться відтінки зображення, а у форматі JPG – кожна нова перезапис файлу буде вносити нові спотворення, і через деякий час фотографія буде виглядати жахливо. Тому всю роботу з обробки графіки робіть в проміжному форматі (і не тривожтеся величезними розмірами файлу) і тільки на самому останньому етапі перетворіть зображення в потрібний формат (часто – одночасно з оптимізацією розміру файлу).

Оптимізація графіки

Для web-сторінок дуже важливим є питання розміру фотографії. Якого розміру їх робити? Чи не будуть вони занадто довго грузиться? При оптимізації можна зменшити розмір файлу, але навряд чи варто оптимізувати фотографію, що не несе значеннєвого навантаження. Самий перший етап оптимізації – виділення у фотографії головного (з відкиданням всього іншого) і акцентування на иллюстрируемого елементі. Це досягається за допомогою операції кадрування і знаходження найбільш виразною частини, що передає сенс фотографії. Після цієї операції вже можна оптимізувати зображення, і в цьому випадку воно дійсно буде мати найменший розмір.

А з розмірами фотографій потрібно дотримуватися певного компромісу – не робіть їх занадто дрібними, на яких навіть під лупою нічого не розгледиш, і не робіть їх занадто величезними, щоб час не розтяглося у вічність. Хоча, зрозуміло, є винятки: правильно оптимізована велика фотографія може займати час пересилки, еквівалентну часу пересилання звичайної фотографії і, навпаки, погано оптимізований маленький малюнок буде навантажуватися до кінця днів. Під звичайною фотографією я розумію фотографію розміром приблизно 250×300 пікселів і займає порядку 6-10 кілобайт. Це не означає, що всі Ваші фотографії повинні мати такі розміри, але площа фотографії повинна бути їй еквівалентна. Ці рекомендації відносяться до "ілюструє" текст фотографій і не відносяться до малюнків, які виконують функції елементів навігації.

У цій статті наведені деякі базові відомості щодо застосування графіки на web-сторінках. А в наступних статтях я опишу різні аспекти виготовлення і оптимізації графіки.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*