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

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

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

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

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

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

Зазвичай під час завантаження зображення ми завантажуємо зображення та завантажуємо його безпосередньо до WordPress media Liberia, тоді ми додаємо його до своєї статті чи сторінки і все.

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

Ви погодитесь, що всі ці зображення мають дуже хорошу якість, але, завантаживши їх, ви побачите, що їх середня вага становить від 3 МБ до 5 МБ, насправді фотографія зображення, яку ми використали для цього допису, має вагу 5,3 МБ

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

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

З огляду на це, я збираюся показати, скільки часу знадобиться різним користувачам, щоб завантажити зображення розміром 5,3 МБ з різною швидкістю Інтернету:

Тип підключення Швидкість Інтернету Час очікування
ADSL256 кбіт/с3 хвилини 10 секунд.
ADSL512 кбіт/с1 хвилина 35 секунд
ADSL1 Мбіт/с48 секунд
ADSL2 Мбіт/с24 секунди
ADSL8 Мбіт/с6 секунд
ЛВС10 Мбіт/с4 секунди
ADSL24 Мбіт/с2 секунди

Отже, як бачите, занадто багато часу використовується лише для завантаження зображення, для цього вам слід збільшити вагу файлів JavaScript, CSS, HTML, інших зображень на вашому веб-сайті та інших файлів із зовнішніх служб, які ви можете мати на ваш веб-сайт, такий як бібліотеки шрифтів Google, Analytics, Facebook JS тощо ...

Комбінуючи його, і якщо ми оптимізували свої файли Javascript, CSS та HTML, у нас може вийти вага цих файлів 0,5 МБ, тому ми повинні додати його до облікового запису.

Враховуючи, що середня швидкість Інтернету в Латинській Америці становить 5,6 МБ, а в Іспанії 15,5, тоді відвідувачу Латинської Америки знадобиться 8 секунд, щоб завантажити наш веб-сайт, а в Іспанії 3 секунди.

І більше 85% цього часу - це завантаження зображення, яке ми не оптимізували.

Але в цій статті я вже оптимізував зображення, і в кінці цього процесу зображення цієї статті має вагу 59,3 КБ (0,059 МБ), як ви бачите, це велике зменшення ваги, і це означає веб-сайт із швидшим завантаженням.

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

Зміст

Змініть розмір зображення

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

Наприклад, у моєму випадку всі зображення в блозі мають ширину 640 пікселів і висоту 350 пікселів, тому мені потрібно змінити зображення, щоб мати такі розміри.

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

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

Існує кілька способів зробити цей процес, наприклад, ви можете використовувати Photoshop або Gimp, але ви також можете скористатися онлайн-інструментами, такими як Canva.com, саме таким чином я створив це зображення.

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

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

Лише за цей крок мені вдалося зменшити вагу зображення з 5,3 МБ до 173 КБ (0,17 МБ), зменшившись більше ніж на 94%

Запрошую вас спробувати інструмент Canva і чекати в майбутньому підручника з цього чудового та безкоштовного інструменту 😀

Використовуйте компресор зображень

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

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

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

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

Це не змінює розміри вашого зображення, змінюється лише його вага.

Деякі веб-сайти, які надають вам цю послугу, є такими:

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

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

ShortPixel

інтернету

Це найкращий варіант з нашого досвіду, щодня наша команда виконує від 15 до 20 веб-оптимізацій для наших хостингових клієнтів абсолютно безкоштовно, ми залишаємо веб-сайти завантажуватися приблизно за 1,1 секунди і не більше 1,5 секунд.

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

ShortPixel дозволяє оптимізувати всі ваші зображення у форматі JPG, PNG або GIF, вам потрібно лише завантажувати свої зображення в WordPress, як зазвичай, і плагін оптимізує зображення, не роблячи нічого взагалі.

Оптимізувавши зображення нашої статті за допомогою ShortPixel, ми отримуємо файл вагою 59,3 КБ (0,059 МБ), що означає зменшення на 99% зображення, яке спочатку важило 5,3 МБ.

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

Крім того, він має можливість створити веб-версію ваших зображень. WEBP - це спеціальний формат зображень для Інтернету, цей формат файлу кращий за звичайний JPG або PNG, ви можете отримати додаткові 26% до 35% при оптимізації вашого зображення.

Однак це відносно новий формат файлу, створений Google, і хоча Google Chrome підтримує цей формат, він ще не є стандартним у світі веб-дизайну, тому ви можете використовувати цей формат найближчим часом, але в цьому поки що.

Щоб використовувати ShortPixel, ви повинні встановити плагін з WordPress, і ви повинні створити безкоштовний обліковий запис на веб-сайті ShortPixel, з безкоштовним обліковим записом ви отримуєте кредити на оптимізацію.

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

Відтепер я кажу вам, що єдині платіжні схеми є кращими, ви можете отримати 10000 кредитів лише за 9,99 доларів

EWWW Image Optimizer

Встановивши цей плагін, усі зображення PNG, JPG або GIF, які ви завантажуєте на свій веб-сайт WordPress, будуть автоматично оптимізовані. Він також включає опцію оптимізації всіх зображень у вашій медіатеці.

Однак однією з негативних сторін EWWW Image Optimizer є те, що оптимізація здійснюється на вашому власному веб-сайті, наприклад, у випадку з ShortPixel, оптимізація проводиться в хмарі, на серверах ShortPixel, а потім надсилаються зображення Оптимізовані зображення знову на ваш веб-сайт, таким чином, ваш веб-сайт не завантажується додатковими процесами, а ресурси, які є у вашому розпорядженні, не витрачаються на оптимізацію зображення.

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

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

На момент встановлення ціни кредити на зображення дорожчі за ShortPixel - $ 9,99, який у ShortPixel дає 10000 зображень, в EWWW Image Optimizer - 3330 зображень, так що ShortPixel є кращим варіантом при оплаті за послугу.

WPSmush

Цей плагін є частиною wpmudev.org та його великого переліку плагінів. За допомогою WP Smush ви можете автоматично оптимізувати будь-яке зображення PNG або JPG, яке ви завантажуєте на свій веб-сайт WordPress, крім того, у вас є можливість оптимізувати багато зображень одночасно, однак у безкоштовній версії ви можете оптимізувати лише 50 зображень одночасно.

При використанні WPSmush у вас є два методи оптимізації Lossy та “Super Smush”, але у безкоштовній версії ви можете використовувати лише Lossy, який забезпечує прийнятне стиснення та якість, але в порівнянні з ShortPixel він у середньому зменшується на 20%. кінцева вага зображення.

Є й інші функції, які також платні, такі як перетворення зображень PNG у JPG, що є безкоштовною опцією в ShortPixel.

Вартість WPSmush знаходиться в межах вартості передплати на wpmudev, яка коштує 49 доларів на місяць.

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

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

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

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

Якщо у вас виникли запитання, сміливо залишайте коментарі.