Оптимізуйте завантаження веб-зображень

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

Причини оптимізації зображень

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

Ніхто не любить чекати завантаження сторінки
Швидкість завантаження є критерієм розташування сайтів у результатах пошуку
Деякі відвідувачі не мають швидкого підключення до Інтернету. Особливо це стосується користувачів Інтернету, які використовують пристрій, що використовує 3G.
Це дозволяє уникнути відлякування відвідувачів та продажів. Дійсно, це не можна заперечувати, час завантаження впливає на відвідувачів:
- Чим довший час завантаження, тим вища швидкість виходу
- На сайті Amazon: 100 мс додаткового часу завантаження втратили 1% продажів
- У Google: додаткові 500 мс зменшують кількість пошукових запитів на 20%
Менше трафіку використовується на веб-хостингу, оскільки сторінки менш важкі

Ніколи не змінюйте розмір коду

Деякі веб-сторінки вирішують використовувати великі зображення (приклад: 800 x 600 пікселів) і вставляти їх на веб-сторінку як ескіз (приклад: 80 x 60 пікселів). Цей метод має два основних недоліки:

Зображення дуже важкі для завантаження, коли потрібно лише відобразити невеликий ескіз
Веб-браузери не є графічним програмним забезпеченням. Зображення, змінене веб-браузером, буде нижчої якості, ніж зображення, змінене за допомогою спеціалізованого програмного забезпечення (приклад: Gimp або Photoshop). На фотографії нижче показано різницю в якості зображення залежно від того, чи його розмір змінено за допомогою Firefox чи Gimp.

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

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

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

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

JPEG - це стандарт, що визначає формат стисненого цифрового зображення. Ступінь стиснення можна вибрати. Чим вище стиснення, тим менше зображення буде важким, але натомість зображення втрачає свою якість. Тоді необхідно вибрати найкращий компроміс між якістю та вагою зображення. Це, зокрема, залежить від типу сайту (веб-сайт фотографа?) І призначення фотографій (проста ілюстративна фотографія чи важлива фотографія?). Зрозуміло, що в більшості випадків JPEG є використовувати для фотографій в Інтернеті.

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

Винятки

Незважаючи на наведені вище поради, бувають випадки, коли фотографія світліша у форматі PNG, ніж у форматі JPEG. Так само для ікони. Тому, щоб по-справжньому оптимізувати вагу зображень, рішення полягає в тому, щоб зберегти зображення в різних форматах, щоб перевірити, яке з них є найсвітлішим.

Стискати зображення

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

Особисто я вибираю якість 85% для своїх зображень JPG, оскільки вважаю, що це хороший компроміс. Щоб піти далі, є дві техніки:

Позначте опцію "зображення для Інтернету" у вашому програмному забезпеченні для редагування зображень
Використовуйте службу стиснення зображень, таку як Smushit, щоб додатково стискати вагу зображень

Спрайт CSS

Техніка Спрайти CSS полягає у використанні одного зображення, що містить кілька інших невеликих зображень, одне над одним, як у прикладі праворуч. Лише за допомогою коду CSS веб-дизайнер вибирає зображення, яке хоче використовувати. Цей прийом, призначений для людей, які знають CSS, дозволяє завантажувати лише одне зображення (швидше). Однак неправильне використання може спричинити проблеми сумісності.

З точки зору CSS, цей прийом полягає у використанні властивості "background-position".

Паралелізуйте навантаження

Порада, зарезервована для веб-розробників, які знають, що роблять, паралелізація завантаження допомагає браузеру запускати кілька завантажень одночасно. Цей прийом дає можливість протистояти протоколу HTTP, який передбачає, що веб-браузери не повинні завантажувати більше 2 файлів одночасно з одного домену. Іншими словами, якщо сторінка має кілька елементів (файли CSS, файли javascript, зображення.), Вони завантажуватимуться один за одним, паралельно максимум 2 елементи. Це нормально, але якщо у користувача швидке з’єднання з Інтернетом, може бути непоганою ідеєю розпочати завантаження більше елементів одночасно. Для цього достатньо обдурити веб-браузер, встановивши зображення (наприклад) на інший субдомен (або інше доменне ім’я).

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

Збільшення використання процесора на робочій станції користувача Інтернету. Тому не рекомендується, якщо відвідувачі мають малопотужні комп’ютери (приклад: телефон, що підключається до Інтернету)
Додайте додаткові туди-назад для кожного нового з'єднання TCP
Пошук DNS може сильно варіюватися залежно від місцезнаходження відвідувача. Якщо сервер знаходиться у Сполучених Штатах, а відвідувачі - у Франції, методика може бути вже не такою корисною.

Прийти до висновку

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