Зменште розмір своїх фотографій у два етапи - Zenu Académie

Оновлено: 22 березня 2020 р

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

Зміст статті

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

Візуальний аспект: вибір зображень та факт застосування необхідної ретуші
Полегшення ваги зображення
Оптимізація для вдосконалення органічного SEO

Сьогодні ми зупинимось на другому кроці.

Навіщо зменшувати розмір своїх фотографій ?

За даними Google, 53% сеансів відмовляються, якщо мобільному сайту потрібно більше 3 секунд для завантаження.

Існує кілька факторів, які можуть уповільнити ваш сайт:

Якість Вашого помешкання
Кількість запитів до вашого сервера
Структура вашого веб-сайту (код)
Вага зображень
І т. Д.

За даними httparchive.org, станом на 1 грудня 2017 року веб-сторінка важила в середньому 3464 КБ. 1826 КБ (53%) було віднесено лише до зображень. Отже, освітлення ваших зображень дозволить вам покращити швидкість завантаження веб-сторінок, навіть якщо ви не зробили жодних технічних удосконалень.

Освітлення ваших зображень - це просте завдання, яке не вимагає знання HTML/CSS або використання Photoshop.

Нагадування про важливі поняття

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

Вага зображень

Файл займає певний простір у місці, де він знаходиться (жорсткий диск, USB-накопичувач, база даних тощо). Цей простір відображає вагу зображення, яке вимірюється в байтах. Нагадуємо:

один байт = 8 біт
1024 байта = 1 кілобайт (КБ)
1024 КБ = 1 Мегабайт (МБ)

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

Перш ніж ви зможете відображати зображення, які ви імпортуєте на своєму веб-сайті, ваші веб-браузери (Internet Explorer, Google Chrome або Firefox) повинні спочатку завантажити зображення. Час завантаження буде різним для кожного користувача Інтернету та залежатиме від якості відповідного Інтернет-з'єднання.

Наприклад, завантаження зображення розміром 20 МБ займе 1 годину 37 хвилин із надзвичайно повільним підключенням до Інтернету (28,8 Кбіт/секунду) порівняно з 2 секундами, якщо користувач відвідує ваш веб-сайт із підключенням 4G.

Джерело: http://www.download-time.com/

Важливий вибір формату

Ось декілька рекомендацій щодо вибору правильного формату для ваших зображень:

Якщо ваше зображення - фотографія без тексту, збережіть його у форматі JPG. Зображення у форматі JPG, як правило, легші за розмір PNG.
Якщо це зображення з текстом або прозорими елементами, тоді було б краще використовувати формат PNG.
Формат GIF ідеально підходить для рухомих зображень та простих зображень.

Освітліть свої зображення, не втрачаючи якості

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

Крок 1: Змініть розмір зображення

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

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

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

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

Крок 2: Стисніть зображення, щоб зробити його ще світлішим

TinyPNG - це веб-сайт, який дозволяє безкоштовно стискати зображення у форматі JPG та PNG. Ви можете імпортувати до 20 зображень одночасно. Кожне зображення має важити максимум 5 МБ, отже, необхідність змінити розмір ваших зображень перед їх стиском.

Демонстрація

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

Я завантажив оригінальне зображення на SplitShire. Він важив 19,5 МБ, мав ширину 5781 пікселів та довжину 3854 пікселів. Для цілей демонстрації я спочатку змінив її розміри на ширину 1024px (висота обчислюється автоматично на основі співвідношення ширини/висоти оригінальної фотографії) і стиснув її до 30%.

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

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

Висловіть свою думку! як користувачі Інтернету, ви б віддали перевагу веб-сайту з приємними великими зображеннями, які відображаються довше, або дуже швидкому сайту із зображеннями нижчої якості?