Оптимізуйте вагу та розмір зображень для WordPress

Опубліковано 23 січня 2014 року

зображень

Оновлено 4 січня 2019 року

Резюме

  • 1 Навіщо оптимізувати зображення для WEB ?
  • 2 Зменште вагу та розмір зображень за допомогою GIMP
    • 2.1 GIMP
      • 2.1.1 Змінення розміру зображення
      • 2.1.2 Стиснення зображення
  • 3 Як працює бібліотека WordPress
  • Додатково 4 плагіни Wordpress ... та для обробки вже відправлених зображень
    • 4.1 Безглуздість
    • 4.2 WP Smush.it
  • 5 Висновок

Навіщо оптимізувати зображення для WEB ?

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

Три найбільш часто використовувані формати зображень для Інтернету:

- PNG: рекомендований W3C, цей формат керує прозорістю. Однак трохи важкий.

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

- GIF: менше використовується, ніж попередні два, цей формат, проте, підтримує анімацію.

Зменште вагу та розмір зображень за допомогою GIMP

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

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

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

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

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

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

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

Потім натисніть Файл> Експорт, як і раніше у верхньому меню.

  1. Почніть з перейменування зображення
  2. Натисніть Вибрати тип файлу
  3. Переважно вибирайте JPEG (легший), PNG (необхідний для прозорості, але важчий) або GIF для анімованого зображення.
  4. Потім ви можете експортувати PNG у JPEG, що все ще є найкращим способом зменшити вагу зображення PNG, якщо вам не потрібна прозорість.
  5. Клацніть на експорт
  6. Вкажіть максимальний рівень стиснення (9)
  7. Клацніть на Експорт
  8. Ваше оптимізоване зображення збережено, тепер ви можете вставити його у свою статтю за допомогою WordPress

Примітка: Коли ви вирішили експортувати у форматі JPEG, вікно стиснення файлу є вдосконаленим, серед іншого, додавши опцію якісного попереднього перегляду:

Як працює бібліотека WordPress

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

У деяких випадках для вашої теми може знадобитися мініатюра надісланого зображення, особливо для представленого зображення, ескізу тощо. Ось чому WordPress генерує 4 зображення із розмірами, визначеними на вкладці Налаштування> Медіа з вашої інформаційної панелі. Оскільки ескізи вже існують у необхідному форматі, це заважає wordpress змінювати їх розмір на ходу кожного разу, коли сторінка завантажується.

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

Примітка: Якщо розмір зображення, яке ви завантажуєте в бібліотеку WordPress, менший за формат "Великий розмір", визначений у налаштуваннях WordPress, цей формат не буде створений. Надіслані вами зображення не можуть бути збільшені WordPress, якість буде надто поганою. Буде створено лише розміри, менші за оригінал.

Крім того, плагіни WordPress ... та для обробки вже відправлених зображень

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

Увага ! Бажано зробити резервну копію каталогу/wp-content/uploads/перед встановленням наступних плагінів, на випадок, якщо щось піде не так. Деякі дії незворотні без резервного копіювання !

Нерозумність

Плагін WordPress Imsanity дозволяє вам змінити розмір великих зображень максимум до 1024px в ширину. Можливо, ви завантажували зображення із завищеними розмірами, такими як 3000 пікселів у ширину та 2000 пікселів у висоту. Вам просто потрібно встановити максимальний розмір, максимум 1024 пікс. За замовчуванням, і всі ваші зображення, розмір яких перевищує 1024 пікселів, автоматично змінюються та зберігаються однакові назви файлів.

Також безглуздість дозволяє автоматично знижувати якість JPG до бажаного рівня та перетворювати формати BMP у JPG.

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

Однак він не обробляє формати PNG за якістю, лише за розміром. Для обробки форматів PNG вам знадобиться такий плагін:

WP Smush.it

WP Smush.it стискає всі зображення, що вже є в бібліотеці WordPress, а потім автоматично завантажує нові зображення при завантаженні, не втрачаючи якості. Ось як він це робить:

  • Видалення метаданих із файлів JPEG
  • Оптимізація стиснення JPEG
  • Перетворення деяких файлів GIF у PNG
  • Видаліть невикористані кольори

Це означає, що після обробки зображень за допомогою GIMP, WP Smush.it все одно збереже кілька КБ.

Обмеження використання API Yahoo Smush.it:

  1. Зображення має бути менше 1 МБ, інакше воно не буде оброблено. (Немає проблем, коли ви раніше використовували GIMP.)
  2. Зображення має бути доступне за URL-адресою, яка не є HTTPS
  3. Цей плагін не може стискати зображення, що зберігаються на CDN (іншому сервері, ніж той, на якому встановлено WordPress)

Висновок

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