Зображення

В даний час у веб-документах використовуються 3 формату зображень, це jpeg, gif, png. Розглянемо кожен з цих форматів детальніше.

Формат JPEG

Плюси:

• Невеликий розмір файлу
• Підтримує 16 млн. кольорів
• Можна управляти якістю зображення при збереженні

Мінуси:

• При стисненні розмірів втрачається якість
• Не підтримує прозорість

Формат GIF

Плюси:

• Підтримує анімацію
• Підтримує прозорість
• При стисненні не втрачає в якості

Мінуси:

• Кількість кольорів до 256

Формат PNG

Формат PNG в свою чергу поділяється на формати png-8 (аналог формату gif, за винятком того, що png-8 не підтримує анімацію) і png-24. Ще існує формат png-32, але він поки використовується досить рідко і має великий розмір файлу.

PNG - 8

Плюси:

• Підтримує прозорість
• При стисненні не втрачає в якості

Мінуси:

• Кількість кольорів до 256

PNG - 24

Плюси:

• При стисненні не втрачає в якості
• Використовує 16 млн. кольорів
• Плавний перехід від прозорої області до кольорової

Мінуси:

• Великий розмір файлу

З розглянутих сильних і слабких сторонах розглянутих форматів зображень можна зробити висновок. Для збереження фотографій з чіткими краями найкраще підходить формат jpeg, тому що в ньому розмір файлу виходить невеликим. Для анімованих зображень єдиний варіант - це використовувати формат gif, а для збереження якісних зображень, в яких використовується прозорість найкраще підійде формат png-24.

Завантаження зображень на сторінку

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

У тега можна вказати додаткові атрибути.

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

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

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

Завжди зберігайте всі зображення в окремій папці, тоді ви будете знати, де шукати те чи інше зображення