Як оптимізувати зображення для сайту в Photoshop. Сайт поліграфіста і web-майстра Сергія

Ви знаходитесь у розділі «Статті по web-дизайну»

Перш за все визначимося, що ж таке оптимізація? Оптимізація - це процес, при якому з файлу видаляється певна частина інформації і за рахунок цього розмір файлу значно зменшується. У сучасному web-дизайні використовуються три формату оптимізованої піксельної графіки - JPEG, GIF і PNG. Який з них використовувати? Критерій досить простий - в якому форматі файл займе менший розмір при найменших візуальних викривлення, в той і слід конвертувати. Для повнокольорових і фотозображень слід застосовувати JPEG, а для простих, особливо з великими площами однотонних заливок краще використовувати GIF. Формат PNG-8 краще ніж GIF справляється з оптимізацією зображень великих і середніх розмірів. Ці особливості пояснюються різними алгоритмами оптимізації в різних форматах.

Формат GIF (Graphics Interchange Format) зберігає зображення з використанням палітри індексованих кольорів - до 256. Іншими словами, GIF використовує оптимізацію за рахунок зменшення кількості кольорів - будь-яке зображення він представить в кольорах, обраних з 16 мільйонів, але кількість яких може бути від 2 до 256. Природно, не кожне зображення можна безболісно «втиснути» в 256 квітів. Звідси висновок - використовувати формат для немногоцветних картинок з різкими межами між квітами. Формат GIF підтримує прозорість і використовує стиснення без втрати інформації.

Формат JPEG (Joint Photographic Experts Group) придатний для збереження повнокольорових зображень з колірною глибиною 24bpp (TrueColor) і використовує стиснення з втратою інформації. Прозорість цим форматом не підтримується і при сильному ступені стиснення з'являється різні артефакти (спотворення, сторонні плями і т.д.).

PNG (Portable Network Graphics) - найновіший з форматів, спроектований для заміни застарілого і більш простого формату GIF. Існує 2 види формату. PNG-8 - використовує індексовані кольори і підтримує градиентную прозорість. Використовує стиснення без втрат і заслуговує найпильнішої уваги. PNG-24 використовується для зберігання повнокольорових зображень. Ступінь стиснення PNG24 менше, ніж у JPEG, зате він використовує стиснення без втрат. У web-дизайні PNG-24 практично не використовується.

У Adobe Photoshop вікно оптимізації Save for Web & Devices викликається комбінацією клавіш (Alt + Ctrl + Shift + S) або в меню File> Save for Web & Devices. З правого боку вікна розташована панель з настройками, яка в залежності від обраного формату приймає різний вигляд. На малюнку показано, як буде виглядати панель при виборі GIF.

Optimized file format (вибір формату)

Color reduction algorithm (алгоритм скорочення квітів)

Dithering algorithm (алгоритм імітації)

Transparency (прозорість)

Interlaced (черезстрочная розгортка)

Color reduction algorithm - алгоритм скорочення квітів (по-іншому називається вибором палітри) визначає, як Photoshop зробить з повнокольорового зображення індексовані. З усіх варіантів нас цікавлять такі:
Perceptual (палітра на сприйняття) - з урахуванням чутливості і сприйняття людського ока;
Selective (вибіркова палітра) - аналогічна першій, але з перевагою квітів web-безпечної палітри (прийнята за замовчуванням, досить близько зберігає вихідні кольору);
Adaptive (адаптивна палітра) - створить колірну таблицю з квітів, що найчастіше зустрічаються в оригінальному документі;
Restrictive (Web-палітра) - перетворює зображення в стандартну таблицю з 216 web-безпечних кольорів.
Custom (замовна) - формує палітру з обраних користувачем квітів.

Dithering algorithm - алгоритм перемішування пікселів (ще називають дизеринг, розсіювання, імітація) дозволить вибрати спосіб імітації додаткових квітів шляхом перемішування існуючих пікселів. Варіанти вибору: No dither - без перемішування, Diffusion - дифузний алгоритм, Pattern - алгоритм на основі заданого зразка і Noise - алгоритм на основі шуму. При оптимізації завжди варто спробувати всі варіанти. Включення цієї опції призводить до збільшення розміру файлу. Пов'язаний зі списком движок Dither регулює інтенсивність перемішування.

Transparency (прозорість) - включення прозорості, розглядається тут .

Interlaced - черезстрочная розгортка. Забезпечить поступове поліпшення (промальовування) зображення в процесі завантаження.

Оптимізація зводиться до вибору відповідного алгоритму скорочення квітів, або як кажуть, вибору палітри і кількості кольорів. Алгоритм вибирається в Color reduction algorithm, а кольори - в списку Colors. Серед всіх палітр найкращою вважається адаптивна. Кількість квітів починати слід з 256 і, поступово зменшуючи, контролювати зміни зображення. Як правило, кількість кольорів в вибирається з ряду: 2, 4, 8, 16, 32, 64, 128, 256.
Незважаючи на те, що GIF підтримує стиснення без втрат, Photoshop дозволяє встановити втрати в цьому форматі. Простіше кажучи, движком Lossy можна ще більше стиснути файл, зменшивши його розмір.

Оптимізація формату PNG8 нічим не відрізняється від GIF (в Optimized file format вибираємо PNG8). Як вже говорилося, PNG8 слід використовувати для зберігання зображень великих розмірів - саме в цьому випадку буде перевага перед JPEG і GIF.

Тепер перейдемо до формату JPEG.

Optimized file format (вибір формату)

Compression quality (Якість стиснення)

Progressive (прогресивний)

Тут все трохи простіше. Compression quality (якість стиснення) - меню, що випадає із заготовленими значеннями якості зображення:
Low - низький
Medium - середнє
High - висока
Maximum - максимальне.
Відповідно до вибору буде змінюватися значення поля Quality від 0 (найнижче) до 100 (найвища). Більш плавно якість можна налаштувати безпосередньо в самому полі, або в постає під ним движку. В поле Blur (розмиття) встановлюється ступінь розмиття картинки. Включення прапорця Progressive дозволить зробити завантаження картинки зручнішою для сприйняття - зображення буде відображатися ще до повного завантаження. При цьому збільшиться розмір файлу.

Залишається додати, що з меню, що випадає Preset можна вибрати готові предустановки для кожного формату. Натискання клавіші Alt призведе до чергової зміни кнопок меню (на малюнку). Reset приведе до скидання всіх налаштувань, а Remember - до запам'ятовування.

З лівого верхнього боку розташовані чотири вкладки, що полегшують процес оптимізації.

Вкладка Original дозволить, як зрозуміло з назви, переглянути оригінал зображення, Optimized - оптимізований варіант. А вкладки 2-Up і 4-Up - двох і чотириблочною варіанти перегляду відповідно, де буде і оригінал, і оптимізовані варіанти. Причому для кожного варіанта можна застосовувати різні настройки.

Посилання на статтю при передруку обов'язкове.