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

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

Що таке погано оптимізоване зображення?

Пояснити поняття оптимізація зображень для Інтернету, Я думаю, що це легше пояснити, коли фотографія погано оптимізована:

  • Коли ми маємо набагато ширшу картину (по ширині чи висоті), ніж місце, де його буде видно.
  • Коли зображення показує деформований в Інтернеті.
  • Коли файл містить набагато більше інформації, ніж потрібно (Чи знали ви, що фотографії містять приховану інформацію, таку як камера або місце, де вони були зроблені?).
  • Коли ми використовуємо формат, який не підходить (подивіться на цю публікацію про JPG та PNG).

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

І вам слід терміново виправити це.

Чому важливо оптимізувати фотографії на вашому веб-сайті?

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

Вага/розмір ...

Погано оптимізоване зображення завжди матиме надмірну вагу та/або розмір відповідно до своїх функцій. І це стосується двох сфер:

  1. Сервер там, де ви розміщуєте Інтернет, буде потрібно більше місця для розміщення ваших непотрібно великих фотографій.
  2. Навігатор з ким відвідуватимуть вас майбутні клієнти, потрібно буде більше працювати, щоб показати фотографії потрібного розміру.

Швидкість завантаження:

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

Досвід користувача:

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

У своєму досвіді веб-розробки я бачив випадки, коли досягалася оптимізація фотографій зменшити вагу зображень на 60% (зменшення деяких їх розмірів на 96%) і покращити час завантаження з мобільних телефонів на 70% якраз із цією зміною.

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

Squoos.app, універсальний інструмент для оптимізації ваших фотографій

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

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

Як ви можете зробити цю оптимізацію? Існує безліч інструментів, таких як Compressor.io або TinyJPG, які дуже прості у використанні. Але якийсь час найбільше в MrKii ми використовуємо Squoss.app.

Squoosh.app - це інструмент, розроблений Google для оптимізації веб-зображень, упакований інструментами та надзвичайно простий у використанні.

Просто треба перетягніть фотографію з комп’ютера, налаштуйте параметри та завантажте оптимізоване зображення. Крім того, ви зможете в прямому ефірі порівняти, як налаштування впливають на якість зображення.

У наведеному вище прикладі ви можете бачити змінний струмпрактичне поєднання із заголовком фотографії цієї статті:

  • Розмір при збереженні з Photoshop: 296 Кб.
  • Розмір після оптимізації за допомогою Squoosh: 76,3 Кб (на 74% менше)

Що ви можете зробити з Squoosh?

Кількість інструментів, якими володіє Squoosh, дуже широка. І якщо я чесний, я думаю, що я не використав навіть 40% від того, що він пропонує.

Крім усього іншого, за допомогою Squoosh ви можете:

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

І для обрізання веб-зображень?

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

У цих випадках, якщо ви не хочете використовувати Photoshop, ви можете потягнути ще один безкоштовний Інтернет-інструмент, такий як imageresize.org:

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

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

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

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

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

Веб-логотип

  • Розмір: він, безумовно, відображається на ширині максимум 250-300 пікселів.
  • Переконайтеся, що у вас його не завантажено до гігантського розміру.
  • Дозвіл: 72ppp, хоча ви можете збільшити його до 300, щоб переконатися, що він виглядає якісно на всіх пристроях.
  • Якість: Грайте в Squoosh до невеликої ваги, не втрачаючи якості.
  • Вага: менше 50 Кб, ідеально, якщо ти отримаєш 20 Кб.

Великі зображення для заголовків або фонів

  • Розмір: 1280 пікселів у ширину (1980 пікселів, якщо фотографія має велику популярність)
  • Дозвіл: 72 dpi.
  • Вага: завжди нижче 100Kb.

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

  • Розмір: 450 - 500 пікселів у ширину, якщо відображається поруч із текстом.
  • Роздільна здатність: 72 dpi
  • Вага: завжди менше 100 Кб

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

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