Методи створення та збереження зображень для веб-сторінок [Wiki Глухівського ВПУ]

Ця сторінка доступна тільки для перегляду. Ви можете продивитися вихідний текст, але не можете змінювати його. Якщо ви вважаєте, що це не вірно, зверніться до адміністратора.
====== Методи створення та збереження зображень для веб-сторінок ======
Завантаження великих зображень (вихідний розмір зображення при ширині 5000 пікселів, неоптимізовані зображення) не лише створить проблеми для відвідувачів, але також вплине на SEO сайту (швидкість завантаження, показник відмов, рейтинг тощо).

Тож розглянемо як підготувати зображення для Інтернету.

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

Збереження зображень із відповідними розмірами та оптимізація зображень для Інтернету може допомогти з кількома речами:

  * **Швидкість** – згідно з дослідженням Google, якщо веб-сторінка завантажується більше ніж за 5 секунд, ймовірність того, що користувач покине цю сторінку, зростає на 90%. Змінюючи розмір і зменшуючи розміри зображень, ви робите сторінки свого веб-сайту швидшими.
  * **Взаємодія з користувачем** – хороша якість, вражаючі зображення допомагають відвідувачам мати більш позитивний досвід під час перегляду вашого веб-сайту. Підтримуючи оптимізацію та швидке завантаження цих зображень, ви забезпечуєте безперервну роботу для своїх відвідувачів, що мотивує їх проводити більше часу на вашому сайті та переглядати вміст сайту.
  * **Рейтинг SEO** – швидкість сайту є фактором ранжирування. Чим швидший ваш сайт, тим кращий потенційний рейтинг ви можете отримати. Веб-сторінки з оптимізованими зображеннями завантажуватимуться набагато швидше як на комп’ютері, так і на мобільних пристроях.
  * **Продажі** – швидший час завантаження та кращий пошуковий пошук можуть допомогти залучити більше користувачів на ваш сайт, що збільшить ваші шанси отримати більше замовлень (для онлайн-магазинів).

<alert type="info">**Примітка**: коли ми говоримо про розмір зображення, ми маємо на увазі розмір зображення в пікселях.</alert>

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

Пам'ятайте, що більшість користувачів переглядають сайт на мобільному пристрої або пристрої середнього розміру 13-15 дюймів.
==== Зображення на всю ширину ====
На сайті можуть бути розділи, де потрібно використовувати повноширотні зображення, які покривають весь екран зліва направо. Ці області можуть бути повноекранними слайд-шоу, банерними зображеннями. Щоб зображення повної ширини виглядали добре на будь-якому великому чи малому пристрої, рекомендований розмір становить **2400x1600 пікселів**. Зауважте, що пристрої мають різні співвідношення сторін, і можливо, ваші зображення будуть обрізані під час перегляду в Інтернеті. Краще робити знімки ширшими, ніж основний вміст, щоб уникнути кадрування важливого вмісту зображення.
{{ :subjects:basic:informatika:web:full-width-image-size-for-flothemes-1024x659.png?nolink }}

==== Оптимізація та збереження зображень для Інтернету ====
Під час оптимізації та збереження зображень для Інтернету слід враховувати кілька речей. Ви повинні визначити, який тип файлу використовувати, JPG, PNG або GIF залежно від мети.

Залежно від мети вам потрібно зберегти зображення в одному з наступних форматів .jpg, .gif або .png. JPG найпоширеніший формат під час збереження зображень для веб-сайту, вони також будуть найменшими за розміром.

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

Наприклад, якщо ви щойно влаштували весілля в стилі ретро в краєзнавчому музеї, позначте зображення local-history-museum-wedding-_0001.jpg, це буде набагато зручнішим для пошукових систем і може забезпечити кращий рейтинг для вашого сайту.

==== Якість стиснення чи розмір ====
Ось приклад того, що може статися, якщо зображення занадто сильно стискається. Перше - використовується дуже низький рівень стиснення, що забезпечує найвищу якість (але більший розмір файлу). Друге - використовується дуже високий ступінь стиснення, що призводить до дуже низької якості зображення (але меншого розміру файлу). <alert type="info">**Примітка.** Оригінальне зображення без змін становить 2,06 МБ.</alert>
<grid>
<col md="6">
<thumbnail>
{{ :subjects:basic:informatika:web:low-compression-high-quality-jpg.jpg?nolink }}
<caption>
//Низьке стиснення (висока якість) JPG – 590 Кб//
</caption>
</thumbnail>
</col>
<col md="6">
<thumbnail>
{{ :subjects:basic:informatika:web:high-compression-low-quality-jpg.jpg?nolink }}
<caption>
//Високе стиснення (низька якість) JPG – 68 Кб//
</caption>
</thumbnail>
</col>
</grid>

Як ви бачите, перше зображення має розмір 590 Кб. Це досить великий розмір для однієї фотографії! Як правило, найкраще, якщо загальна вага веб-сторінки не перевищує 1 або 2 МБ. 590 КБ – це вже четверта частина цього. Друге зображення, очевидно, виглядає жахливо, але тоді воно має лише 68 Кб. Ми хочемо знайти оптимальне співвідношення між рівнем стиснення (якістю) і розміром файлу.

Тож ми знову зробили зображення із середнім ступенем стиснення, і, як ви бачите нижче, якість виглядає добре, а розмір файлу становить 151 КБ, що є прийнятним для фотографії з високою роздільною здатністю. Це майже в 4 рази менше, ніж оригінальне фото з низьким стисненням. Як правило, простіші зображення, такі як PNG, повинні мати розмір менше 100 КБ для найкращої продуктивності.
{{ :subjects:basic:informatika:web:medium-compression-medium-quality-jpg-1.jpg?nolink&640 }}

==== Оптимізація з втратами та без втрат ====
Також важливо розуміти, що можна використовувати два типи стиснення: із втратами (Lossy) та без втрат (Lossless).

**Lossy** – це фільтр, який видаляє частину даних. Це призведе до погіршення якості зображення, тому вам доведеться бути обережними, наскільки зменшити зображення. Розмір файлу можна значно зменшити. Ви можете використовувати такі інструменти, як Adobe Photoshop, Affinity Photo або інші редактори зображень, щоб налаштувати параметри якості зображення. У прикладі, який ми використовували вище, використовується стиснення з втратами.

**Lossless** – це фільтр, який стискає дані. Це не знижує якість, але перед відтворенням зображення потрібно буде розпакувати дані. Ви можете виконати стиснення без втрат на копп'ютері за допомогою таких інструментів, як Photoshop, FileOptimizer або ImageOptim.

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

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

Орієнтовний список програм:
  * Adobe Photoshop
  * Gimp
  * Paint.NET
  * GIFsicle
  * JPEGtran
  * JPEG Mini
  * OptiPNG
  * pngquant
  * FileOptimizer
  * ImageOptim
  * Trimage
  * ImageResize.org

===== Джерела =====
  * [[https://flothemes.com/flothemes-image-sizes/|Best Image Sizes and How to Save Images For the Web (2022)]]
  * [[https://kinsta.com/blog/optimize-images-for-web/|How To Optimize Images for Web and Performance 2022]]