• блог

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

Експортуйте зображення для Інтернету

Хоча керування розміром зображення є головним фактором оптимізації його ваги, існують інші порівняно прості варіанти регулювання ваги зображення за допомогою інструменту Adobe Photoshop "Зберегти для Інтернету".

Спочатку ми відкриваємо фотографію, над якою ми зацікавлені, і вибираємо Файл> Зберегти для Інтернету.

Основні деталі для оптимізації зображень у фотошопі

Після того, як ми дамо "Експорт ➡️ Зберегти для Інтернету", з'явиться вікно параметрів, подібне до того, яке ми будемо показувати нижче.

Це може бути дуже лякаючим, оскільки пропонує безліч варіантів і вкладок, але для справи, яка нас цікавить, ми зосередимось виключно на чотирьох елементах:

1. Тип файлу. Ця вкладка дозволяє нам вибирати між JPEG, GIF (на 8 чи 24) та PNG. У цьому конкретному прикладі ми розглянемо випадок JPEG, оскільки він є найпоширенішим, просто пам’ятайте, що GIF-файли використовуються перш за все для збереження невеликих анімацій і що нам доведеться використовувати PNG, якщо ми хочемо, щоб зображення зберігало прозорий фон, який ми підготували у Photoshop.

два. Якість зображення: Ці дві вкладки є частиною магії "Зберегти для Інтернету". Це дозволяє нам вибирати між кількома заздалегідь визначеними якостями на лівій вкладці або числово вибирати праворуч. Чим вища цифра, тим вища якість і важче зображення.

3. Розмір зображення: у цьому вікні опцій ми зможемо надати більший вплив, не втрачаючи якості нашого образу. Зазвичай цей крок зазвичай роблять перед збереженням, використовуючи Image> розмір зображення, але «Зберегти для Інтернету» дає нам другий шанс скоригувати розмір нашого зображення відповідно до розмірів, які нам потрібні. Ми завжди повинні використовувати зображення потрібного розміру для місця, яке ми хочемо, щоб вони займали, не надто великі, оскільки вони важать занадто багато і роблять завантаження нашого веб-сайту занадто повільним, не надто маленьким, оскільки ми втратимо якість.

4. Інформація про файл: тут це дозволяє нам оцінити зміну ваги та розміру нашого оригінального зображення (у верхньому полі, позначеному як "оригінал"). Чотири вкладки безпосередньо над зображеннями дозволяють нам змінити тип візуалізації, у випадку з цим прикладом ми знаходимося в "2 копіях", що дозволяє порівняти оригінальне зображення з його копією, "збереженою в Інтернеті".

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

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

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

Міф про роздільну здатність зображення в Інтернеті

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

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

Традиційно зображення, що використовуються для високоякісного друку, зазвичай використовують роздільну здатність 300 dpi або "пікселів на дюйм", тоді як веб-зображення традиційно використовують роздільну здатність 72 dpi, майже в чотири рази меншу щільність пікселів.

Чому?

Причина настільки ж цікава, як і банальна: ще в 1980 році Apple випустила на продаж свій перший комп’ютер Macintosh з 9-дюймовим екраном та роздільною здатністю 72 dpi, який при роботі з принтерами ImageWriter 144 dpi має лише вдвічі більше з роздільною здатністю було дуже легко масштабувати зображення, що відображаються на моніторі, щоб користувачі могли точно бачити, як виглядатиме те, що вони надсилають на принтер.

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

Але це неправда.

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

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

Тепер давайте подивимося порівняння того самого зображення, але зразком. Це дозволяє комп’ютеру змінювати розміри зображення, щоб підтримувати відношення роздільної здатності до вихідного зображення. Тобто встановіть його на 300 dpi і щоб пікселі мали однакові пропорції. Як бачимо, тут зміна розміру очевидна: з 17,6 МБ, або 18 022,4 КБ до всього 256,7 КБ, майже в сімдесят разів менше.

Але як щодо якості зображень? Подивимось на іншому прикладі: