оптимізуйте

Фотографія Джона Кароро.

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

Зображення, присутні на 99% веб-сайтів, є одним із елементів, який найбільше сповільнює час завантаження. І швидка швидкість завантаження має головне значення з двох причин:

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

Що таке оптимізація зображень для Інтернету?

При оптимізації зображень для Інтернету ми враховуємо три властивості файлів:

  • Дозвіл - кількість пікселів на дюйм (dpi) або точок на дюйм (dpi), яку містить зображення.
  • Розмір - розміри зображення - висота на ширину -, виражені в пікселях (px) для Інтернету.
  • Вага - дисковий простір, який займає файл зображення, зазвичай у кілобайтах (кБ).

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

Виберіть правильний формат зображення

Нижче ми розглянемо основні формати зображень для Інтернету та те, для чого використовується кожен із них.

Формат JPEG

Формат JPG або JPEG (Joint Photographic Experts Group) - це метод стиснення, який підтримує кольорові режими CMYK, RGB та градації сірого, але не підтримує прозорі плівки.

JPG зберігає всю інформацію про колір зображення RGB, але стискає розмір файлу шляхом вибіркового відкидання даних.

Високий рівень стиснення забезпечує нижчу якість зображення, а низький рівень стиснення - кращу якість зображення.

JPG - чудовий варіант для відображення великих стиснених зображень та фотографій в Інтернеті.

Формат GIF

Формат GIF (формат графічного обміну) підтримує прозорість та до 256 кольорів як у зображеннях, так і в анімації.

Експорт зображень із більш ніж 256 кольорами у формат GIF спричиняє втрату якості.

Формат GIF - це звичайна опція для відображення анімованих зображень.

Формат PNG

Формат PNG (портативна мережева графіка) складається з двох типів: PNG - 24 і PNG - 8. Обидва формати підтримують прозорі та напівпрозорі плівки.

PNG - 24 забезпечує глибину кольорів у мільйони кольорів, а PNG - 8 підтримує до 256 кольорів.

Формат PNG - хороший вибір для відображення в Інтернеті невеликих зображень (наприклад, піктограм), зображень без фонів, логотипів та зображень, що містять текст.

Формат WebP

Формат WebP, розроблений в даний час Google у відкритому коді, має на меті стати наступним стандартом для графіки з мільйонами кольорів.

Цей формат підтримує прозорі плівки, стиснення з втратами та без втрат, графічну анімацію та значно покращує рівень стиснення у форматах JPG, GIF та PNG.

Але не все добре, деякі веб-браузери мають проблеми з відображенням файлів WebP, і для використання зображення в Інтернеті необхідно використовувати друге резервне зображення.

Інтерес Google до стандартизації формату WebP з метою все більшого і швидшого прискорення завантаження контрастує з пасивністю, яку такі компанії, як Apple, Microsoft або Adobe приймають до формату.

На даний момент Adobe Photoshop не дозволяє експортувати у формат WebP власним способом, для цього необхідно встановити безкоштовний плагін WebPShop.

Формат SVG

Щоб закінчити цей розділ, присвячений форматам, слід зазначити, що формат векторної графіки SVG - це не формат файлу зображення, а формат файлу XML (Extensible Markup Language).

Як оптимізувати зображення для Інтернету за допомогою Adobe Photoshop

У наступних трьох блоках ми розглянемо - крок за кроком - як налаштувати та експортувати файли зображень, оптимізовані для веб-сайтів за допомогою програмного забезпечення Adobe Photoshop.

1. Налаштуйте роздільну здатність зображення

Першою дією, яку ми повинні зробити, є зменшення роздільної здатності наших зображень до мінімально необхідного.

72 dpi - мінімальна роздільна здатність зображення для Інтернету без втрати якості.

Щоб змінити роздільну здатність файлу, ми повинні отримати доступ до параметра Зображення/Розмір зображення у верхньому меню Photoshop або натиснути комбінацію клавіш «Option + Command + I» на Mac.

Шлях до розмірів та роздільної здатності зображення в Adobe Photoshop.

Далі відкривається вікно, в якому ми можемо регулювати як роздільну здатність зображення - за необхідності зменшуючи роздільну здатність до 72 dpi, так і розмір фотографії, на яку ми звертаємось у наступному розділі.

Інформаційне вікно з розмірами та роздільною здатністю зображення в Adobe Photoshop.

2. Пристосуйте розмір зображення до максимального розміру для перегляду в Інтернеті

Професійні веб-сайти пропонують "адаптивний або адаптивний дизайн" до розміру екрана пристроїв, з яких користувачі отримують доступ. А розмір, в якому зображення відображаються на кожному пристрої, залежить лише від дизайну веб-сайту.

Тому зручно налаштовувати розміри (висоту на ширину) зображення до найбільшого розміру дисплея, який він матиме у браузері.

У тому ж вікні попереднього розділу - в якому ми можемо змінити роздільну здатність зображення - ми можемо зменшити розмір зображення до максимального розміру дисплея.

Бажано зберегти функцію «Перепробовувати» в режимі «Автоматично» та скористатися інструментом «Обрізати», якщо вам потрібно зробити те саме із зображенням.

