Оптимізація картинок на сайт для прискорення завантаження сторінки

1. Де брати фото для сайту
2. Який розмір краще
3. Як зробити картинку потрібного розміру
4. Оптимізація картинки онлайн сервісом
5. висновок

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

Для тих, хто хоче скоротити час завантаження і для тих, хто ще не знає, як потрібно оптимізувати картинки - шпаргалка з поясненнями і алгоритмом дій. Використовуємо програми і сервіси - зменшуємо розмір і вага.

Де брати фото для сайту

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

Ідеально, якщо у вас власні фотографії або малюнки. Але такими талантами володіють одиниці, а картинки на сайт потрібні всім. Тому ми, найчастіше, йдемо шукати тематичні ілюстрації для статті в інтернеті.

Хтось бере їх на безкоштовних фотостоках, хтось з Яндекса, хтось користується релевантним пошуком від Гугла, хтось тягне їх з Бурже. Тут кожен вирішуватиме сам, але загальні рекомендації все ж є.

добра порада

Не варто брати зображення з чужими водяними знаками і розміщувати свій ватермарк на тих, що ви запозичили. Це загрожує неприємностями від правовласників. Особливо, якщо це крутий ресурс, який може і до суду подати, і цей суд виграти. Приклади вже є.

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

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

Який розмір краще

Розмір зображень на сайті залежить від шаблону (теми), який в даний момент встановлено. У будь-якому випадку ваша картинка не повинна бути ширше області контенту. Це зламає дизайн сторінки.

Область контентаместо на сторінці, яке передбачено версткою шаблону для тіла статті.

Як визначити ширину контенту на своєму сайті?

Визначити максимальний розмір зображення можна, скориставшись розширенням Лінійка в браузері Хром https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn/related?hl=ru або програмою FSCapture з однієї моєї статті . Якщо у вас ця программулінка не варто - скачайте і встановіть. Вам не доведеться про це шкодувати жодної хвилини.

Досить інструментом «Захоплення прямокутної області» виділити частину сторінки, де розташовується текст, і ви побачите, скільки пікселів по ширині складає в вашому шаблоні область контенту.

Це максимальна ширина картинок. Менше ширину потрібно робити з кількох причин:

1. Велике зображення важко оптимізувати без втрати якості.
2. На мобільних екранах найчіткіше відображаються картинки розміром 500-600 пікселів по ширині.

Якщо вам не потрібно звертати увагу відвідувача на дрібні деталі, то цього розміру цілком достатньо для наочності.

Якщо ж потрібно викласти зображення високої розподільчої здатності (схеми, наприклад), то найкраще скористатися плагінами, які розкриють його в повний розмір з мініатюри. Один з плагінів Lightbox Plus ColorBox (опису та налаштування тут) або Responsive Lightbox.

Другий краще, так як не вимагає налаштувань і відмінно адаптується до мобільних екранів.

Як зробити картинку потрібного розміру

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

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

Алгоритм зменшення розміру картинки в Фотошоп:

1. Файл - Відкрити - вибираємо картинку або фото.
2. Зображення - Розмір зображення - дивимося розмір исходника. Там же змінюємо розмір зображення до необхідного.
   

   Увага!

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

3. Файл - Зберегти як - зберігаємо зображення в форматі JPEG. Цей формат легше такого ж, але в PNG, і дозволяє вказати якість зберігається зображення (якщо у вас не сайт фотографа або художника, то досить якості 6-7) Там же бачимо теперішній вага нашого зображення.

   Увага!

   У світлі останній вимог від Гугла потрібно прагнути до того, щоб картинки на сайті не важили більше 40 кб. Але без фанатизму! Переконайтеся, що на зображенні не з'явилося зернистості і зображення прийнятної якості.

4. Вибираємо якість збереження.

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

Оптимізація картинки онлайн сервісом

На етапі зменшення фото за допомогою фотошоп оптимізація картинки не закінчується. Ми можемо ще полегшити її вага. Існують безліч сервісів, але я користуюся https://tinypng.com/ і він мене цілком влаштовує.

1. Відмінно обробляє формати JPEG і PNG, зберігаючи хорошу якість.
2. Прибирає всі сторонні коди, очищає оптимізовану картинку від сміття.
3. Зберігає ті ж назви, під якими я завантажувала їх в сервіс (не потрібно перейменовувати, прибираючи зайві знаки, присвоєні сервісом).

Алгоритм дій:

Не забувайте після закінчення роботи чистити непотрібні вже файли, інакше у вас накопичиться неймовірну кількість архівів і папок tinified з цифрами.

висновок

Спочатку ми мали фотографію соснового лісу з фотоапарата великого розміру і ваги. Після зменшення розміру по ширині в Фотошоп, ми отримали зображення вагою в 134 кб. Це теж багато для публікації та забере зайві секунди завантаження сторінки.

Після оптимізації в онлайн сервісі ми зменшили фото більше ніж на 40 кб і отримали в результаті картинку 99 кб. Це вже прийнятно, але все ж забагато.

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

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

загострюю увагу

Якщо ваші оптимізовані картинки будуть опубліковані з вагою, що не перевищує 40 кб, сайт від цього тільки виграє. Сторінка швидко завантажиться, користувач не піде з неї, статут чекати. Менше будуть відсоток відмов, а значить і позиції сайту в цілому будуть вище. Пошуковики охочіше будуть пропонувати за запитами саме ваш сайт і ви отримаєте більше відвідувачів.

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