| Порівняння попередніх версій Попередня ревізія Наступна ревізія | Попередня ревізія |
| subjects:basic:informatika:web:stvorennia_zberezhennia_zobrazhen_dlia_veb [05.11.2022 03:50] – Адміністратор | subjects:basic:informatika:web:stvorennia_zberezhennia_zobrazhen_dlia_veb [15.11.2024 08:59] (поточний) – Адміністратор |
|---|
| </col> | </col> |
| </grid> | </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://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]] |
| |
Адміністратор