Графіку на дієту!, Різне, Графіка, статті

Олександр Клімов

Зображення коштує тисячі слів.
Хто з видатних старих гуру сказав це?

Не сумніваюся, хтось напише
мені і скаже хто це був, але звучить ця фраза для
мене також як "мій старий друг – Білл
Шекспір ​​".

Хто б це не був, мені цікаво
чи не забув він про Мережі тоді. Можливо ні, але
знаєте чому? Ну напевно в наші дні ви не
знайдете в Мережі великої кількості картинок
еквівалентних тисяч слів.

Досить гадати, давайте для
різноманітності поглянемо на деякі реальні
цифри.

Текстовий файл з тисячі слів
дорівнює приблизно 25 рядками звичайного тексту на
веб-сторінці. Розмір цього тексту у форматі txt
близько 5,767 байт. Дуже нехитрий і простий
16-тіцветний GIF, оптимізований по максимуму,
дасть нам одне зображенням розміром 150х150
пікселів. Не багато ж ми маємо, щоб зобразити
Бруклінський міст, або навіть якісну
репродукцію поштової марки в даному випадку!
Розмір цього графічного файлу буде приблизно
5,746 байт.

Це реальні цифри – я перевірив.

Таким чином, Ви маєте вибір:
або текст в 25 рядків, або не дуже гарного
якості зображення поштової марки або
чого-небудь ще, що займає той же простір на
екрані.

ОК, я знаю, графіка несе в собі
набагато більше, ніж просто зображення. З нею
"Місце" набуває симпатичний вигляд, вона
дає очам бажаний відпочинок після всіх зусиль з
карлючками як букви і слова. Це безсумнівно так,
але за рахунок деяких жертв.

Занадто багато графіки = занадто
великий розмір файлу = великий час завантаження =
занадто мало зацікавлених відвідувачів –
терплячих, готових дочекатися наших небачених
творів мистецтва. Що ж робити? Без
графіки наші сторінки будуть смутними

Легко! Графіка – на дієту! Ось
дюжина рад як це робиться.

1. Обрізка зображень.

Це може здатися очевидним,
але найефективніший шлях прискорити завантаження
графічних файлів – це використовувати
зображення меншого розміру. Обрізайте
зображення для фокусування на важливому, або
зменшуйте розмір пропорційно, при цьому
непотрібні деталі не будуть помітні.

2. Зниження кольоровості.

Якщо Ви використовуєте формат GIF для
зображень, простий шлях скоротити розмір файлу
– Використання графічного редактора для
скорочення глибини кольору. Параметр "Глибина
кольору "визначає кількість кольорів доступних
в кольоровій палітрі зображення. Максимальна
глибина кольору для GIF – це 8 біт, що означає
палітру з 256 квітів. Я намагаюся скоротити
кольоровість настільки сильно наскільки це
можливо, часто до 4 біт (16 кольорів), якщо
зображення по раніше виглядає добре.

3. Використання формату JPEG
для фотографій.

Незважаючи на те, що GIF – дідусь
форматів зображень використовуваних в
Інтернет, JPEG став лідірущім форматом для
фотографій. Обидва і GIF і JPEG стискають зображення, але
JPEG більш ефективний для зображень з безліччю
квітів, особливо фотографій. Інша перевага
формату JPEG – глибина кольору – формат GIF не може
мати більше 256 кольорів, а JPEG може використовувати
повну 24-х бітну кольорову палітру для створення
мільйонів квітів і відтінків.

Часто зображення у форматі GIF
мають більший розмір, але гіршу якість
зображення, ніж формат JPEG. Так не буде завжди – в
певних обставин таких як
зображення має лише кілька кольорів, GIF
будуть рівнозначні або навіть перевершує якість
JPEG при меншому розмірі файлу. Але для фотографій
формат JPEG – найкращий вибір.

4. Використання зображень
з низькою чіткістю в процесі завантаження.

Якщо Ви не можете зменшити
швидкість завантаження вашого сайті, цікавим
прийомом буде створення видимості швидкої
завантаження. Це використання параметра lowsrc,
запропонованого фірмою Netscape в 2-ій версії браузера
Netscape Navigator і нині підтримуваного також
браузерами Internet Explorer версій 3.0 та вище.
Використання цього параметра призведе до того,
що браузер буде показувати зображення
зниженої якості в процесі завантаження
звичайного зображення. Ця техніка дозволяє
створити видимість того, що побачить після повної
завантаження відвідувач. Це вкрай важливо для image maps,
оскільки це дозволить користувачеві побачити
активні області й перейти по ним на інші
сторінки ще до того як повне зображення
завантажиться цілком.

Параметр lowsrc в теге <IMG>
виглядає так:

<IMG src="highres.gif"
lowsrc="lowres.gif">

Звичайно, це Ваш вибір порівнювати
розмір цих двох файлів чи ні. Зазвичай
використовують або менше за розміром зображення,
або чорно-біле як проміжне зображення.
Якщо Ви визначили розмір зображення,
браузери розтягнуть менше зображення до
зазначених розмірів.

На замітку: Цей прийом у
насправді не робить час завантаження
менше. Насправді це збільшує загальне
час завантаження, додаючи додаткове
зображення. Але, якщо все зроблено правильно,
враження від сторінки покращиться оскільки
користувач побачить результат набагато швидше.

5. Використовуйте черезрядковий
gif-формат (interlaced)

Для швидкого завантаження з метою
попереднього перегляду зображень зручно
користуватися їх копіями з низьким дозволом.
Копія з низьким дозволом може бути в
jpeg-форматі, а повне зображення – в gif і навпаки.
Але якщо ви не хочете для кожної своєї картинки
створювати дві копії – з низьким і високим
дозволом, – найкраще застосувати
черезрядковий gif-формат.

