Розбіжності

Тут показані розбіжності між вибраною ревізією та поточною версією сторінки.

--- subjects:basic:informatika:web:stvorennia_zberezhennia_zobrazhen_dlia_veb [05.11.2022 03:31] – створено Адміністратор
+++ subjects:basic:informatika:web:stvorennia_zberezhennia_zobrazhen_dlia_veb [15.11.2024 08:59] (поточний) – Адміністратор
@@ Рядок 23: / Рядок 23: @@
 На сайті можуть бути розділи, де потрібно використовувати повноширотні зображення, які покривають весь екран зліва направо. Ці області можуть бути повноекранними слайд-шоу, банерними зображеннями. Щоб зображення повної ширини виглядали добре на будь-якому великому чи малому пристрої, рекомендований розмір становить **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]]