Якщо ви не знаєте розмір дисплея, визначений у веб-дизайні, ви можете отримати доступ до файлу CSS та переглянути його за допомогою FTP або скористатися "інспектором" браузера, щоб дізнатись.

Шлях до інструмента "Інспектор" у браузері Chrome.

3. Експортуйте зображення

В Adobe Photoshop файли зображень потрібно отримати за допомогою опції "Експорт".

Як НЕ отримати оптимізоване зображення у Photoshop

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

Навпаки, при використанні опції "Експорт" усі ці дані усуваються, а розмір отриманого файлу менший.

Параметри експорту зображень, оптимізовані для Інтернету

Шлях "Файл/Експорт" у верхньому меню Photoshop відображає "Параметри експорту" та різні параметри експорту файлів зображень.

Варіанти, пов’язані з оптимізацією веб-зображень:

  • Швидкий експорт як ...
  • Експортувати як ...
  • Експорт налаштувань ...
  • Зберегти для Інтернету (застаріла версія) ...
Шлях до опцій експорту зображення в Adobe Photoshop.

Ми починаємо з перегляду основного варіанту "Експортувати як ...", а потім продовжимо розгляд інших трьох згаданих варіантів.

3.1. Варіант «Експортувати як ...»

Як тільки роздільна здатність (72 dpi) та розміри зображення (висота та ширина, необхідні в пікселях) є достатніми, залишається лише налаштувати параметри експорту, щоб зменшити вагу файлу.

Інформаційне вікно «Експортувати як ...» (див. Нижче) показує попередній перегляд зображення з двома стовпцями, по одному з кожного боку, в яких ми можемо змінити певні властивості, які ми розглядаємо нижче.

Піднятися на все

У лівій колонці ми можемо змінити «Масштаб» зображення. Але попередньо відрегулювавши розмір зображення, доцільно підтримувати масштаб у 1х.

У лівій колонці також відображається поточна вага зображення (нижнє зображення важить 110,5 кБ). Дотримання ваги зображення є важливим, оскільки воно змінюється залежно від нашого вибору формату та інших варіантів експорту.

Інформаційне вікно функції «Експортувати як ...» в Adobe Photoshop.

Налаштування зображення

У правій колонці ми вибираємо формат файлу для експортування зображення та деякі пов’язані з ним властивості у випадках з форматами JPG («Якість») та PNG («Прозорість» та «8-бітний файл»).

Розмір зображення

Цей блок показує розміри зображення та масштаб. Якщо розміри зображення були скориговані до максимального розміру для перегляду в Інтернеті, масштаб повинен підтримувати 100%.

У функції «Resample» o Перепробовування рекомендується вибрати Опція "Автоматичний двокубічний". Цей параметр вибирає відповідний метод бікубічної вибірки для зображення.

Бікубічний варіант - це точний метод передискретизації, який додає пікселі - на основі вивчення значень сусідніх пікселів - для отримання більш плавних тональних градацій.

Розмір полотна

Полотно - це робоча область у Photoshop, до якої ми додаємо шари. Як правило, в процесі експорту розмір полотна не змінюється і відповідає розміру зображення.

Метадані

Додавання чи відсутність метаданих з інформацією про "авторське право та контактну інформацію" залежить від кожного автора.

Більша кількість метаданих створює більший файл; хоча інформаційні метадані зазвичай не займають великого місця у файлі.

Колірний простір

Рекомендація полягає в тому, щоб активувати параметр за умовчанням «Перетворити на sRGB» (стандартний червоний зелений синій), кольоровий простір, який використовується пристроями, які використовують світло для складання кольорів, таких як екрани та монітори комп’ютерів, смартфонів та планшетів.

Таким же чином доцільно активувати опцію «Вбудувати кольоровий профіль». Цей параметр додає лише близько 3 кБ і дозволяє кольоровим профілям, які ми використовували під час редагування, правильно інтерпретувати програмне забезпечення, пристрої та екрани, які отримують наше зображення.

3.2. Варіант «Швидкий експорт як ...»

Параметр "Швидкий експорт" застосовує параметри, вибрані в опції "Параметри експорту".

Ця функція корисна, якщо ви часто використовуєте однакові налаштування для експорту зображень. Отже, коли ви налаштовуєте «Параметри експорту», ​​у вас є попередньо встановлений параметр «Швидкий експорт».

3.3. Варіант «Експортні налаштування ...»

«Експортні налаштування», згадані в попередньому розділі, змінюються шляхом слідування у верхньому меню шляху Файл/Експорт/Експорт Налаштування.

Приклад "Параметри швидкого експорту" для веб-оптимізованих зображень у форматі JPG.

3.4. Варіант «Зберегти для Інтернету (застаріла версія) ...»

Параметр "Зберегти для Інтернету" - із застарілого продукту ImageReady - не буде оновлений новими функціями, і з цієї причини Adobe додала тег "Спадщина".

Вікно інформації про функцію "Зберегти для Інтернету (застаріла версія) ..." в Adobe Photoshop.

Проте ця опція продовжує працювати у Photoshop, і Adobe оголосила, що не буде видаляти опцію "Зберегти для Інтернету", не надаючи цих можливостей у новому та вдосконаленому робочому процесі.

Оптимізуйте зображення для Інтернету, не втрачаючи якості

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

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