Черезрядковий гіфи з'являються на
екрані швидко у вигляді картинки з низьким
дозволом і поступово перемальовується в
високоякісне зображення. Користувач
сам може вирішити, чекати чи кінця завантаження
чи ні. Це дуже зручно. Більшість
графічних редакторів дозволяють перетворити
будь-яке зображення в черезрядковий gif-формат.

6. Вказівка ​​висоти і ширини
зображення в теге <IMG>

Не лінуйтеся, скрізь де Ви
використовуєте тег <IMG> завжди включайте
параметри "height" (висота) і "width" (ширина).
Це дозволить браузеру відразу визначити
скільки місця буде потрібно під зображення, що
призведе до того, що браузер зможе завантажувати
текст навколо графіки, без очікування повної
завантаження зображення. Більшість графічних
редакторів мають функцію визначення розмірів
для будь-якого підтримуваного графічного
формату.

Наприклад, якщо Ваше зображення
знаходиться у файлі image.gif і має розмір 50 пікселів
на 100 пікселів, тег <IMG> повинен виглядати так

<IMG src="image.gif" height="50"
width="100">

7. Не використовуйте
масштабування зображень

Ви можете бути вражені простим
способом зміни розмірів зображення у вигляді
зміни параметрів висоти і ширини
зображення в теге <IMG> замість обрізання
зображення або зміни його розмірів у
графічному редакторі. Це не найкраща ідея …

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

8. Масштабування
одноколірних зображень для створення смуг.

Навіть хоча Ви не повинні
масштабувати зображення, є один випадок
коли цей прийом буде Вам корисний. Якщо Вам
потрібні одноколірні смуги на сторінці, Ви можете
скоротити час завантаження, замінивши використання
повнорозмірного GIF створенням зображення
розміром 1 на 1 піксель і встановивши атрибути height і
width під потрібний розмір для кожної смуги.

Хоча можливість затримки все ж
існує, це має бути швидше, ніж
завантажувати повнорозмірне зображення.

9. Обрізка анімованих GIF.

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

Проблема полягає в тому, що так
як анімовані GIF – просто серія звичайних GIF,
файл може розростися до неприйнятного розміру.
Один спосіб проконтролювати цей ріст – почати
з GIF c фоновим малюнком, і потім створювати
анімацію, поміщаючи зображення меншого розміру
на перше зображення. Більшість сучасних
GIF-аніматорів підтримують цю функцію, яка
називається "leave in place", даючи Вам можливість
намалювати серію GIF меншого розміру замість
використання повнорозмірних GIF для кожної
осередку анімації.

10. Використання
перегляду.

Інший досить простий шлях
мінімізувати обьем графіки на Вашій
сторінці – використання попереднього. Суть
полягає в наступному: створюються зображення
меншого розміру, і зв'язуються посиланням зі
сторінкою з великим зображенням.

Відвідувачі сайту хто не хоче
дивитися повнорозмірні зображення ізбежат
завантаження великих і нецікавих для них
зображень. Хто хоче – натисне посилання на
зображенні і побачить повне зображення.

Велика кількість програм
можуть створювати такі галереї зображень, як,
наприклад, FrontPage 98.

11. Розбивка зображень на
частини використовуються на інших сторінках

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

Таке зображення може навіть
бути набором GIF і JPEG файлів – кожний формат
використовується якщо дає кращу якість при
найменшому розмірі файлу. Це досягається
розрізанням і оптимізацією обраних областей
зображення. Якщо Ви вже задумалися над цими
словами – Вам потрібен хороший графічний редактор,
наприклад PhotoShop.

Не старайтеся – Вам доведеться
мати справу зі створенням таблиці яка зв'яже
всі частини в єдине ціле. Чим більше частин, тим
сложней структура цієї таблиці. Ви потрібно
дотримуватися розумне співвідношення між складністю
єдиної таблиці і розміром економії в процесі
подібної оптимізації.

Природа використовуваних протоколів
використовуваних в WWW змушує звернути увагу
на один момент. Наприклад браузери і веб-сервера
використовують попередні версії HTTP змушені кожен
раз отримувати зображення знову. Це означає, що
завантаження великого зображення можливо буде
відбуватися швидше, ніж у випадку набору менших
зображень. Ви повинні мати це на увазі, використовуючи
вищеописану
техніку.

12. Текстова версія сайту або
альтернативний текст

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

Якщо Ви не хочете робити
текстову версію сайту, дозволите параметр ALT в
код описує зображення. Більшість
браузерів показують його зміст на місці
зображення, якщо показ графіки відключений в
браузері відвідувача Вашого сайту.
Використанням цього параметра Ви покажете
такого користувача, що він втрачає.

Наприклад, якщо у Вас є
зображення мосту розміром 100 на 250 пікселів, тег
<IMG> При використанні параметра ALT може
виглядати так:

<IMG src="bridge.gif" height="100"
width = "250" ALT = "Міст">

Використання графіки завжди
буде припускати більший об'єм Ваших сторінок,
ніж при використанні простого тексту, – ви
змушені оптимізувати графіку по максимуму.

Але без використання графіки
також обійтися не можна – вона додає стиль і
колір на Ваші сторінки, роблячи їх більш приємними
для ока. Зменшіть її об'єм до мінімально
можливого розміру і відвідувачі скажуть Вам
спасибі за Ваш час.

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


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

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

Ваш отзыв

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

*

*