Чому і як оптимізувати свої зображення для SEO
Швидкість завантаження сторінок на веб-сайті стала важливою проблемою в останні роки. Користувачі Інтернету (і мобільні користувачі) хочуть мати можливість переглядати, не чекаючи, і саме тому, що користувачі хочуть швидких веб-сайтів, Google, безумовно, інтегрував цей вимір у свій алгоритм ранжування.
Швидкість завантаження: головна проблема
На початку Інтернету, 20 років тому, сторінки веб-сайтів не повинні бути важкими, враховуючи низьку швидкість з'єднання та поганий браузер. Якщо файли сайту були занадто великими, завантаження його сторінок могло зайняти 15 хвилин (багато з нас відчували це у 2000-х!). Зараз, коли ми перебуваємо в ері високошвидкісних з’єднань, редактори веб-сайтів стали дуже слабкими у відстеженні ваги сторінки, в результаті чого кількість сайтів до 25 МБ на сторінку (правдива історія!) Той факт, що сьогодні ці навантаження мають значення навіть більше, ніж тоді.
Як мати успішний сайт, який швидко завантажується ?
Дуже часто такий тип проблем лякає, тому що вони змушують зателефонувати розробнику, якщо ми не маємо технічних навичок у компанії. Ми часто думаємо, що необхідно оптимізувати роботу сервера та кешування. Однак не всі проблеми із завантаженням сторінок є настільки складними і зрештою вимагають дуже мало технічних знань.
Вага зображень
Вага зображень часто є основною проблемою, що впливає на швидкість завантаження сторінок сайту. Це тому, що кожного разу, коли ми проводимо тестування продуктивності на сайті, зображення майже завжди є великою частиною проблеми. Власники веб-сайтів, здається, забувають, що перед завантаженням зображення потрібно змінити та стиснути. Ми не повинні просто залишати цю роботу компресій на CMS або сервері. Сьогодні ми часто бачимо сторінки з кількома мегабайтами зображень на їх сторінці. Насправді вага сторінки ніколи не повинен перевищувати 1 мегабайт (при великому максимумі), а тим більше дорівнювати кільком мегабайтам, але це часто зустрічається. Насправді багато веб-сайтів перевищують 10 Мб на сторінку. Насправді, коли сайт занадто повільний, завжди виникає проблема з оптимізацією зображень.
Кілька порад щодо оптимізації ваги ваших зображень:
1. Подумайте про розміри екранів
Розмір екрана комп’ютера Full HD становить 1920 × 1080. Розмір "типового" екрану ноутбука становить 1368 × 768. Тому зображення в повну ширину не має підстав бути більшим за 1920x1080px. На практиці це інша справа, що тіло сторінки рідко має ширину більше 1000 пікселів, тому теоретично ваші зображення не повинні перевищувати цього значення. Це залежить від сайтів та їх активності. Але в основному, якщо у вас є електронна комерція в рамках попереднього магазину, уникайте зображень товару розміром 1000 пікселів, які відображатимуться у форматі 200x2OOpx на сторінках вашого списку.
2. Обмежте розмір ваших зображень перед імпортом
Зміна розміру зображень дуже важлива. Наприклад, якщо у вас зображення шириною 2400 пікселів, зменште його розмір, щоб отримати зображення шириною від 600 пікселів до 700 пікселів, що, як правило, більш ніж достатньо. Очевидно, що ваше зображення було в цьому випадку майже в чотири рази більше! Зверніть увагу, що обмежуючи розмір зображень, ви також зменшуєте його вагу.
3. Стисніть свої зображення
Стискання зображень дозволить вам зменшити вагу ваших зображень. Майте на увазі, що існують методи стиснення, які обмежують втрату якості та різкості. Існують також безкоштовні онлайн-рішення, які дозволяють зменшити розмір файлів зображень, наприклад Kraken.io.
4. Виберіть правильний формат: JPG та PNG
JPG використовують так зване стиснення "з втратою". Це означає, що деякі дані назавжди втрачаються при стисненні файлу. Око зазвичай не виявляє втрачені дані, тому у вас виходить менший файл із мінімальним погіршенням стану. PNG використовують так зване стиснення "без втрат". Lossless означає, що при збереженні файлу дані не втрачаються. Зображення перепробовано, але дані з файлу не видаляються. Тож вибирайте ці два типи формату !
5. SEO, мобільність і вага зображення
який базується на синтаксисі медіа-запитів для завантаження іншого зображення залежно від розміру пристрою. Ви зможете визначати зображення, адаптовані до різних типів екрану !