Як правильно зберігати зображення (фото) для використання на web сторінках - верстка html

Як вірно зберігати і поліпшити зображення для WEB додатків

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

Оберіть команду меню File - Save for WEB (Файл - Зберегти для Web). На дисплеї з'явиться діалог Save For WEB (Зберегти для Web).

У відчиненому списку зі спливаючої підказкою Optimized file format (Формат оптимізованого файлу) в правій верхній частині діалогу виберіть формат JPEG.

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

У відчиненому списку зі спливаючої підказкою Compression quality (Якість стиснення) або в поле вводу з повзунковим регулятором Quality (Якість) ви зможете обрати якість компресії. Високі (High, Very High) і найбільші (Maximum) значення цього параметра зберігають при стисненні більше колірної інформації, та й роблять файли більшого обсягу.

Переконайтеся, що встановлено прапор Optimized (Оптимізований). Це дозволить отримати найкращу якість квітів і зменшити розмір створюваного файлу. Однак деякі старі браузери не підтримують цю особливість.

Переконайтеся, що встановлено прапор Progressive (Прогресивний).

В поле введення або за допомогою ползункового регулятора Blur (Розмиття) можна вказати ступінь розмиття зображення в межах від 0 до 2.0 для легкого розмиття кордонів колірних областей. Даний параметр завжди слід використовувати стосовно до зображень з глибиною кольору 8 біт на піксель. Для зображень з глибиною кольору 24 біта на піксель потреба в такому згладжуванні невелика. Розумієте виявляється особливо корисним для зображень, що мають величезні ділянки фону однорідної забарвлення. Якщо в зображенні є текст, то величину згладжування необхідно зменшити, по іншому текст буде важко прочитати. Цей параметр зменшує розмір файлу, але в той же час розмиває деталі зображення, діючи подібно до фільтру Gaussian Blur (Розумієте по Гауса). Рекомендується використовувати значення від 0.1 до 0.5.

Установка прапора ICC Profile (Профіль ICC) дозволяє зберегти в файлі профіль ICC, який вживається якимись браузерами для колірної коригування. Даний прапор доступний тільки для зображень, зроблених в форматі Adobe Photoshop.

Якщо початкове зображення містить прозорі області, то в що відкривається переліку Matte (Підкладка) можна обрати колір для імітації кольору фону WEB сторінки, на яку буде поміщено зображення.

Якщо при розробці малюнка на прозорому тлі використовувалося згладжування (Anti-Aliasing), то зображення буде мати світлий німб, який поліпшить якість на світлому тлі, але буде погано виглядати на строкатому. Щоб позбутися від цього німба, слід перед збереженням переводити документ в індексований колір за допомогою команди меню Image - Mode - Indexed Color (Зображення - Режим - Індексовані кольору).

Закрийте діалог Save For WEB (Зберегти для Web), натиснувши кнопку ОК. На дисплеї з'явиться діалог Save Optimized As (Зберегти оптимізований документ як), в поле введення якого Назва файлу (File name) вже позначено ім'я файлу - sea.

Оберіть папку для збереження оптимізованого файлу.

Натисканням кнопки Зберегти (Save) закрийте діалог Save Optimized As (Зберегти оптимізований документ як). Файл буде збережений на диску у зазначеній папці.

Закрийте документ sea.psd, вибравши команду меню File - Close (Файл - Закрити). Якщо з'явиться запит про необхідність збереження документа, дайте відповідь негативно.

Ми познайомилися з принципами оптимізації зображень в програмі Adobe Photoshop.

Додаткова інформація по темі