Головна Головна -> Підручники -> Підручник Вивчаємо FrontPage скачати онлайн-> Поради Web-дизайнеру: робота із зображеннями

Поради Web-дизайнеру: робота із зображеннями



У цій частині будуть розглянуті два важливих моменти (які проте часто випускають з уваги при створенні Web-сайтів): вибір колірної палітри для зображень і загальний час завантаження. Однак, крім них ви повинні враховувати також багато інших моментів, наприклад колірну гаму всієї сторінки, загальне компонування сторінки, а також те, що зображення відволікають увагу від тексту.

Вибір колірної палітри

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

Tе, що в браузерах використовується палітра з 216 безпечних кольорів, приводить до проблем у двох поширених випадках.

  • Чорно-білі фотографії часто виглядають в браузері не кращим чином. Це відбувається тому, що браузер може відобразити тільки шість градацій сірого, з яких один колір – чисто білий, а другий – чисто чорний. Ось шість доступних в браузері відтінків чорно-білих зображень.
Назва кольору Десяткове
RGB-значення
Шістнадцяткове
RGB-значення
Чорний 0-0-0 00-00-00
51-51-51 33-33-33
102-102-102 66-66-66
153-153-153 99-99-99
204-204-204 СС-СС-СС
Білий 255-255-255 FF-FF-FF

Звичайно такий обмежений вибір недостатній для відображення півтонів, який потрібен для чорно-білих фотографій.

  • Екранні скріншоти Windows також не завжди виглядають правильно. Це пов’язано з тим, що в безпечній палітрі присутні тільки 8 з 20 стандартних кольорів Windows. Ці 8 кольорів раніше були присутніми в фіксованій 16-кольоровій палітрі перших адаптерів VGA, і відтоді вони залишилися в палітрі Windows. Ось їх перелік.
Назва кольору Світлі Темні
Чорний 0-0-0 192-192-192 (світло-сірий)
Червоний 255-0-0 128-0-0
Зелений 0-255-0 0-128-0
Синій 0-0-255 0-0-128
Бірюзовий 0-255-255 0-128-128
Пурпурний 255-0-255 128-0-128
Жовтий 255-255-0 128-128-0
Білий 255-255-255 128-128-128 (темно-сірий)

У безпечній для браузерів палітрі присутні всі кольори із стовпця «Світлі» і жодного – із стовпця «Темні». У результаті скріншоти, вставлені у Web-сторінки напряму, виглядають в браузері погано. Вирішенням проблеми може стати попереднє перетворення скріншота в редакторі графічних файлів таким чином, щоб в ньому використовувалися тільки безпечні кольори.

Управління часом завантаження зображень

Час завантаження Web-сторінок завжди важливий для тих, хто працює в Інтернеті. Час завантаження можна розрахувати, розділивши загальний розмір всіх елементів сторінки в байтах на доступну смугу пропуску мережевого з’єднання в байтах на секунду. Тому управління часом завантаження Web-сторінок зводиться до управління кількістю байт на сторінці, а враховуючи те, що зображення мають набагато більший розмір, ніж текст HTML, в кінцевому результаті все зводиться до управління розміром графічних файлів.

FrontPage проводить оцінку швидкості завантаження Web-сторінки в автоматичному режимі. Наприклад, в правому нижньому куті мал. 10 ви можете помітити напис «4 seconds over 28.8».

При оцінці швидкості завантаження сторінок необхідно також враховувати деякі додаткові чинники.

  • В більшості сучасних браузерів передбачається кешування зображень і інших файлів (тобто копії цих файлів деякий час зберігаються на локальному диску). Перед завантаженням файла браузер перевіряє наявність його локальної копії в кеші, і якщо така є, то в залежності від настройок він виконує одну з наступних дій:
    • Просто використовує файл з кеша, не ставлячи ніяких запитань.
    • Порівнює мітку часу локальної версії з міткою часу версії файла, розміщеною в Інтернеті, проводячи спеціальний запит до Web-серверу. Якщо вони співпадають, використовується локальна копія, якщо ні – проводиться завантаження оновленої версії.

У деяких випадках ви можете істотно скоротити час завантаження Web-сторінок, правильно організувавши посилання на графічні файли. Якщо шлях до одного і того ж графічного файлу, розміщеного одночасно на двох Web-сторінках, співпадає (звичайно це відбувається, якщо всі зображення вміщені в одну загальну папку Images), то браузер при перегляді другої сторінки скористається кешованим графічним файлом. Якщо ж адреса URL до одного і того ж файлу на різних сторінках відрізняється, браузер буде завантажувати один і той же графічний файл два рази.

  • Пошук шляхів скорочення загального часу завантаження часто приводить до необхідності використати декілька зображень меншого розміру замість одного великого. Але тут важливо не допустити виникнення ситуація, яка називається перевантаженням з’єднання (connection overhead). Спробуємо пояснити, в чому справа.
    За винятком ситуації, коли і браузер і Web-сервер використовують засіб під назвою постійні з’єднання (persistent connections), протокол HTTP вимагає, щоб на кожний файл, що завантажується, відкривалося (і по закінченні завантаження закривалося) окреме з’єднання між браузером і Web-сервером. Наприклад, якщо Web-сторінка містить 10 зображень, буде встановлено 11 з’єднань: одне на окремий1 файл HTML і ще 10 – по одному на кожне з’єднання. Однак при кожному встановленні або закритті з’єднання генерується, по-перше, додатковий службовий мережевий трафік, а по-друге, відволікаються ресурси як системи, на якій працює Web-браузер, так і Web-сервера. Тому завжди необхідно оцінювати, чи не займе встановлення додаткових з’єднань більше часу, ніж економиться в порівнянні із завантаженням графічних файлів більшого розміру. У будь-якому випадку використання дуже великої кількості маленьких графічних файлів не практикується.
  • У файлах GIF пікселі добре стискуються тільки по горизонталі. Наприклад, замість того, щоб окремо записувати інформацію про кожного із 100 послідовно розташованих на рядку пікселях білого кольору, в файлі зберігається запис типу: відобразити 100 пікселів білого кольору.
    На відміну від файлів GIF в JPEG стиснення файлів проводиться як у вертикальному, так і в горизонтальному напрямі. Тому напрям ліній і дільниць має для цього формату менше значення. Пам’ятайте про те, що в будь-якому випадку дільниці зображення однакового кольору стискуються набагато краще, ніж дільниці з переходами. Крім того, в файлах JPEG можна регулювати міру стиснення (і відповідно, якість зображення).







Популярні глави цього підручника:



Всі глави цього підручника:

Вивчаємо FrontPage