Як виправити повільне завантаження зображень на вашому веб-сайті - 3-кроковий процес
Оновлено: 26 лютого 2019 р //
За останні 5 років розмір середньої веб-сторінки поступово збільшувався, як і розміри використовуваних зображень.
Середній розмір сторінки нещодавно перевищив 3 Мб!
Оптимізація зображень - це найбільший виграш, що стосується швидкості веб-сайту.
Типи форматів зображень
Ось найпопулярніші формати зображень для Інтернету:
JPG (також відомий як JPEG)
JPG - найпопулярніший тип файлів для зображень в Інтернеті. JPG ідеально підходять для фотографій або складних зображень, що містять безліч кольорів, тіней, градієнтів або складних візерунків. JPG добре обробляють такі типи зображень, оскільки JPG мають величезну кольорову палітру для роботи. Вони з втратами, погано діють на місцях з високою контрастністю, на краях.
PNG (портативна мережева графіка)
PNG були створені як заміна GIF-файлів у 1996 році. Вони найкраще підходять для зображень із кількома кольорами. Якщо ви використовуєте Adobe Photoshop, можливо, у вас була можливість зберегти зображення як PNG-8 або PNG-24.
PNG-8 менший за розміром, але він має обмежену колірну палітру в 256 кольорів.
PNG-24 не має обмежень на палітру кольорів, але розмір файлу буде більшим.
PNG часто використовують для логотипів, оскільки логотипи зазвичай вимагають прозорості, і вони повинні бути якісними.
GIF-файли були популярні багато років тому, в основному для анімації. GIF-файли мають обмежену колірну палітру 256, і вони, як правило, більші за розміром.
SVG (масштабована векторна графіка)
Оскільки SVG - це векторна графіка, вони невеликі за розміром і прекрасно відображаються на екрані сітківки. SVG також можна використовувати вбудовано в HTML, що дозволить зберегти HTTP-запит. Їх також можна вставити як звичайні зображення.
Оптимізація зображень
Зменшити фізичний розмір зображення (розмір фотографії)
Ви можете переглянути розміри зображення, відкривши файл у Photoshop і переглянути його на 100%. Або ви також можете клацнути правою кнопкою миші на зображенні Finder (на Mac) і переглянути інформацію:
Він покаже розміри та розмір зображення. На фотографії вище показано, що це зображення було зроблено за допомогою iPhone та має розмір 3264 x 2448. Це занадто велике для веб-сайту. Більшість телефонів і цифрових камер роблять великі фотографії великих розмірів і ваги, і їх потрібно зменшити.
Розмір зображення, що підходить для веб-сайту, залежить від теми, яку ви використовуєте. Наприклад, тема WordPress за замовчуванням двадцять сімнадцять перелічує швидкі характеристики із рекомендованими точними розмірами зображення. Рекомендований розмір Вибраного зображення - 2000 пікселів у ширину та 1200 пікселів у висоту. Ширина основного стовпця (наприклад, для розділу блогу) повинна бути до 740 пікселів в ширину з макетом одного стовпця.