Малюнок сотень слів дорожче нам, Web Design, Інтернет-технології, статті

Михайло Мельников, 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>

*

*