Коли ви зберігаєте зображення в графічному програмі, вам пропонується різноманітні формати. Котрий з них обрати, коли мова йде про вбудовування зображення на веб-сайт?
Якщо ви хочете представити зображення на своєму веб-сайті, у вас є вибір із трьох форматів.
• GIF
• JPEG
• PNG
Який формат вибрати для якої конкретної мети? Чи краще використовувати GIF чи PNG для фотографій? Спочатку надається короткий огляд можливостей кожного формату.
| Властивість | JPEG | GIF | PNG |
| Без втрат | Ні | Так | Так |
| Кольори | 24 біти | індексоване до 256 | індексоване (до 256), 24 біти або 48 біт |
| Прозорість | Ні | Так, один колір | Так |
| Прогресивне завантаження або плетіння | Так | Так | Так |
| Анімації | Ні | Так | Ні |
Цей невеликий огляд вже показує різні властивості форматів. Зрозуміло, що деякі формати підходять зазвичай краще для певних цілей, ніж інші. Це, власне, те, що розглядається в наступному розділі. Там показано, коли найкраще використовувати який формат.
Фотографії
Без сумніву, для фотографій слід використовувати JPEG. Тут зображення можна добре стиснути, причому якість можна варіювати. Тут можна знайти правильну рівновагу між якістю та ступенем стиснення.
Скріншоти/Діаграми
Для цього найкраще підходить формат PNG. PNG також цікавий для технічних малюнків, планів тощо. PNG може бути використано також для зображень, в яких використовуються прозорі області.
Тексти/Логотипи
Якщо у вашому логотипі є текст або взагалі потрібно відобразити шрифт, варто використовувати GIF або PNG. Однак через кращу продуктивність, зазвичай вибирають PNG. JPEG для відображення текстів непридатний, оскільки краї відображаються нечітко.
Прозорість
Якщо мова йде про відображення прозорих областей, JPEG відпадає на початку. Тому вибір залишається між GIF та PNG. Проте який з цих двох форматів використовувати, коли мова йде про прозорість? GIF, в принципі, може працювати з прозорістю, але результати зазвичай нечіткі. Піксель у форматі GIF може бути або повністю видимим, або повністю прозорим. При PNG цей феномен не відбувається. Цей формат має додатковий альфа-канал, завдяки якому досягаються докладніші результати прозорості.
Вбудування зображень
Графіку можна вбудовувати за допомогою елемента img. (Будь ласка, зверніть увагу, що зображення зараз дуже часто вбудовуються через CSS. Докладна інформація щодо CSS буде надана пізніше. Проте показаний HTML-спосіб повністю відповідає стандартам і може використовуватися в HTML5 безпеки.)
<img src="logo.png" alt="PSD-Tutorials.de" />
img - це самостійний елемент. Через відповідні атрибути зображення можна детально описати. Найважливіший атрибут, безумовно, це src. Через нього вказується зображення, яке слід вбудувати. У показаному прикладі вважається, що графіка logo.png знаходиться в одній папці разом із файлом HTML, в якому визначено елемент img.
Для того, щоб зображення фактично відображалося, слід правильно вказати шлях до нього. HTML надає різноманітні можливості для звернення.
• Абсолютні шляхи
• Абсолютні відносно базової адреси
• Відносні відносно базової адреси
Спершу про абсолютні шляхи. Цей варіант зазвичай використовується, коли зображення не знаходиться на власному сервері. Припустимо, ви хочете вбудувати в свій веб-сайт відомого від PSD-Tutorials.de метелика. Тоді теоретично ви могли б завантажити його безпосередньо з сервера, на якому він розташований. Спочатку з'ясуйте шлях до зображення. Це можна зробити найпростіше, клацнувши правою кнопкою миші на зображенні в браузері, а потім вибравши Копіювати URL зображення.
Те, що завантажується в буфер обміну, в кінцевому підсумку має виглядати так:
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Отже, це повна адреса зображення. Цієї інформації вже достатньо для вбудування зображення.
<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />
Ми призначаємо атрибуту src повний шлях до зображення.
Однак проблема з цими абсолютними шляхами полягає в тому, що ви не маєте справжнього контролю над вбудованим вмістом. Якщо зображення, на яке ви посилаєтесь, видалено з сервера або переміщено в інший каталог, тоді виникає помилка відображення.
Тому це абсолютне посилання дійсно повинно бути винятком.
Абсолютні шляхи відносно базової адреси
Цей варіант підходить завжди, коли зображення знаходиться на тому ж комп'ютері/сервері, що і файл HTML, і доступне за поточним протоколом. Це може здатися складним, але це не так.
Приклад:
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Це повна адреса. Наступна частина є абсолютним шляхом.
wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Цей абсолютний шлях відноситься до базової адреси http://4eck-media.de.
Відносні шляхи відносно базової адреси
Цей варіант, який ми зараз розглянемо, безперечно є найбільш поширеним. Він завжди бере поточний шлях як базову точку, з якої в кінцевому рахунку відбувається адресація. Наведемо кілька прикладів. Припустимо, що є файл index.htm, в який ви хочете вбудувати зображення. Додатково на тій же рівні існує каталог з іменем images, в якому знаходиться згадане зображення.
index.htm
images
--logo.png
Виклик у властивості src у цьому випадку виглядав би наступним чином:
src="images/logo.png"
Як буде виглядати це, якщо зображення знаходиться у каталозі, що знаходиться вище за файлом HTML?
projekt
--images
-----logo.png
--archiv
-----index.htm
У цьому випадку index.htm знаходиться в каталозі нижче, ніж зображення, яке додається logo.png.
src="../images/logo.png"
Отже, синтаксис тут означає: Перейдіть один рівень вгору, перейдіть у каталог images і покажіть logo.png.
projekt
--images
----logo.png
----2013
------januar
--------index.htm
Тут синтаксис буде наступним:
src="../../images/logo.png"
Зображення logo.png в цьому випадку знаходиться на два рівні вище ніж index.htm у каталозі images.
Перевага відносних шляхів полягає у їх гнучкості. Наприклад, ви можете розробляти проект локально, а потім скопіювати на "реальний" сервер. Шляхи залишаться без змін.
