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

Ось зміст із усім, що ви побачите у статті 👇👇 .

Зміст

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

Тут я залишаю вам усі повідомлення, узагальнені у відео.

📺 Відеоурок

✅ Як змінити розмір веб-зображень до ідеального розміру

Першим кроком для оптимізації зображень є їх розмір.

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

Не завантажуйте свої фотографії в «Full HD» з виправданням, що «- Це для того, щоб це добре виглядало».

Ви не створюєте банк зображень для відвідування для завантаження.

Практичний випадок:

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

Припустимо, бічна панель має ширину 250 пікселів.

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

Для з’ясуйте, які розміри використовувати Я рекомендую використовувати Chrome «Element Inspector». На відео я показую вам, як це робиться.

Дізнавшись розміри, ви можете змінити їх розмір за допомогою таких програм, як Фарба, Photoshop або Gimp. У відео я пояснюю, як це зробити за допомогою Photoshop.

🔹 Інструменти для масового зменшення розміру зображень

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

Щоб масово змінювати розмір зображень, я рекомендую деякі з цих інструментів.

JPEG Resizer 2.1

інтернету

JPEG Resizer 2.1 - це безкоштовна програма для Windows, яка не потребує встановлення. Вам просто потрібно запустити його.

Дозволяє змінювати розмір зображень відповідно до:

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

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

Фотографії великого розміру

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

Зміна розміру зображень для Інтернету за допомогою Photoshop

Виконайте такі дії:

Відкрийте фотографію, яку потрібно стиснути, і перейдіть до «Файл» -> «Зберегти для Інтернету»:

Ви побачите наступне вікно.

Тут ви можете зробити кілька речей:

  • Змініть розміри зображення. Я рекомендую зробити це, перш ніж зберігати в Інтернеті.
  • Виберіть формат: jpeg, png або gif.
  • Налаштування якості зображення.

Я рекомендую зберігати зображення в Формат JPEGВ з якістю приблизно 70, і для зображення, які потребують прозорості оскільки логотипи використовують Формат PNG.

🔨 Інструменти для оптимізації зображень в Інтернеті

Їх багато, я згадаю ті, які я вважаю найкращими. При оптимізації зображень за допомогою Інтернет-інструментів ви побачите, що деякі з них працюють краще за інших відповідно до кожного зображення.

🔹 Kraken.io

Я використовую цей інструмент з моменту його відкриття.

  • Стискайте зображення, не втрачаючи якості. Ви можете стискати всі потрібні зображення, якщо розмір файлу не перевищує 1 Мб
  • Ви можете вибрати три формати стиснення та імпортувати фотографії з DropBox, Google Drive та Box.
  • Він має плагін для WordPress
  • Преміум-версія дозволяє змінювати розмір зображень, оптимізувати всі зображення на веб-сайті, просто ввівши його URL-адресу. За їх завантаження та оптимізацію відповідатиме Кракен.

Недоліки:

  • Це не дозволяє вам робити якісь коригування якості, все це автоматично. Хоча це і не потрібно, оскільки отриманий результат цілком непоганий.
  • Розмір зображення не може перевищувати 1 МБ.

🔹 TinyPNG

Переваги цього інструменту:

  • Це безкоштовний інструмент, який дозволяє стискати до 20 зображень одночасно з максимальним розміром 5 Мб на зображення.
  • Стиснення зображень дуже добре, і втрата якості не помітна.
  • Ви можете стискати зображення у форматі PNG, не втрачаючи прозорості.
  • Можна інтегрувати цей інструмент у Photoshop за допомогою розробленого ними плагіна.

Недоліки:

  • Налаштування стиснення відсутні, ви просто завантажуєте та завантажуєте вже оптимізоване зображення.

🔹 Стиснути JPEG

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

Деякі його переваги:

  • Це абсолютно безкоштовно
  • Завантажте до 20 фотографій
  • Стискайте файли у форматі JPG, PNG або навіть PDF.
  • Завантажте стислі зображення окремо або згрупуйте їх у ZIP-файл.
  • Ви можете налаштувати рівень стиснення, який інші інструменти не пропонують.

🔹 PunyPNG

Працює нормально, але обмеження розміру може бути незручним.

Перевага

  • Як і інші інструменти, він дозволяє оптимізувати до 20 файлів одночасно, не втрачаючи якості.
  • Працює з файлами у форматі JPEG, PNG або GIF.
  • Якщо ви підпишетесь, ви отримаєте розширені налаштування стиснення.

Недоліки

  • Не можна завантажувати зображення розміром більше 500 КБ.

Плагіни В WordPress для оптимізації зображень та фотографій

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

🔹 Оптимізатор.io

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

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

🔹 WP Smush

Безкоштовний плагін, який стискає зображення, які ви вже завантажили, на 50 на 50 із безкоштовною версією. Стискайте кожне зображення, завантажуючи їх у WordPress.

🔹 EWWW Image Optimizer

Дозволяє масово оптимізувати всі зображення у вашій бібліотеці «Медіа».

🔹 Стискайте зображення JPEG та PNG

Це версія WordPress Інтернет-інструменту, про яку я згадав раніше. Для того, щоб використовувати його, ви повинні зареєструватися та отримати ключ API.

Ви можете безкоштовно оптимізувати до 500 зображень на місяць. Пропонує хороший взаємозв'язок між стисненням та якістю

🔹 Оптимізатор зображень ShortPixel

Плагін для стиснення файлів у форматах JPEG, PNG, GIF та PDF у WordPress. Максимум 100 зображень на місяць.

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

Він сумісний з WooCommerce, ви можете вибирати між стисненням із втратами та без втрат. Добре працює як на HTTPS, так і на веб-сайтах HTTP.

Im Оптимізатор зображень Kraken

Це плагін для онлайн-інструменту Kraken.io. Це дозволяє оптимізувати фотографії, які вже є у вашій медіатеці, і під час їх завантаження. Безкоштовна версія обмежена 100 Мб на місяць.

Він підтримує файли у форматі JPEG, GIF та PNG з максимальним розміром 32 Мб. Стиснення виконується на їх серверах, тому вам потрібно зареєструватися та отримати ключ API.

Imagify Image Optimizer

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

Він має три рівні стиснення: нормальний, агресивний та ультра. Він сумісний з WooCommerce та галереєю NextGen.

👉 Короткий опис оптимізації зображень

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

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

Ось наступні кроки:

  1. Дізнайтеся, який ідеальний розмір використовувати.
  2. Створіть або змініть розмір зображення з такими розмірами.
  3. Використовуйте будь-який із інструментів стиснення або в Інтернеті, або на робочому столі.
  4. Завантажте зображення на свою сторінку.