- оптимізація зображень Зображення - ті ресурси, які часто займають багато місця на сторінці і важать...
- Векторні і растрові зображення
- Оптимізація для екранів з високою роздільною здатністю
- Оптимізація векторних зображень
- Оптимізація растрових зображень
- Стиснення з втратами і без втрат
- Вибір формату зображення
- Інструменти і вибір параметрів
- Масштабування переданих зображень
- Список методів оптимізації
- оптимізація зображень
- Видалення і заміна зображень
- Векторні і растрові зображення
- Оптимізація для екранів з високою роздільною здатністю
- Оптимізація векторних зображень
- Оптимізація растрових зображень
- Стиснення з втратами і без втрат
- Вибір формату зображення
- оптимізація зображень
- Видалення і заміна зображень
- Векторні і растрові зображення
- Оптимізація для екранів з високою роздільною здатністю
- Оптимізація векторних зображень
- Оптимізація растрових зображень
- Стиснення з втратами і без втрат
- Вибір формату зображення
- оптимізація зображень
- Видалення і заміна зображень
- Векторні і растрові зображення
- Оптимізація для екранів з високою роздільною здатністю
- Оптимізація векторних зображень
- Оптимізація растрових зображень
- Стиснення з втратами і без втрат
- Вибір формату зображення
- оптимізація зображень
- Видалення і заміна зображень
- Векторні і растрові зображення
- Оптимізація для екранів з високою роздільною здатністю
- Оптимізація векторних зображень
- Оптимізація растрових зображень
- Стиснення з втратами і без втрат
- Вибір формату зображення
- оптимізація зображень
- Видалення і заміна зображень
- Векторні і растрові зображення
- Оптимізація для екранів з високою роздільною здатністю
- Оптимізація векторних зображень
- Оптимізація растрових зображень
- Стиснення з втратами і без втрат
- Вибір формату зображення
- оптимізація зображень
- Видалення і заміна зображень
- Векторні і растрові зображення
- Оптимізація для екранів з високою роздільною здатністю
- Оптимізація векторних зображень
- Оптимізація растрових зображень
- Стиснення з втратами і без втрат
- Вибір формату зображення
- оптимізація зображень
- Видалення і заміна зображень
- Векторні і растрові зображення
- Оптимізація для екранів з високою роздільною здатністю
- Оптимізація векторних зображень
- Оптимізація растрових зображень
- Стиснення з втратами і без втрат
- Вибір формату зображення
- Інструменти і вибір параметрів
- Масштабування переданих зображень
- Список методів оптимізації
оптимізація зображень
Зображення - ті ресурси, які часто займають багато місця на сторінці і важать найбільше. Завдяки їх оптимізації ми можемо значно зменшити кількість завантажуваних даних і поліпшити роботу сайту. Чим більше стисло зображення, тим менше пропускної здатності каналу займає скачування і тим швидше браузер зможе показати сторінку користувачеві.
Оптимізація зображень - це одночасно наука і мистецтво. Ми можемо назвати це мистецтвом, тому що ніхто не може дати певну відповідь, як найкраще стиснути конкретне зображення. Однак це і наука, адже в нашому розпорядженні є розроблені техніки і алгоритми, які можуть значно зменшити розмір ресурсу. Щоб вибрати оптимальні настройки для зображення, необхідно врахувати багато чинників: можливості формату, закодовані дані, якість, кількість пікселів і т. Д.
Видалення і заміна зображень
TL; DR
- Видаліть непотрібні зображення.
- При можливості застосовуйте ефекти CSS3.
- Використовуйте веб-шрифти замість кодування тексту в зображеннях.
Перш за все задайте собі питання: чи дійсно це зображення необхідно? Хороший дизайн повинен бути простим і не погіршувати продуктивність. Найкраще просто видалити непотрібне зображення, оскільки воно важить набагато більше байтів в порівнянні з HTML, CSS, JavaScript і іншими ресурсами на сторінці. При цьому одне зображення в потрібному місці може замінити довгий текст, тому вам потрібно самостійно знайти баланс і прийняти правильне рішення.
Після цього ви повинні перевірити, чи не можна досягти бажаного результату більш ефективним шляхом:
- Завдяки CSS-ефектів (градиентам, тіням і т. Д.) І CSS-анімації ви можете створити ресурси, які чітко виглядають при будь-якому дозволі і масштабі і важать набагато менше, ніж зображення.
- Веб-шрифти дозволяють використовувати красиві написи, зберігаючи можливість вибирати і шукати текст, а також змінювати його розмір. Завдяки цьому робота з вашим ресурсом стане ще зручніше.
Уникайте кодування тексту в зображенні. Красиві написи необхідні для якісного дизайну, просування бренду і зручної роботи з ресурсом, але текст в зображенні тільки заважає всьому цьому. Його не можна вибрати, знайти, збільшити, скопіювати, а також він погано виглядає на пристроях з високою роздільною здатністю. Звичайно, веб-шрифтів також потрібно оптимізація, але вони допоможуть уникнути перерахованих вище проблем. Для відображення тексту завжди вибирайте саме їх.
Векторні і растрові зображення
TL; DR
- Векторний формат відмінно підходить для зображень з геометричних фігур.
- Якість векторних зображень не залежить від масштабу і дозволу.
- Використовуйте растровий формат для складних зображень з безліччю нестандартних форм і деталей.
Якщо ви вирішили, що для досягнення результату вам слід використовувати саме зображення, виберіть для нього відповідний формат:
- В векторної графіки для відображення картинки використовуються лінії, точки і багатокутники.
- В бітових зображеннях індивідуальні значення кожного пікселя в прямокутній сітці кодуються, і на їх основі показується зображення.
У кожного формату є свої переваги і недоліки. Векторний формат ідеально підходить для зображень з простих геометричних фігур (наприклад, логотипів, тексту, значків і т. Д.). Вони залишаються чіткими при будь-якому дозволі і масштабі, тому використовуйте цей формат для великих екранів і ресурсів, які повинні бути показані в різних розмірах.
Однак векторні формати не підходять для складних зображень (наприклад, для фотографій). SVG-розмітки для опису будь-яких форм може стати занадто багато, але отримане зображення все одно буде виглядати нереалістично. В цьому випадку вам варто використовувати растровий формат зображень, наприклад GIF, PNG, JPEG або нові формати JPEG-XR і WebP.
Якість растрових зображень залежить від дозволу і масштабу: при збільшенні воно стає розмитим і розпадається на пікселі. В результаті вам може знадобитися зберегти кілька версій растрового зображення в різних дозволах.
Оптимізація для екранів з високою роздільною здатністю
TL; DR
- На екранах з високою роздільною здатністю один CSS-піксель складається з декількох екранних пікселів.
- У зображеннях високої роздільної здатності пікселів і байтів набагато більше, ніж в звичайних.
- Техніки оптимізації можна застосовувати до зображень будь-якого дозволу.
Говорячи про пікселі, слід розрізняти екранні і CSS-пікселі. CSS-піксель може відповідати одному або декільком екранним. Це зроблено для того, щоб на пристроях з великою кількістю екранних пікселів зображення було більш чітким і деталізованим.
Звичайно, на екранах з високою роздільною DPI (HiDPI) графіка виглядає дуже красиво. Однак, щоб добре виглядати у високій роздільній здатності, наші зображення повинні бути більш деталізованими. Але у нас є рішення: векторні формати ідеально підходять для цього завдання. Вони зберігають чіткість в будь-якому дозволі. Навіть якщо збільшаться витрати на отрисовку дрібних деталей, ми як і раніше використовуємо один незалежний від розміру екрана ресурс.
З іншого боку, з растровими зображеннями виникає набагато більше складнощів, тому що вони кодують дані зображення в кожному пікселі. Таким чином, чим вище число пікселів, тим більше розмір такого ресурсу. Як приклад розглянемо різницю між фотографіями розміром 100х100 CSS-пікселів:
Дозвіл екрану Всього пікселів Розмір файлу без стиснення (4 Б на пікс.) 1x 100 x 100 = 10 000 40 000 Б 2x 100 x 100 x 4 = 40 000 160 000 Б 3x 100 x 100 x 9 = 90 000 360 000 Б
Коли ми вдвічі збільшуємо дозвіл екрана, загальна кількість пікселів зростає відразу в чотири рази: в два рази по вертикалі і в два по горизонталі.
Підведемо підсумок. На екранах з великою роздільною здатністю графіка виглядають дуже привабливо, тому ви зможете створити гарне враження про вашому сайті. Однак для таких екранів потрібні зображення з високою роздільною здатністю. Вибирайте векторні формати, тому що вони чітко виглядають на будь-яких пристроях. Якщо необхідно використовувати растрових зображень, додайте кілька оптимізованих варіантів ресурсу (див. Далі).
Оптимізація векторних зображень
TL; DR
- SVG - це формат зображень на основі XML
- SVG-файли потрібно мініфіціровать для зменшення розміру.
- Стискайте SVG-файли за допомогою GZIP.
Всі сучасні браузери підтримують формат SVG (Scalable Vector Graphics). Це формат зображень на основі XML для двомірної графіки. Розмітку SVG можна вбудувати прямо в сторінку або на зовнішній ресурс. У свою чергу, файл SVG можна створити за допомогою будь-якого ПО для векторного малювання або вручну в текстовому редакторі.
<? Xml version = "1.0" encoding = "utf-8"?> <! - Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In. SVG Version: 6.00 Build 0) -> <svg version = "1.2" baseProfile = "tiny" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http : //www.w3.org/1999/xlink "x =" 0px "y =" 0px "viewBox =" 0 0 612 792 "xml: space =" preserve "> <g id =" XMLID_1 _ "> <g> <circle fill = "red" stroke = "black" stroke-width = "2" stroke-miterlimit = "10" cx = "50" cy = "50" r = "40" /> </ g> </ g > </ svg>
Приклад вище отрісовиваєт просту круглу форму з чорною кордоном і червоним тлом. Вона була експортована з Adobe Illustrator. Легко здогадатися, що вона містить безліч метаданих, наприклад інформацію про шари, коментарі і простору імен XML, які найчастіше не потрібні для отобраденія ресурсу в браузері. В результаті, слід мініфіціровать файли SVG за допомогою інструменту svgo .
Наприклад, svgo зменшує розмір наведеного вище файлу SVG на 58% з 470 до 199 Б. Крім того, оскільки SVG - це формат на основі XML, ми може застосувати стиснення GZIP для зменшення його розміру при передачі. Переконайтеся, що на вашому сервері налаштований стиснення SVG-ресурсів.
Оптимізація растрових зображень
TL; DR
- Растрове зображення - це сітка пікселів.
- У кожному пікселі закодована інформація про колір і прозорості.
- Щоб зменшити розмір зображення, компресори використовують різні методи для зниження кількості бітів на піксель.
Растрове зображення - це просто двомірна сітка окремих пікселів. Наприклад, зображення 100x100 пікселів - це послідовно з 10 000 пікселів. У кожному з пікселів містяться значення RGBA: червоного (R), зеленого (G) і синього (B) каналу, а також альфа-каналу, або каналу прозорості (A).
Браузер встановлює 256 значень (відтінків) для кожного каналу, які в пере рахунку займають 8 бітів на канал (2 ^ 8 = 256) і 4 байта на піксель (4 канали x 8 біт = 32 біта = 4 байта). Таким чином, знаючи розміри сітки, ми легко можемо обчислити розмір файлу:
- Зображення 100 x 100 пікс. складається з 10 000 пікселів
- 10 000 пікс. x 4 Б = 40 000 Б
- 40 000 Б / 1024 = 39 КБ
^
Розмір Пікселі Розмір файлу 100 x 100 10 000 39 КБ 200 x 200 40 000 156 КБ 300 x 300 90 000 351 КБ 500 x 500 250 000 977 КБ 800 x 800 640 000 2500 КБ
Може здатися, що 39 КБ - це зовсім небагато для зображення розміром 100x100 пікселів. Однак при збільшенні розміру файл буде важити набагато більше, і на його скачування доведеться витратити багато часу і ресурсів. Зараз це зображення не стисло. Що можна зробити, щоб зменшити його розмір?
Один з найпростіших способів оптимізації зображення - знизити глибину кольору з 8 бітів на канал, вибравши палітру меншого розміру. Встановивши глибину в 8 бітів на канал, ми отримуємо 256 значень для каналу і 16 777 216 (2563) квітів. Може, варто зменшити палітру до 256 квітів? Тоді нам буде потрібно всього 8 біт для всіх каналів RGB і тільки 2 байта на піксель, а не 4, як раніше. Нам вдалося стиснути зображення в два рази!
Оптимізувавши дані в окремих пікселях, звернемо увагу на сусідні пікселі. Виявляється, колір таких пікселів на багатьох зображеннях, особливо на фотографіях, часто схожий. Завдяки цьому компресор може застосовувати дельта-кодування . Замість збереження окремих значення для кожного пікселя можна вказати тільки різницю між сусідніми пікселями. Якщо вони однакові, то дельта дорівнює нулю, і нам потрібно зберегти всього один біт. Але це ще не все!
Ми часто не помічаємо різниці в деяких відтінках, тому ми можемо оптимізувати зображення, зменшивши або збільшивши палітру для цих квітів. У кожного пікселя в двомірної сітці є кілька сусідів, тому ми можемо вдосконалити дельта-кодування. Сконцентруєтеся нема на безпосередніх сусідів пікселя, а на цілих блоках схожих кольорів і закодуйте їх за допомогою різних налаштувань.
Як ви бачите, оптимізація зображення стає все складніше і цікавіше. На цю тему ведуться наукові та комерційні дослідження, тому що зображення важать багато байтів, і розвивати нові техніки стиснення вигідно. Якщо ви хочете дізнатися більше, прочитайте статтю на Вікіпедії або ознайомтеся з конкретними прикладами в брошурі про техніках стиснення WebP .
Отже, як весь цей складний матеріал допоможе нам оптимізувати зображення? Повторимо: нам не потрібно винаходити нові методи стиснення. Однак нам потрібно знати про ключові аспекти питання: пікселях RGBA, глибині кольору і різних техніках оптимізації. Це необхідно, щоб продовжити розмову про растрових форматах.
Стиснення з втратами і без втрат
TL; DR
- З огляду на особливості людського зору, для зображень можна застосовувати стиснення з втратами.
- Для оптимізації зображення використовується стиснення з втратами і без втрат.
- Різниця в форматах зображень - це відмінності в тому, як і які алгоритми цих стиснень застосовуються для зменшення розміру ресурсу.
- Не існує найкращого формату або настройки якості, які підійшли б для всіх зображень. При поєднанні різних компресорів і ресурсів ми ніколи не отримаємо однаковий результат.
Для певних типів даних, наприклад вихідного коду сторінки або виконуваного файлу, вкрай важливо, щоб компресор не видаляв і не міняв первинну інформацію. Через зниклого або неправильного біта даних може бути повністю спотворено або знищено значення контенту файлу. Однак інші типи даних цілком можна передати в приблизному вигляді.
Через особливості людського зору ми можемо не помітити відсутність будь-якої інформації про кожному пікселі, наприклад ми не побачимо відмінності між деякими відтінками кольору. Тому ми можемо використовувати менше бітів для кодування деяких квітів і завдяки цьому зменшити розмір ресурсу. Таким чином, стандартна оптимізація зображення складається з двох основних етапів:
- Стиснення зображення [з втратами] (http://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями), при якому видаляються деякі дані пікселів.
- Стиснення зображення [без втрат] (http://en.wikipedia.org/wiki/Lossless_compression), при якому дані пікселів стискуються.
Виконувати перший крок необов'язково. Точний алгоритм залежить від певного формату зображення, проте врахуйте, що кожне зображення можна стиснути з втратою даних. Насправді, різниця між форматами зображень, наприклад GIF, PNG, JPEG і т. Д., Складається саме в комбінації різних алгоритмів стиснення даних з втратою і без втрат.
Як найкраще поєднувати стиснення з втратами і без втрат? Це залежить від самого зображення і інших умов, наприклад балансу між розміром файлу та шумами. Щоб отримати чітке деталізоване зображення, ви можете не застосовувати стиснення з втратами. Якщо ж для вас більше важливий розмір файлу, сміливо використовуйте цей метод оптимізації. Єдиного варіанти налаштувань для всіх зображень не існує. Ви самі повинні визначити бажаний результат і прийняти рішення.
При використанні стиснення з втратами, наприклад JPEG, ви зможете вибрати налаштування якості (на кшталт повзунка Зберегти для Web в Adobe Photoshop). Зазвичай це значення від 1 до 100, яке визначає застосування алгоритмів стиснення з втратами і без. Не бійтеся знижувати якість: часто зображення як і раніше добре виглядає, а розмір файлу стає значно менше.
Вибір формату зображення
TL; DR
- Виберіть відповідний стандартний формат: GIF, PNG або JPEG.
- Спробуйте встановити різні настройки для кожного формату (якість, розмір палітри і т. Д.) І виберіть найбільш підходящі.
- Для сучасних клієнтів додайте ресурси в форматах WebP і JPEG XR масштабовані зображення:
- Масштабування зображень - один з найбільш простих і ефективних методів оптимізації.
- Якщо ви використовуєте зображення великого розміру, користувач може завантажувати зайві дані.
- Reduce the number of unnecessary pixels by scaling your images to their display size Знизьте кількість непотрібних пікселів, зменшивши зображення до відображуваного розміру.
Крім алгоритмів стиснення з втратами і без втрат, в форматах зображення підтримуються інші функції, наприклад анімація і канал прозорості (альфа-канал). Таким чином, при виборі відповідного формату вам потрібно врахувати бажаний візуальний ефект і вимоги до сайту або додатком.
Формат Прозорість Анімація Браузер GIF Так Так Всі PNG Так Ні Всі JPEG Ні Ні Все JPEG XR Так Так IE WebP Так Так Chrome, Opera, Android
Існують три стандартних формату зображень: GIF, PNG і JPEG. Крім них деякі браузери підтримують нові формати WebP і JPEG XR, для яких доступно більше стиснення і додаткові можливості. Отже, який формат вибрати?
- Зображення повинно бути анімованим? Тоді вибирайте формат GIF.
- Колірна палітра GIF складається всього з 256 кольорів. Це недостатньо для більшості зображень. Крім того, формат PNG-8 краще стискає зображення з маленькою палітрою. Таким чином, вибирайте GIF, тільки якщо вам потрібно анімація.
- Потрібно зберегти всі дрібні деталі в найвищому дозволі? Використовуйте PNG.
- У форматі PNG не застосовується стиснення з втратою даних, не рахуючи вибору розміру палітри. Завдяки цьому зображення зберігається в найвищій якості, але важить набагато більше, ніж файли інших форматів. Використовуйте цей формат тільки там, де це необхідно.
- Якщо зображення складається з геометричних фігур, конвертуйте його в векторний (SVG-) формат!
- Уникайте тексту в зображеннях. Його не можна вибрати, знайти або збільшити. Якщо текст необхідний для створення дизайну, використовуйте веб-шрифти.
- Ви оптимізуєте фотографію, скріншот або зображення схожого типу? Використовуйте JPEG.
- В JPEG використовується комбінація стиснення з втратами і без втрат для зменшення розміру файлу. Щоб вибрати найкраще поєднання якості і розміру зображення, спробуйте встановити кілька рівнів якості JPEG.
Визначивши відповідний формат і його налаштування для всіх ресурсів, додайте додатковий варіант в WebP і JPEG XR. Це нові формати, які поки не підтримуються у всіх браузерах. Однак з їх допомогою може значно зменшити розмір файлу. Наприклад, WebP стискає зображення на 30% більше, ніж JPEG.
Оскільки WebP and JPEG XR можуть підтримуватися не в усіх браузерах, вам треба додати додаткову логіку в додатку або на сервери, щоб відправляти користувачеві відповідний ресурс.
- Деякі мережі доставки контенту Надаються послуги з оптімізації збережений, в тому чіслі Надання файлів в JPEG XR и WebP.
- Деякі інструменти з відкрітім кодом, например PageSpeed для Apache и Nginx, автоматично віробляють оптімізацію, превращение и доставку відповідніх ресурсов.
- Ви можете Додати Додатковий логіку програми, щоб візначіті клієнт и его підтрімувані формати, а потім Відправити Оптимальний варіант ресурсу.
Зверніть увагу, що якщо ви використовуєте Webview для відтворення контенту в нативное додатку, тоді ви можете повністю управляти клієнтом і використовувати тільки WebP. У додатках Facebook, Google+ і т. Д. Використовуються саме WebP-ресурси, так як вони дійсно підвищують продуктивність. Щоб дізнатися більше про це форматі, подивіться презентацію WebP: Deploying Faster, Smaller, and More Beautiful Images від Google I / O 2013.
Інструменти і вибір параметрів
Немає єдиного ідеального формату, інструменту або алгоритму оптимізації, який би підійшов би для всіх зображень. Щоб отримати найкращий результат, ви повинні вибрати формат і його параметри в залежності від контенту, а також візуальних і технічних вимог.
інструмент Опис gifsicle створює і оптимізує GIF-зображення jpegtran оптимізує JPEG-зображення optipng стискає PNG без втрат pngquant стискає PNG з втратами
Не бійтеся експериментувати з параметрами компресорів. Встановіть різні настройки якості, виберіть відповідний варіант і застосуєте його до інших схожих зображень на сайті. Але пам'ятайте: не всі графічні ресурси потрібно стискати одним і тим же методом!
Масштабування переданих зображень
TL; DR
Розмір зображення - це сума пікселів, помножена на число байтів, використовуваних для кодування кожного пікселя. Оптимізація зображення зводиться до зменшення цих двох складових.
Таким чином, один з найбільш простих і ефективних методів оптимізації - переконатися, що розмір відправляється зображення не більше, ніж його відображається розмір в браузері. Нічого складного, але багато сайтів роблять серйозну помилку. Вони розміщують великі ресурси, і браузеру доводиться самому масштабувати і відображати їх в більш низькій роздільній здатності. Крім усього іншого, це збільшує навантаження на процесор користувача.
Відправляючи зайві пікселі і надаючи браузеру самому масштабувати ресурс, ми втрачаємо можливість оптимізувати кількість байтів, потрібних для відтворення сторінки. Зверніть увагу, що при масштабуванні не тільки зменшується кількість пікселів, але і змінюється вихідний розмір зображення.
Початковий розмір відображається розмір Непотрібні пікселі 110 x 110 100 x 100 110 x 110 - 100 x 100 = 2100 410 x 410 400 x 400 410 x 410 - 400 x 400 = 8100 810 x 810 800 x 800 810 x 810 - 800 x 800 = 16100
Зверніть увагу, що у всіх трьох випадках відображається розмір всього лише на 10 пікселів менше, ніж вихідний. Однак чим більше початковий розмір зображення, тим більше зайвих даних доводиться кодувати і відправляти. Навіть якщо вам не вдасться встановити повний збіг вихідного і відображуваного розмірів, ви повинні максимально скоротити кількість непотрібних пікселів.
Список методів оптимізації
Оптимізація зображень - це одночасно наука і мистецтво. Ми можемо назвати це мистецтвом, тому що ніхто не може дати певну відповідь, як найкраще стиснути конкретне зображення. Однак це і наука, адже в нашому розпорядженні є розроблені техніки і алгоритми, які можуть значно зменшити розмір ресурсу.
Пам'ятайте про деякі радах і техніках, які допоможуть вам оптимізувати зображення:
- Вибирайте зображення в векторних форматах. Їх якість не залежить від дозволу і масштабу, тому вони підходять для великих екранів і різних типів пристроїв.
- Мініфіціруйте і стискайте SVG-ресурси. Багато графічні додатки додають XML-розмітку, яка часто містить непотрібні метадані. Її можна видалити. Переконайтеся, що на серверах налаштоване GZIP-стиснення для SVG-ресурсів.
- Вибирайте найбільш підходящі растрових форматів. Визначте необхідні вимоги до зображень і виберіть потрібний формат для кожного ресурсу.
- Пробуйте різні настройки якостей для растрових форматів. Не бійтеся знижувати якість: часто зображення як і раніше добре виглядає, а розмір файлу стає значно менше.
- Видаляйте непотрібні метадані. Багато растрові зображення містять зайву інформацію про ресурс: годинне, відомості про камеру і т. Д. Для їх видалення використовуйте відповідні інструменти.
- Масштабуйте зображення. Зменшуйте файли на сервері, щоб вихідний і відображається розміри були практично однакові. Зверніть особливу увагу на великі зображення. Якщо їх масштабує браузер, продуктивність вашого сайту значно знижується.
- Автоматизуйте. Використовуйте надійні інструменти і ПО, які будуть автоматично оптимізувати зображення на вашому сайті.
оптимізація зображень
Зображення - ті ресурси, які часто займають багато місця на сторінці і важать найбільше. Завдяки їх оптимізації ми можемо значно зменшити кількість завантажуваних даних і поліпшити роботу сайту. Чим більше стисло зображення, тим менше пропускної здатності каналу займає скачування і тим швидше браузер зможе показати сторінку користувачеві.
Оптимізація зображень - це одночасно наука і мистецтво. Ми можемо назвати це мистецтвом, тому що ніхто не може дати певну відповідь, як найкраще стиснути конкретне зображення. Однак це і наука, адже в нашому розпорядженні є розроблені техніки і алгоритми, які можуть значно зменшити розмір ресурсу. Щоб вибрати оптимальні настройки для зображення, необхідно врахувати багато чинників: можливості формату, закодовані дані, якість, кількість пікселів і т. Д.
Видалення і заміна зображень
TL; DR
- Видаліть непотрібні зображення.
- При можливості застосовуйте ефекти CSS3.
- Використовуйте веб-шрифти замість кодування тексту в зображеннях.
Перш за все задайте собі питання: чи дійсно це зображення необхідно? Хороший дизайн повинен бути простим і не погіршувати продуктивність. Найкраще просто видалити непотрібне зображення, оскільки воно важить набагато більше байтів в порівнянні з HTML, CSS, JavaScript і іншими ресурсами на сторінці. При цьому одне зображення в потрібному місці може замінити довгий текст, тому вам потрібно самостійно знайти баланс і прийняти правильне рішення.
Після цього ви повинні перевірити, чи не можна досягти бажаного результату більш ефективним шляхом:
- Завдяки CSS-ефектів (градиентам, тіням і т. Д.) І CSS-анімації ви можете створити ресурси, які чітко виглядають при будь-якому дозволі і масштабі і важать набагато менше, ніж зображення.
- Веб-шрифти дозволяють використовувати красиві написи, зберігаючи можливість вибирати і шукати текст, а також змінювати його розмір. Завдяки цьому робота з вашим ресурсом стане ще зручніше.
Уникайте кодування тексту в зображенні. Красиві написи необхідні для якісного дизайну, просування бренду і зручної роботи з ресурсом, але текст в зображенні тільки заважає всьому цьому. Його не можна вибрати, знайти, збільшити, скопіювати, а також він погано виглядає на пристроях з високою роздільною здатністю. Звичайно, веб-шрифтів також потрібно оптимізація, але вони допоможуть уникнути перерахованих вище проблем. Для відображення тексту завжди вибирайте саме їх.
Векторні і растрові зображення
TL; DR
- Векторний формат відмінно підходить для зображень з геометричних фігур.
- Якість векторних зображень не залежить від масштабу і дозволу.
- Використовуйте растровий формат для складних зображень з безліччю нестандартних форм і деталей.
Якщо ви вирішили, що для досягнення результату вам слід використовувати саме зображення, виберіть для нього відповідний формат:
- В векторної графіки для відображення картинки використовуються лінії, точки і багатокутники.
- В бітових зображеннях індивідуальні значення кожного пікселя в прямокутній сітці кодуються, і на їх основі показується зображення.
У кожного формату є свої переваги і недоліки. Векторний формат ідеально підходить для зображень з простих геометричних фігур (наприклад, логотипів, тексту, значків і т. Д.). Вони залишаються чіткими при будь-якому дозволі і масштабі, тому використовуйте цей формат для великих екранів і ресурсів, які повинні бути показані в різних розмірах.
Однак векторні формати не підходять для складних зображень (наприклад, для фотографій). SVG-розмітки для опису будь-яких форм може стати занадто багато, але отримане зображення все одно буде виглядати нереалістично. В цьому випадку вам варто використовувати растровий формат зображень, наприклад GIF, PNG, JPEG або нові формати JPEG-XR і WebP.
Якість растрових зображень залежить від дозволу і масштабу: при збільшенні воно стає розмитим і розпадається на пікселі. В результаті вам може знадобитися зберегти кілька версій растрового зображення в різних дозволах.
Оптимізація для екранів з високою роздільною здатністю
TL; DR
- На екранах з високою роздільною здатністю один CSS-піксель складається з декількох екранних пікселів.
- У зображеннях високої роздільної здатності пікселів і байтів набагато більше, ніж в звичайних.
- Техніки оптимізації можна застосовувати до зображень будь-якого дозволу.
Говорячи про пікселі, слід розрізняти екранні і CSS-пікселі. CSS-піксель може відповідати одному або декільком екранним. Це зроблено для того, щоб на пристроях з великою кількістю екранних пікселів зображення було більш чітким і деталізованим.
Звичайно, на екранах з високою роздільною DPI (HiDPI) графіка виглядає дуже красиво. Однак, щоб добре виглядати у високій роздільній здатності, наші зображення повинні бути більш деталізованими. Але у нас є рішення: векторні формати ідеально підходять для цього завдання. Вони зберігають чіткість в будь-якому дозволі. Навіть якщо збільшаться витрати на отрисовку дрібних деталей, ми як і раніше використовуємо один незалежний від розміру екрана ресурс.
З іншого боку, з растровими зображеннями виникає набагато більше складнощів, тому що вони кодують дані зображення в кожному пікселі. Таким чином, чим вище число пікселів, тим більше розмір такого ресурсу. Як приклад розглянемо різницю між фотографіями розміром 100х100 CSS-пікселів:
Дозвіл екрану Всього пікселів Розмір файлу без стиснення (4 Б на пікс.) 1x 100 x 100 = 10 000 40 000 Б 2x 100 x 100 x 4 = 40 000 160 000 Б 3x 100 x 100 x 9 = 90 000 360 000 Б
Коли ми вдвічі збільшуємо дозвіл екрана, загальна кількість пікселів зростає відразу в чотири рази: в два рази по вертикалі і в два по горизонталі.
Підведемо підсумок. На екранах з великою роздільною здатністю графіка виглядають дуже привабливо, тому ви зможете створити гарне враження про вашому сайті. Однак для таких екранів потрібні зображення з високою роздільною здатністю. Вибирайте векторні формати, тому що вони чітко виглядають на будь-яких пристроях. Якщо необхідно використовувати растрових зображень, додайте кілька оптимізованих варіантів ресурсу (див. Далі).
Оптимізація векторних зображень
TL; DR
- SVG - це формат зображень на основі XML
- SVG-файли потрібно мініфіціровать для зменшення розміру.
- Стискайте SVG-файли за допомогою GZIP.
Всі сучасні браузери підтримують формат SVG (Scalable Vector Graphics). Це формат зображень на основі XML для двомірної графіки. Розмітку SVG можна вбудувати прямо в сторінку або на зовнішній ресурс. У свою чергу, файл SVG можна створити за допомогою будь-якого ПО для векторного малювання або вручну в текстовому редакторі.
<? Xml version = "1.0" encoding = "utf-8"?> <! - Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In. SVG Version: 6.00 Build 0) -> <svg version = "1.2" baseProfile = "tiny" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http : //www.w3.org/1999/xlink "x =" 0px "y =" 0px "viewBox =" 0 0 612 792 "xml: space =" preserve "> <g id =" XMLID_1 _ "> <g> <circle fill = "red" stroke = "black" stroke-width = "2" stroke-miterlimit = "10" cx = "50" cy = "50" r = "40" /> </ g> </ g > </ svg>
Приклад вище отрісовиваєт просту круглу форму з чорною кордоном і червоним тлом. Вона була експортована з Adobe Illustrator. Легко здогадатися, що вона містить безліч метаданих, наприклад інформацію про шари, коментарі і простору імен XML, які найчастіше не потрібні для отобраденія ресурсу в браузері. В результаті, слід мініфіціровать файли SVG за допомогою інструменту svgo .
Наприклад, svgo зменшує розмір наведеного вище файлу SVG на 58% з 470 до 199 Б. Крім того, оскільки SVG - це формат на основі XML, ми може застосувати стиснення GZIP для зменшення його розміру при передачі. Переконайтеся, що на вашому сервері налаштований стиснення SVG-ресурсів.
Оптимізація растрових зображень
TL; DR
- Растрове зображення - це сітка пікселів.
- У кожному пікселі закодована інформація про колір і прозорості.
- Щоб зменшити розмір зображення, компресори використовують різні методи для зниження кількості бітів на піксель.
Растрове зображення - це просто двомірна сітка окремих пікселів. Наприклад, зображення 100x100 пікселів - це послідовно з 10 000 пікселів. У кожному з пікселів містяться значення RGBA: червоного (R), зеленого (G) і синього (B) каналу, а також альфа-каналу, або каналу прозорості (A).
Браузер встановлює 256 значень (відтінків) для кожного каналу, які в пере рахунку займають 8 бітів на канал (2 ^ 8 = 256) і 4 байта на піксель (4 канали x 8 біт = 32 біта = 4 байта). Таким чином, знаючи розміри сітки, ми легко можемо обчислити розмір файлу:
- Зображення 100 x 100 пікс. складається з 10 000 пікселів
- 10 000 пікс. x 4 Б = 40 000 Б
- 40 000 Б / тисячі двадцять чотири = 39 КБ
^
Розмір Пікселі Розмір файлу 100 x 100 10 000 39 КБ 200 x 200 40 000 156 КБ 300 x 300 90 000 351 КБ 500 x 500 250 000 977 КБ 800 x 800 640 000 2500 КБ
Може здатися, що 39 КБ - це зовсім небагато для зображення розміром 100x100 пікселів. Однак при збільшенні розміру файл буде важити набагато більше, і на його скачування доведеться витратити багато часу і ресурсів. Зараз це зображення не стисло. Що можна зробити, щоб зменшити його розмір?
Один з найпростіших способів оптимізації зображення - знизити глибину кольору з 8 бітів на канал, вибравши палітру меншого розміру. Встановивши глибину в 8 бітів на канал, ми отримуємо 256 значень для каналу і 16 777 216 (2563) квітів. Може, варто зменшити палітру до 256 квітів? Тоді нам буде потрібно всього 8 біт для всіх каналів RGB і тільки 2 байта на піксель, а не 4, як раніше. Нам вдалося стиснути зображення в два рази!
Оптимізувавши дані в окремих пікселях, звернемо увагу на сусідні пікселі. Виявляється, колір таких пікселів на багатьох зображеннях, особливо на фотографіях, часто схожий. Завдяки цьому компресор може застосовувати дельта-кодування . Замість збереження окремих значення для кожного пікселя можна вказати тільки різницю між сусідніми пікселями. Якщо вони однакові, то дельта дорівнює нулю, і нам потрібно зберегти всього один біт. Але це ще не все!
Ми часто не помічаємо різниці в деяких відтінках, тому ми можемо оптимізувати зображення, зменшивши або збільшивши палітру для цих квітів. У кожного пікселя в двомірної сітці є кілька сусідів, тому ми можемо вдосконалити дельта-кодування. Сконцентруєтеся нема на безпосередніх сусідів пікселя, а на цілих блоках схожих кольорів і закодуйте їх за допомогою різних налаштувань.
Як ви бачите, оптимізація зображення стає все складніше і цікавіше. На цю тему ведуться наукові та комерційні дослідження, тому що зображення важать багато байтів, і розвивати нові техніки стиснення вигідно. Якщо ви хочете дізнатися більше, прочитайте статтю на Вікіпедії або ознайомтеся з конкретними прикладами в брошурі про техніках стиснення WebP .
Отже, як весь цей складний матеріал допоможе нам оптимізувати зображення? Повторимо: нам не потрібно винаходити нові методи стиснення. Однак нам потрібно знати про ключові аспекти питання: пікселях RGBA, глибині кольору і різних техніках оптимізації. Це необхідно, щоб продовжити розмову про растрових форматах.
Стиснення з втратами і без втрат
TL; DR
- З огляду на особливості людського зору, для зображень можна застосовувати стиснення з втратами.
- Для оптимізації зображення використовується стиснення з втратами і без втрат.
- Різниця в форматах зображень - це відмінності в тому, як і які алгоритми цих стиснень застосовуються для зменшення розміру ресурсу.
- Не існує найкращого формату або настройки якості, які підійшли б для всіх зображень. При поєднанні різних компресорів і ресурсів ми ніколи не отримаємо однаковий результат.
Для певних типів даних, наприклад вихідного коду сторінки або виконуваного файлу, вкрай важливо, щоб компресор не видаляв і не міняв первинну інформацію. Через зниклого або неправильного біта даних може бути повністю спотворено або знищено значення контенту файлу. Однак інші типи даних цілком можна передати в приблизному вигляді.
Через особливості людського зору ми можемо не помітити відсутність будь-якої інформації про кожному пікселі, наприклад ми не побачимо відмінності між деякими відтінками кольору. Тому ми можемо використовувати менше бітів для кодування деяких квітів і завдяки цьому зменшити розмір ресурсу. Таким чином, стандартна оптимізація зображення складається з двох основних етапів:
- Стиснення зображення [з втратами] (http://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями), при якому видаляються деякі дані пікселів.
- Стиснення зображення [без втрат] (http://en.wikipedia.org/wiki/Lossless_compression), при якому дані пікселів стискуються.
Виконувати перший крок необов'язково. Точний алгоритм залежить від певного формату зображення, проте врахуйте, що кожне зображення можна стиснути з втратою даних. Насправді, різниця між форматами зображень, наприклад GIF, PNG, JPEG і т. Д., Складається саме в комбінації різних алгоритмів стиснення даних з втратою і без втрат.
Як найкраще поєднувати стиснення з втратами і без втрат? Це залежить від самого зображення і інших умов, наприклад балансу між розміром файлу та шумами. Щоб отримати чітке деталізоване зображення, ви можете не застосовувати стиснення з втратами. Якщо ж для вас більше важливий розмір файлу, сміливо використовуйте цей метод оптимізації. Єдиного варіанти налаштувань для всіх зображень не існує. Ви самі повинні визначити бажаний результат і прийняти рішення.
При використанні стиснення з втратами, наприклад JPEG, ви зможете вибрати налаштування якості (на кшталт повзунка Зберегти для Web в Adobe Photoshop). Зазвичай це значення від 1 до 100, яке визначає застосування алгоритмів стиснення з втратами і без. Не бійтеся знижувати якість: часто зображення як і раніше добре виглядає, а розмір файлу стає значно менше.
Вибір формату зображення
TL; DR
- Виберіть відповідний стандартний формат: GIF, PNG або JPEG.
- Спробуйте встановити різні настройки для кожного формату (якість, розмір палітри і т. Д.) І виберіть найбільш підходящі.
- Для сучасних клієнтів додайте ресурси в форматах WebP і JPEG XR масштабовані зображення:
- Масштабування зображень - один з найбільш простих і ефективних методів оптимізації.
- Якщо ви використовуєте зображення великого розміру, користувач може завантажувати зайві дані.
- Reduce the number of unnecessary pixels by scaling your images to their display size Знизьте кількість непотрібних пікселів, зменшивши зображення до відображуваного розміру.
Крім алгоритмів стиснення з втратами і без втрат, в форматах зображення підтримуються інші функції, наприклад анімація і канал прозорості (альфа-канал). Таким чином, при виборі відповідного формату вам потрібно врахувати бажаний візуальний ефект і вимоги до сайту або додатком.
Формат Прозорість Анімація Браузер GIF Так Так Всі PNG Так Ні Всі JPEG Ні Ні Все JPEG XR Так Так IE WebP Так Так Chrome, Opera, Android
Існують три стандартних формату зображень: GIF, PNG і JPEG. Крім них деякі браузери підтримують нові формати WebP і JPEG XR, для яких доступно більше стиснення і додаткові можливості. Отже, який формат вибрати?
- Зображення повинно бути анімованим? Тоді вибирайте формат GIF.
- Колірна палітра GIF складається всього з 256 кольорів. Це недостатньо для більшості зображень. Крім того, формат PNG-8 краще стискає зображення з маленькою палітрою. Таким чином, вибирайте GIF, тільки якщо вам потрібно анімація.
- Потрібно зберегти всі дрібні деталі в найвищому дозволі? Використовуйте PNG.
- У форматі PNG не застосовується стиснення з втратою даних, не рахуючи вибору розміру палітри. Завдяки цьому зображення зберігається в найвищій якості, але важить набагато більше, ніж файли інших форматів. Використовуйте цей формат тільки там, де це необхідно.
- Якщо зображення складається з геометричних фігур, конвертуйте його в векторний (SVG-) формат!
- Уникайте тексту в зображеннях. Його не можна вибрати, знайти або збільшити. Якщо текст необхідний для створення дизайну, використовуйте веб-шрифти.
- Ви оптимізуєте фотографію, скріншот або зображення схожого типу? Використовуйте JPEG.
- В JPEG використовується комбінація стиснення з втратами і без втрат для зменшення розміру файлу. Щоб вибрати найкраще поєднання якості і розміру зображення, спробуйте встановити кілька рівнів якості JPEG.
Визначивши відповідний формат і його налаштування для всіх ресурсів, додайте додатковий варіант в WebP і JPEG XR. Це нові формати, які поки не підтримуються у всіх браузерах. Однак з їх допомогою може значно зменшити розмір файлу. Наприклад, WebP стискає зображення на 30% більше, ніж JPEG.
Оскільки WebP and JPEG XR можуть підтримуватися не в усіх браузерах, вам треба додати додаткову логіку в додатку або на сервери, щоб відправляти користувачеві відповідний ресурс.
оптимізація зображень
Зображення - ті ресурси, які часто займають багато місця на сторінці і важать найбільше. Завдяки їх оптимізації ми можемо значно зменшити кількість завантажуваних даних і поліпшити роботу сайту. Чим більше стисло зображення, тим менше пропускної здатності каналу займає скачування і тим швидше браузер зможе показати сторінку користувачеві.
Оптимізація зображень - це одночасно наука і мистецтво. Ми можемо назвати це мистецтвом, тому що ніхто не може дати певну відповідь, як найкраще стиснути конкретне зображення. Однак це і наука, адже в нашому розпорядженні є розроблені техніки і алгоритми, які можуть значно зменшити розмір ресурсу. Щоб вибрати оптимальні настройки для зображення, необхідно врахувати багато чинників: можливості формату, закодовані дані, якість, кількість пікселів і т. Д.
Видалення і заміна зображень
TL; DR
- Видаліть непотрібні зображення.
- При можливості застосовуйте ефекти CSS3.
- Використовуйте веб-шрифти замість кодування тексту в зображеннях.
Перш за все задайте собі питання: чи дійсно це зображення необхідно? Хороший дизайн повинен бути простим і не погіршувати продуктивність. Найкраще просто видалити непотрібне зображення, оскільки воно важить набагато більше байтів в порівнянні з HTML, CSS, JavaScript і іншими ресурсами на сторінці. При цьому одне зображення в потрібному місці може замінити довгий текст, тому вам потрібно самостійно знайти баланс і прийняти правильне рішення.
Після цього ви повинні перевірити, чи не можна досягти бажаного результату більш ефективним шляхом:
- Завдяки CSS-ефектів (градиентам, тіням і т. Д.) І CSS-анімації ви можете створити ресурси, які чітко виглядають при будь-якому дозволі і масштабі і важать набагато менше, ніж зображення.
- Веб-шрифти дозволяють використовувати красиві написи, зберігаючи можливість вибирати і шукати текст, а також змінювати його розмір. Завдяки цьому робота з вашим ресурсом стане ще зручніше.
Уникайте кодування тексту в зображенні. Красиві написи необхідні для якісного дизайну, просування бренду і зручної роботи з ресурсом, але текст в зображенні тільки заважає всьому цьому. Його не можна вибрати, знайти, збільшити, скопіювати, а також він погано виглядає на пристроях з високою роздільною здатністю. Звичайно, веб-шрифтів також потрібно оптимізація, але вони допоможуть уникнути перерахованих вище проблем. Для відображення тексту завжди вибирайте саме їх.
Векторні і растрові зображення
TL; DR
- Векторний формат відмінно підходить для зображень з геометричних фігур.
- Якість векторних зображень не залежить від масштабу і дозволу.
- Використовуйте растровий формат для складних зображень з безліччю нестандартних форм і деталей.
Якщо ви вирішили, що для досягнення результату вам слід використовувати саме зображення, виберіть для нього відповідний формат:
- В векторної графіки для відображення картинки використовуються лінії, точки і багатокутники.
- В бітових зображеннях індивідуальні значення кожного пікселя в прямокутній сітці кодуються, і на їх основі показується зображення.
У кожного формату є свої переваги і недоліки. Векторний формат ідеально підходить для зображень з простих геометричних фігур (наприклад, логотипів, тексту, значків і т. Д.). Вони залишаються чіткими при будь-якому дозволі і масштабі, тому використовуйте цей формат для великих екранів і ресурсів, які повинні бути показані в різних розмірах.
Однак векторні формати не підходять для складних зображень (наприклад, для фотографій). SVG-розмітки для опису будь-яких форм може стати занадто багато, але отримане зображення все одно буде виглядати нереалістично. В цьому випадку вам варто використовувати растровий формат зображень, наприклад GIF, PNG, JPEG або нові формати JPEG-XR і WebP.
Якість растрових зображень залежить від дозволу і масштабу: при збільшенні воно стає розмитим і розпадається на пікселі. В результаті вам може знадобитися зберегти кілька версій растрового зображення в різних дозволах.
Оптимізація для екранів з високою роздільною здатністю
TL; DR
- На екранах з високою роздільною здатністю один CSS-піксель складається з декількох екранних пікселів.
- У зображеннях високої роздільної здатності пікселів і байтів набагато більше, ніж в звичайних.
- Техніки оптимізації можна застосовувати до зображень будь-якого дозволу.
Говорячи про пікселі, слід розрізняти екранні і CSS-пікселі. CSS-піксель може відповідати одному або декільком екранним. Це зроблено для того, щоб на пристроях з великою кількістю екранних пікселів зображення було більш чітким і деталізованим.
Звичайно, на екранах з високою роздільною DPI (HiDPI) графіка виглядає дуже красиво. Однак, щоб добре виглядати у високій роздільній здатності, наші зображення повинні бути більш деталізованими. Але у нас є рішення: векторні формати ідеально підходять для цього завдання. Вони зберігають чіткість в будь-якому дозволі. Навіть якщо збільшаться витрати на отрисовку дрібних деталей, ми як і раніше використовуємо один незалежний від розміру екрана ресурс.
З іншого боку, з растровими зображеннями виникає набагато більше складнощів, тому що вони кодують дані зображення в кожному пікселі. Таким чином, чим вище число пікселів, тим більше розмір такого ресурсу. Як приклад розглянемо різницю між фотографіями розміром 100х100 CSS-пікселів:
Дозвіл екрану Всього пікселів Розмір файлу без стиснення (4 Б на пікс.) 1x 100 x 100 = 10 000 40 000 Б 2x 100 x 100 x 4 = 40 000 160 000 Б 3x 100 x 100 x 9 = 90 000 360 000 Б
Коли ми вдвічі збільшуємо дозвіл екрана, загальна кількість пікселів зростає відразу в чотири рази: в два рази по вертикалі і в два по горизонталі.
Підведемо підсумок. На екранах з великою роздільною здатністю графіка виглядають дуже привабливо, тому ви зможете створити гарне враження про вашому сайті. Однак для таких екранів потрібні зображення з високою роздільною здатністю. Вибирайте векторні формати, тому що вони чітко виглядають на будь-яких пристроях. Якщо необхідно використовувати растрових зображень, додайте кілька оптимізованих варіантів ресурсу (див. Далі).
Оптимізація векторних зображень
TL; DR
- SVG - це формат зображень на основі XML
- SVG-файли потрібно мініфіціровать для зменшення розміру.
- Стискайте SVG-файли за допомогою GZIP.
Всі сучасні браузери підтримують формат SVG (Scalable Vector Graphics). Це формат зображень на основі XML для двомірної графіки. Розмітку SVG можна вбудувати прямо в сторінку або на зовнішній ресурс. У свою чергу, файл SVG можна створити за допомогою будь-якого ПО для векторного малювання або вручну в текстовому редакторі.
<? Xml version = "1.0" encoding = "utf-8"?> <! - Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In. SVG Version: 6.00 Build 0) -> <svg version = "1.2" baseProfile = "tiny" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http : //www.w3.org/1999/xlink "x =" 0px "y =" 0px "viewBox =" 0 0 612 792 "xml: space =" preserve "> <g id =" XMLID_1 _ "> <g> <circle fill = "red" stroke = "black" stroke-width = "2" stroke-miterlimit = "10" cx = "50" cy = "50" r = "40" /> </ g> </ g > </ svg>
Приклад вище отрісовиваєт просту круглу форму з чорною кордоном і червоним тлом. Вона була експортована з Adobe Illustrator. Легко здогадатися, що вона містить безліч метаданих, наприклад інформацію про шари, коментарі і простору імен XML, які найчастіше не потрібні для отобраденія ресурсу в браузері. В результаті, слід мініфіціровать файли SVG за допомогою інструменту svgo .
Наприклад, svgo зменшує розмір наведеного вище файлу SVG на 58% з 470 до 199 Б. Крім того, оскільки SVG - це формат на основі XML, ми може застосувати стиснення GZIP для зменшення його розміру при передачі. Переконайтеся, що на вашому сервері налаштований стиснення SVG-ресурсів.
Оптимізація растрових зображень
TL; DR
- Растрове зображення - це сітка пікселів.
- У кожному пікселі закодована інформація про колір і прозорості.
- Щоб зменшити розмір зображення, компресори використовують різні методи для зниження кількості бітів на піксель.
Растрове зображення - це просто двомірна сітка окремих пікселів. Наприклад, зображення 100x100 пікселів - це послідовно з 10 000 пікселів. У кожному з пікселів містяться значення RGBA: червоного (R), зеленого (G) і синього (B) каналу, а також альфа-каналу, або каналу прозорості (A).
Браузер встановлює 256 значень (відтінків) для кожного каналу, які в пере рахунку займають 8 бітів на канал (2 ^ 8 = 256) і 4 байта на піксель (4 канали x 8 біт = 32 біта = 4 байта). Таким чином, знаючи розміри сітки, ми легко можемо обчислити розмір файлу:
- Зображення 100 x 100 пікс. складається з 10 000 пікселів
- 10 000 пікс. x 4 Б = 40 000 Б
- 40 000 Б / тисячі двадцять чотири = 39 КБ
^
Розмір Пікселі Розмір файлу 100 x 100 10 000 39 КБ 200 x 200 40 000 156 КБ 300 x 300 90 000 351 КБ 500 x 500 250 000 977 КБ 800 x 800 640 000 2500 КБ
Може здатися, що 39 КБ - це зовсім небагато для зображення розміром 100x100 пікселів. Однак при збільшенні розміру файл буде важити набагато більше, і на його скачування доведеться витратити багато часу і ресурсів. Зараз це зображення не стисло. Що можна зробити, щоб зменшити його розмір?
Один з найпростіших способів оптимізації зображення - знизити глибину кольору з 8 бітів на канал, вибравши палітру меншого розміру. Встановивши глибину в 8 бітів на канал, ми отримуємо 256 значень для каналу і 16 777 216 (2563) квітів. Може, варто зменшити палітру до 256 квітів? Тоді нам буде потрібно всього 8 біт для всіх каналів RGB і тільки 2 байта на піксель, а не 4, як раніше. Нам вдалося стиснути зображення в два рази!
Оптимізувавши дані в окремих пікселях, звернемо увагу на сусідні пікселі. Виявляється, колір таких пікселів на багатьох зображеннях, особливо на фотографіях, часто схожий. Завдяки цьому компресор може застосовувати дельта-кодування . Замість збереження окремих значення для кожного пікселя можна вказати тільки різницю між сусідніми пікселями. Якщо вони однакові, то дельта дорівнює нулю, і нам потрібно зберегти всього один біт. Але це ще не все!
Ми часто не помічаємо різниці в деяких відтінках, тому ми можемо оптимізувати зображення, зменшивши або збільшивши палітру для цих квітів. У кожного пікселя в двомірної сітці є кілька сусідів, тому ми можемо вдосконалити дельта-кодування. Сконцентруєтеся нема на безпосередніх сусідів пікселя, а на цілих блоках схожих кольорів і закодуйте їх за допомогою різних налаштувань.
Як ви бачите, оптимізація зображення стає все складніше і цікавіше. На цю тему ведуться наукові та комерційні дослідження, тому що зображення важать багато байтів, і розвивати нові техніки стиснення вигідно. Якщо ви хочете дізнатися більше, прочитайте статтю на Вікіпедії або ознайомтеся з конкретними прикладами в брошурі про техніках стиснення WebP .
Отже, як весь цей складний матеріал допоможе нам оптимізувати зображення? Повторимо: нам не потрібно винаходити нові методи стиснення. Однак нам потрібно знати про ключові аспекти питання: пікселях RGBA, глибині кольору і різних техніках оптимізації. Це необхідно, щоб продовжити розмову про растрових форматах.
Стиснення з втратами і без втрат
TL; DR
- З огляду на особливості людського зору, для зображень можна застосовувати стиснення з втратами.
- Для оптимізації зображення використовується стиснення з втратами і без втрат.
- Різниця в форматах зображень - це відмінності в тому, як і які алгоритми цих стиснень застосовуються для зменшення розміру ресурсу.
- Не існує найкращого формату або настройки якості, які підійшли б для всіх зображень. При поєднанні різних компресорів і ресурсів ми ніколи не отримаємо однаковий результат.
Для певних типів даних, наприклад вихідного коду сторінки або виконуваного файлу, вкрай важливо, щоб компресор не видаляв і не міняв первинну інформацію. Через зниклого або неправильного біта даних може бути повністю спотворено або знищено значення контенту файлу. Однак інші типи даних цілком можна передати в приблизному вигляді.
Через особливості людського зору ми можемо не помітити відсутність будь-якої інформації про кожному пікселі, наприклад ми не побачимо відмінності між деякими відтінками кольору. Тому ми можемо використовувати менше бітів для кодування деяких квітів і завдяки цьому зменшити розмір ресурсу. Таким чином, стандартна оптимізація зображення складається з двох основних етапів:
- Стиснення зображення [з втратами] (http://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями), при якому видаляються деякі дані пікселів.
- Стиснення зображення [без втрат] (http://en.wikipedia.org/wiki/Lossless_compression), при якому дані пікселів стискуються.
Виконувати перший крок необов'язково. Точний алгоритм залежить від певного формату зображення, проте врахуйте, що кожне зображення можна стиснути з втратою даних. Насправді, різниця між форматами зображень, наприклад GIF, PNG, JPEG і т. Д., Складається саме в комбінації різних алгоритмів стиснення даних з втратою і без втрат.
Як найкраще поєднувати стиснення з втратами і без втрат? Це залежить від самого зображення і інших умов, наприклад балансу між розміром файлу та шумами. Щоб отримати чітке деталізоване зображення, ви можете не застосовувати стиснення з втратами. Якщо ж для вас більше важливий розмір файлу, сміливо використовуйте цей метод оптимізації. Єдиного варіанти налаштувань для всіх зображень не існує. Ви самі повинні визначити бажаний результат і прийняти рішення.
При використанні стиснення з втратами, наприклад JPEG, ви зможете вибрати налаштування якості (на кшталт повзунка Зберегти для Web в Adobe Photoshop). Зазвичай це значення від 1 до 100, яке визначає застосування алгоритмів стиснення з втратами і без. Не бійтеся знижувати якість: часто зображення як і раніше добре виглядає, а розмір файлу стає значно менше.
Вибір формату зображення
TL; DR
- Виберіть відповідний стандартний формат: GIF, PNG або JPEG.
- Спробуйте встановити різні настройки для кожного формату (якість, розмір палітри і т. Д.) І виберіть найбільш підходящі.
- Для сучасних клієнтів додайте ресурси в форматах WebP і JPEG XR масштабовані зображення:
- Масштабування зображень - один з найбільш простих і ефективних методів оптимізації.
- Якщо ви використовуєте зображення великого розміру, користувач може завантажувати зайві дані.
- Reduce the number of unnecessary pixels by scaling your images to their display size Знизьте кількість непотрібних пікселів, зменшивши зображення до відображуваного розміру.
Крім алгоритмів стиснення з втратами і без втрат, в форматах зображення підтримуються інші функції, наприклад анімація і канал прозорості (альфа-канал). Таким чином, при виборі відповідного формату вам потрібно врахувати бажаний візуальний ефект і вимоги до сайту або додатком.
Формат Прозорість Анімація Браузер GIF Так Так Всі PNG Так Ні Всі JPEG Ні Ні Все JPEG XR Так Так IE WebP Так Так Chrome, Opera, Android
Існують три стандартних формату зображень: GIF, PNG і JPEG. Крім них деякі браузери підтримують нові формати WebP і JPEG XR, для яких доступно більше стиснення і додаткові можливості. Отже, який формат вибрати?
- Зображення повинно бути анімованим? Тоді вибирайте формат GIF.
- Колірна палітра GIF складається всього з 256 кольорів. Це недостатньо для більшості зображень. Крім того, формат PNG-8 краще стискає зображення з маленькою палітрою. Таким чином, вибирайте GIF, тільки якщо вам потрібно анімація.
- Потрібно зберегти всі дрібні деталі в найвищому дозволі? Використовуйте PNG.
- У форматі PNG не застосовується стиснення з втратою даних, не рахуючи вибору розміру палітри. Завдяки цьому зображення зберігається в найвищій якості, але важить набагато більше, ніж файли інших форматів. Використовуйте цей формат тільки там, де це необхідно.
- Якщо зображення складається з геометричних фігур, конвертуйте його в векторний (SVG-) формат!
- Уникайте тексту в зображеннях. Його не можна вибрати, знайти або збільшити. Якщо текст необхідний для створення дизайну, використовуйте веб-шрифти.
- Ви оптимізуєте фотографію, скріншот або зображення схожого типу? Використовуйте JPEG.
- В JPEG використовується комбінація стиснення з втратами і без втрат для зменшення розміру файлу. Щоб вибрати найкраще поєднання якості і розміру зображення, спробуйте встановити кілька рівнів якості JPEG.
Визначивши відповідний формат і його налаштування для всіх ресурсів, додайте додатковий варіант в WebP і JPEG XR. Це нові формати, які поки не підтримуються у всіх браузерах. Однак з їх допомогою може значно зменшити розмір файлу. Наприклад, WebP стискає зображення на 30% більше, ніж JPEG.
Оскільки WebP and JPEG XR можуть підтримуватися не в усіх браузерах, вам треба додати додаткову логіку в додатку або на сервери, щоб відправляти користувачеві відповідний ресурс.
оптимізація зображень
Зображення - ті ресурси, які часто займають багато місця на сторінці і важать найбільше. Завдяки їх оптимізації ми можемо значно зменшити кількість завантажуваних даних і поліпшити роботу сайту. Чим більше стисло зображення, тим менше пропускної здатності каналу займає скачування і тим швидше браузер зможе показати сторінку користувачеві.
Оптимізація зображень - це одночасно наука і мистецтво. Ми можемо назвати це мистецтвом, тому що ніхто не може дати певну відповідь, як найкраще стиснути конкретне зображення. Однак це і наука, адже в нашому розпорядженні є розроблені техніки і алгоритми, які можуть значно зменшити розмір ресурсу. Щоб вибрати оптимальні настройки для зображення, необхідно врахувати багато чинників: можливості формату, закодовані дані, якість, кількість пікселів і т. Д.
Видалення і заміна зображень
TL; DR
- Видаліть непотрібні зображення.
- При можливості застосовуйте ефекти CSS3.
- Використовуйте веб-шрифти замість кодування тексту в зображеннях.
Перш за все задайте собі питання: чи дійсно це зображення необхідно? Хороший дизайн повинен бути простим і не погіршувати продуктивність. Найкраще просто видалити непотрібне зображення, оскільки воно важить набагато більше байтів в порівнянні з HTML, CSS, JavaScript і іншими ресурсами на сторінці. При цьому одне зображення в потрібному місці може замінити довгий текст, тому вам потрібно самостійно знайти баланс і прийняти правильне рішення.
Після цього ви повинні перевірити, чи не можна досягти бажаного результату більш ефективним шляхом:
- Завдяки CSS-ефектів (градиентам, тіням і т. Д.) І CSS-анімації ви можете створити ресурси, які чітко виглядають при будь-якому дозволі і масштабі і важать набагато менше, ніж зображення.
- Веб-шрифти дозволяють використовувати красиві написи, зберігаючи можливість вибирати і шукати текст, а також змінювати його розмір. Завдяки цьому робота з вашим ресурсом стане ще зручніше.
Уникайте кодування тексту в зображенні. Красиві написи необхідні для якісного дизайну, просування бренду і зручної роботи з ресурсом, але текст в зображенні тільки заважає всьому цьому. Його не можна вибрати, знайти, збільшити, скопіювати, а також він погано виглядає на пристроях з високою роздільною здатністю. Звичайно, веб-шрифтів також потрібно оптимізація, але вони допоможуть уникнути перерахованих вище проблем. Для відображення тексту завжди вибирайте саме їх.
Векторні і растрові зображення
TL; DR
- Векторний формат відмінно підходить для зображень з геометричних фігур.
- Якість векторних зображень не залежить від масштабу і дозволу.
- Використовуйте растровий формат для складних зображень з безліччю нестандартних форм і деталей.
Якщо ви вирішили, що для досягнення результату вам слід використовувати саме зображення, виберіть для нього відповідний формат:
- В векторної графіки для відображення картинки використовуються лінії, точки і багатокутники.
- В бітових зображеннях індивідуальні значення кожного пікселя в прямокутній сітці кодуються, і на їх основі показується зображення.
У кожного формату є свої переваги і недоліки. Векторний формат ідеально підходить для зображень з простих геометричних фігур (наприклад, логотипів, тексту, значків і т. Д.). Вони залишаються чіткими при будь-якому дозволі і масштабі, тому використовуйте цей формат для великих екранів і ресурсів, які повинні бути показані в різних розмірах.
Однак векторні формати не підходять для складних зображень (наприклад, для фотографій). SVG-розмітки для опису будь-яких форм може стати занадто багато, але отримане зображення все одно буде виглядати нереалістично. В цьому випадку вам варто використовувати растровий формат зображень, наприклад GIF, PNG, JPEG або нові формати JPEG-XR і WebP.
Якість растрових зображень залежить від дозволу і масштабу: при збільшенні воно стає розмитим і розпадається на пікселі. В результаті вам може знадобитися зберегти кілька версій растрового зображення в різних дозволах.
Оптимізація для екранів з високою роздільною здатністю
TL; DR
- На екранах з високою роздільною здатністю один CSS-піксель складається з декількох екранних пікселів.
- У зображеннях високої роздільної здатності пікселів і байтів набагато більше, ніж в звичайних.
- Техніки оптимізації можна застосовувати до зображень будь-якого дозволу.
Говорячи про пікселі, слід розрізняти екранні і CSS-пікселі. CSS-піксель може відповідати одному або декільком екранним. Це зроблено для того, щоб на пристроях з великою кількістю екранних пікселів зображення було більш чітким і деталізованим.
Звичайно, на екранах з високою роздільною DPI (HiDPI) графіка виглядає дуже красиво. Однак, щоб добре виглядати у високій роздільній здатності, наші зображення повинні бути більш деталізованими. Але у нас є рішення: векторні формати ідеально підходять для цього завдання. Вони зберігають чіткість в будь-якому дозволі. Навіть якщо збільшаться витрати на отрисовку дрібних деталей, ми як і раніше використовуємо один незалежний від розміру екрана ресурс.
З іншого боку, з растровими зображеннями виникає набагато більше складнощів, тому що вони кодують дані зображення в кожному пікселі. Таким чином, чим вище число пікселів, тим більше розмір такого ресурсу. Як приклад розглянемо різницю між фотографіями розміром 100х100 CSS-пікселів:
Дозвіл екрану Всього пікселів Розмір файлу без стиснення (4 Б на пікс.) 1x 100 x 100 = 10 000 40 000 Б 2x 100 x 100 x 4 = 40 000 160 000 Б 3x 100 x 100 x 9 = 90 000 360 000 Б
Коли ми вдвічі збільшуємо дозвіл екрана, загальна кількість пікселів зростає відразу в чотири рази: в два рази по вертикалі і в два по горизонталі.
Підведемо підсумок. На екранах з великою роздільною здатністю графіка виглядають дуже привабливо, тому ви зможете створити гарне враження про вашому сайті. Однак для таких екранів потрібні зображення з високою роздільною здатністю. Вибирайте векторні формати, тому що вони чітко виглядають на будь-яких пристроях. Якщо необхідно використовувати растрових зображень, додайте кілька оптимізованих варіантів ресурсу (див. Далі).
Оптимізація векторних зображень
TL; DR
- SVG - це формат зображень на основі XML
- SVG-файли потрібно мініфіціровать для зменшення розміру.
- Стискайте SVG-файли за допомогою GZIP.
Всі сучасні браузери підтримують формат SVG (Scalable Vector Graphics). Це формат зображень на основі XML для двомірної графіки. Розмітку SVG можна вбудувати прямо в сторінку або на зовнішній ресурс. У свою чергу, файл SVG можна створити за допомогою будь-якого ПО для векторного малювання або вручну в текстовому редакторі.
<? Xml version = "1.0" encoding = "utf-8"?> <! - Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In. SVG Version: 6.00 Build 0) -> <svg version = "1.2" baseProfile = "tiny" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http : //www.w3.org/1999/xlink "x =" 0px "y =" 0px "viewBox =" 0 0 612 792 "xml: space =" preserve "> <g id =" XMLID_1 _ "> <g> <circle fill = "red" stroke = "black" stroke-width = "2" stroke-miterlimit = "10" cx = "50" cy = "50" r = "40" /> </ g> </ g > </ svg>
Приклад вище отрісовиваєт просту круглу форму з чорною кордоном і червоним тлом. Вона була експортована з Adobe Illustrator. Легко здогадатися, що вона містить безліч метаданих, наприклад інформацію про шари, коментарі і простору імен XML, які найчастіше не потрібні для отобраденія ресурсу в браузері. В результаті, слід мініфіціровать файли SVG за допомогою інструменту svgo .
Наприклад, svgo зменшує розмір наведеного вище файлу SVG на 58% з 470 до 199 Б. Крім того, оскільки SVG - це формат на основі XML, ми може застосувати стиснення GZIP для зменшення його розміру при передачі. Переконайтеся, що на вашому сервері налаштований стиснення SVG-ресурсів.
Оптимізація растрових зображень
TL; DR
- Растрове зображення - це сітка пікселів.
- У кожному пікселі закодована інформація про колір і прозорості.
- Щоб зменшити розмір зображення, компресори використовують різні методи для зниження кількості бітів на піксель.
Растрове зображення - це просто двомірна сітка окремих пікселів. Наприклад, зображення 100x100 пікселів - це послідовно з 10 000 пікселів. У кожному з пікселів містяться значення RGBA: червоного (R), зеленого (G) і синього (B) каналу, а також альфа-каналу, або каналу прозорості (A).
Браузер встановлює 256 значень (відтінків) для кожного каналу, які в пере рахунку займають 8 бітів на канал (2 ^ 8 = 256) і 4 байта на піксель (4 канали x 8 біт = 32 біта = 4 байта). Таким чином, знаючи розміри сітки, ми легко можемо обчислити розмір файлу:
- Зображення 100 x 100 пікс. складається з 10 000 пікселів
- 10 000 пікс. x 4 Б = 40 000 Б
- 40 000 Б / тисячі двадцять чотири = 39 КБ
^
Розмір Пікселі Розмір файлу 100 x 100 10 000 39 КБ 200 x 200 40 000 156 КБ 300 x 300 90 000 351 КБ 500 x 500 250 000 977 КБ 800 x 800 640 000 2500 КБ
Може здатися, що 39 КБ - це зовсім небагато для зображення розміром 100x100 пікселів. Однак при збільшенні розміру файл буде важити набагато більше, і на його скачування доведеться витратити багато часу і ресурсів. Зараз це зображення не стисло. Що можна зробити, щоб зменшити його розмір?
Один з найпростіших способів оптимізації зображення - знизити глибину кольору з 8 бітів на канал, вибравши палітру меншого розміру. Встановивши глибину в 8 бітів на канал, ми отримуємо 256 значень для каналу і 16 777 216 (2563) квітів. Може, варто зменшити палітру до 256 квітів? Тоді нам буде потрібно всього 8 біт для всіх каналів RGB і тільки 2 байта на піксель, а не 4, як раніше. Нам вдалося стиснути зображення в два рази!
Оптимізувавши дані в окремих пікселях, звернемо увагу на сусідні пікселі. Виявляється, колір таких пікселів на багатьох зображеннях, особливо на фотографіях, часто схожий. Завдяки цьому компресор може застосовувати дельта-кодування . Замість збереження окремих значення для кожного пікселя можна вказати тільки різницю між сусідніми пікселями. Якщо вони однакові, то дельта дорівнює нулю, і нам потрібно зберегти всього один біт. Але це ще не все!
Ми часто не помічаємо різниці в деяких відтінках, тому ми можемо оптимізувати зображення, зменшивши або збільшивши палітру для цих квітів. У кожного пікселя в двомірної сітці є кілька сусідів, тому ми можемо вдосконалити дельта-кодування. Сконцентруєтеся нема на безпосередніх сусідів пікселя, а на цілих блоках схожих кольорів і закодуйте їх за допомогою різних налаштувань.
Як ви бачите, оптимізація зображення стає все складніше і цікавіше. На цю тему ведуться наукові та комерційні дослідження, тому що зображення важать багато байтів, і розвивати нові техніки стиснення вигідно. Якщо ви хочете дізнатися більше, прочитайте статтю на Вікіпедії або ознайомтеся з конкретними прикладами в брошурі про техніках стиснення WebP .
Отже, як весь цей складний матеріал допоможе нам оптимізувати зображення? Повторимо: нам не потрібно винаходити нові методи стиснення. Однак нам потрібно знати про ключові аспекти питання: пікселях RGBA, глибині кольору і різних техніках оптимізації. Це необхідно, щоб продовжити розмову про растрових форматах.
Стиснення з втратами і без втрат
TL; DR
- З огляду на особливості людського зору, для зображень можна застосовувати стиснення з втратами.
- Для оптимізації зображення використовується стиснення з втратами і без втрат.
- Різниця в форматах зображень - це відмінності в тому, як і які алгоритми цих стиснень застосовуються для зменшення розміру ресурсу.
- Не існує найкращого формату або настройки якості, які підійшли б для всіх зображень. При поєднанні різних компресорів і ресурсів ми ніколи не отримаємо однаковий результат.
Для певних типів даних, наприклад вихідного коду сторінки або виконуваного файлу, вкрай важливо, щоб компресор не видаляв і не міняв первинну інформацію. Через зниклого або неправильного біта даних може бути повністю спотворено або знищено значення контенту файлу. Однак інші типи даних цілком можна передати в приблизному вигляді.
Через особливості людського зору ми можемо не помітити відсутність будь-якої інформації про кожному пікселі, наприклад ми не побачимо відмінності між деякими відтінками кольору. Тому ми можемо використовувати менше бітів для кодування деяких квітів і завдяки цьому зменшити розмір ресурсу. Таким чином, стандартна оптимізація зображення складається з двох основних етапів:
- Стиснення зображення [з втратами] (http://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями), при якому видаляються деякі дані пікселів.
- Стиснення зображення [без втрат] (http://en.wikipedia.org/wiki/Lossless_compression), при якому дані пікселів стискуються.
Виконувати перший крок необов'язково. Точний алгоритм залежить від певного формату зображення, проте врахуйте, що кожне зображення можна стиснути з втратою даних. Насправді, різниця між форматами зображень, наприклад GIF, PNG, JPEG і т. Д., Складається саме в комбінації різних алгоритмів стиснення даних з втратою і без втрат.
Як найкраще поєднувати стиснення з втратами і без втрат? Це залежить від самого зображення і інших умов, наприклад балансу між розміром файлу та шумами. Щоб отримати чітке деталізоване зображення, ви можете не застосовувати стиснення з втратами. Якщо ж для вас більше важливий розмір файлу, сміливо використовуйте цей метод оптимізації. Єдиного варіанти налаштувань для всіх зображень не існує. Ви самі повинні визначити бажаний результат і прийняти рішення.
При використанні стиснення з втратами, наприклад JPEG, ви зможете вибрати налаштування якості (на кшталт повзунка Зберегти для Web в Adobe Photoshop). Зазвичай це значення від 1 до 100, яке визначає застосування алгоритмів стиснення з втратами і без. Не бійтеся знижувати якість: часто зображення як і раніше добре виглядає, а розмір файлу стає значно менше.
Вибір формату зображення
TL; DR
- Виберіть відповідний стандартний формат: GIF, PNG або JPEG.
- Спробуйте встановити різні настройки для кожного формату (якість, розмір палітри і т. Д.) І виберіть найбільш підходящі.
- Для сучасних клієнтів додайте ресурси в форматах WebP і JPEG XR масштабовані зображення:
- Масштабування зображень - один з найбільш простих і ефективних методів оптимізації.
- Якщо ви використовуєте зображення великого розміру, користувач може завантажувати зайві дані.
- Reduce the number of unnecessary pixels by scaling your images to their display size Знизьте кількість непотрібних пікселів, зменшивши зображення до відображуваного розміру.
Крім алгоритмів стиснення з втратами і без втрат, в форматах зображення підтримуються інші функції, наприклад анімація і канал прозорості (альфа-канал). Таким чином, при виборі відповідного формату вам потрібно врахувати бажаний візуальний ефект і вимоги до сайту або додатком.
Формат Прозорість Анімація Браузер GIF Так Так Всі PNG Так Ні Всі JPEG Ні Ні Все JPEG XR Так Так IE WebP Так Так Chrome, Opera, Android
Існують три стандартних формату зображень: GIF, PNG і JPEG. Крім них деякі браузери підтримують нові формати WebP і JPEG XR, для яких доступно більше стиснення і додаткові можливості. Отже, який формат вибрати?
- Зображення повинно бути анімованим? Тоді вибирайте формат GIF.
- Колірна палітра GIF складається всього з 256 кольорів. Це недостатньо для більшості зображень. Крім того, формат PNG-8 краще стискає зображення з маленькою палітрою. Таким чином, вибирайте GIF, тільки якщо вам потрібно анімація.
- Потрібно зберегти всі дрібні деталі в найвищому дозволі? Використовуйте PNG.
- У форматі PNG не застосовується стиснення з втратою даних, не рахуючи вибору розміру палітри. Завдяки цьому зображення зберігається в найвищій якості, але важить набагато більше, ніж файли інших форматів. Використовуйте цей формат тільки там, де це необхідно.
- Якщо зображення складається з геометричних фігур, конвертуйте його в векторний (SVG-) формат!
- Уникайте тексту в зображеннях. Його не можна вибрати, знайти або збільшити. Якщо текст необхідний для створення дизайну, використовуйте веб-шрифти.
- Ви оптимізуєте фотографію, скріншот або зображення схожого типу? Використовуйте JPEG.
- В JPEG використовується комбінація стиснення з втратами і без втрат для зменшення розміру файлу. Щоб вибрати найкраще поєднання якості і розміру зображення, спробуйте встановити кілька рівнів якості JPEG.
Визначивши відповідний формат і його налаштування для всіх ресурсів, додайте додатковий варіант в WebP і JPEG XR. Це нові формати, які поки не підтримуються у всіх браузерах. Однак з їх допомогою може значно зменшити розмір файлу. Наприклад, WebP стискає зображення на 30% більше, ніж JPEG.
Оскільки WebP and JPEG XR можуть підтримуватися не в усіх браузерах, вам треба додати додаткову логіку в додатку або на сервери, щоб відправляти користувачеві відповідний ресурс.
оптимізація зображень
Зображення - ті ресурси, які часто займають багато місця на сторінці і важать найбільше. Завдяки їх оптимізації ми можемо значно зменшити кількість завантажуваних даних і поліпшити роботу сайту. Чим більше стисло зображення, тим менше пропускної здатності каналу займає скачування і тим швидше браузер зможе показати сторінку користувачеві.
Оптимізація зображень - це одночасно наука і мистецтво. Ми можемо назвати це мистецтвом, тому що ніхто не може дати певну відповідь, як найкраще стиснути конкретне зображення. Однак це і наука, адже в нашому розпорядженні є розроблені техніки і алгоритми, які можуть значно зменшити розмір ресурсу. Щоб вибрати оптимальні настройки для зображення, необхідно врахувати багато чинників: можливості формату, закодовані дані, якість, кількість пікселів і т. Д.
Видалення і заміна зображень
TL; DR
- Видаліть непотрібні зображення.
- При можливості застосовуйте ефекти CSS3.
- Використовуйте веб-шрифти замість кодування тексту в зображеннях.
Перш за все задайте собі питання: чи дійсно це зображення необхідно? Хороший дизайн повинен бути простим і не погіршувати продуктивність. Найкраще просто видалити непотрібне зображення, оскільки воно важить набагато більше байтів в порівнянні з HTML, CSS, JavaScript і іншими ресурсами на сторінці. При цьому одне зображення в потрібному місці може замінити довгий текст, тому вам потрібно самостійно знайти баланс і прийняти правильне рішення.
Після цього ви повинні перевірити, чи не можна досягти бажаного результату більш ефективним шляхом:
- Завдяки CSS-ефектів (градиентам, тіням і т. Д.) І CSS-анімації ви можете створити ресурси, які чітко виглядають при будь-якому дозволі і масштабі і важать набагато менше, ніж зображення.
- Веб-шрифти дозволяють використовувати красиві написи, зберігаючи можливість вибирати і шукати текст, а також змінювати його розмір. Завдяки цьому робота з вашим ресурсом стане ще зручніше.
Уникайте кодування тексту в зображенні. Красиві написи необхідні для якісного дизайну, просування бренду і зручної роботи з ресурсом, але текст в зображенні тільки заважає всьому цьому. Його не можна вибрати, знайти, збільшити, скопіювати, а також він погано виглядає на пристроях з високою роздільною здатністю. Звичайно, веб-шрифтів також потрібно оптимізація, але вони допоможуть уникнути перерахованих вище проблем. Для відображення тексту завжди вибирайте саме їх.
Векторні і растрові зображення
TL; DR
- Векторний формат відмінно підходить для зображень з геометричних фігур.
- Якість векторних зображень не залежить від масштабу і дозволу.
- Використовуйте растровий формат для складних зображень з безліччю нестандартних форм і деталей.
Якщо ви вирішили, що для досягнення результату вам слід використовувати саме зображення, виберіть для нього відповідний формат:
- В векторної графіки для відображення картинки використовуються лінії, точки і багатокутники.
- В бітових зображеннях індивідуальні значення кожного пікселя в прямокутній сітці кодуються, і на їх основі показується зображення.
У кожного формату є свої переваги і недоліки. Векторний формат ідеально підходить для зображень з простих геометричних фігур (наприклад, логотипів, тексту, значків і т. Д.). Вони залишаються чіткими при будь-якому дозволі і масштабі, тому використовуйте цей формат для великих екранів і ресурсів, які повинні бути показані в різних розмірах.
Однак векторні формати не підходять для складних зображень (наприклад, для фотографій). SVG-розмітки для опису будь-яких форм може стати занадто багато, але отримане зображення все одно буде виглядати нереалістично. В цьому випадку вам варто використовувати растровий формат зображень, наприклад GIF, PNG, JPEG або нові формати JPEG-XR і WebP.
Якість растрових зображень залежить від дозволу і масштабу: при збільшенні воно стає розмитим і розпадається на пікселі. В результаті вам може знадобитися зберегти кілька версій растрового зображення в різних дозволах.
Оптимізація для екранів з високою роздільною здатністю
TL; DR
- На екранах з високою роздільною здатністю один CSS-піксель складається з декількох екранних пікселів.
- У зображеннях високої роздільної здатності пікселів і байтів набагато більше, ніж в звичайних.
- Техніки оптимізації можна застосовувати до зображень будь-якого дозволу.
Говорячи про пікселі, слід розрізняти екранні і CSS-пікселі. CSS-піксель може відповідати одному або декільком екранним. Це зроблено для того, щоб на пристроях з великою кількістю екранних пікселів зображення було більш чітким і деталізованим.
Звичайно, на екранах з високою роздільною DPI (HiDPI) графіка виглядає дуже красиво. Однак, щоб добре виглядати у високій роздільній здатності, наші зображення повинні бути більш деталізованими. Але у нас є рішення: векторні формати ідеально підходять для цього завдання. Вони зберігають чіткість в будь-якому дозволі. Навіть якщо збільшаться витрати на отрисовку дрібних деталей, ми як і раніше використовуємо один незалежний від розміру екрана ресурс.
З іншого боку, з растровими зображеннями виникає набагато більше складнощів, тому що вони кодують дані зображення в кожному пікселі. Таким чином, чим вище число пікселів, тим більше розмір такого ресурсу. Як приклад розглянемо різницю між фотографіями розміром 100х100 CSS-пікселів:
Дозвіл екрану Всього пікселів Розмір файлу без стиснення (4 Б на пікс.) 1x 100 x 100 = 10 000 40 000 Б 2x 100 x 100 x 4 = 40 000 160 000 Б 3x 100 x 100 x 9 = 90 000 360 000 Б
Коли ми вдвічі збільшуємо дозвіл екрана, загальна кількість пікселів зростає відразу в чотири рази: в два рази по вертикалі і в два по горизонталі.
Підведемо підсумок. На екранах з великою роздільною здатністю графіка виглядають дуже привабливо, тому ви зможете створити гарне враження про вашому сайті. Однак для таких екранів потрібні зображення з високою роздільною здатністю. Вибирайте векторні формати, тому що вони чітко виглядають на будь-яких пристроях. Якщо необхідно використовувати растрових зображень, додайте кілька оптимізованих варіантів ресурсу (див. Далі).
Оптимізація векторних зображень
TL; DR
- SVG - це формат зображень на основі XML
- SVG-файли потрібно мініфіціровать для зменшення розміру.
- Стискайте SVG-файли за допомогою GZIP.
Всі сучасні браузери підтримують формат SVG (Scalable Vector Graphics). Це формат зображень на основі XML для двомірної графіки. Розмітку SVG можна вбудувати прямо в сторінку або на зовнішній ресурс. У свою чергу, файл SVG можна створити за допомогою будь-якого ПО для векторного малювання або вручну в текстовому редакторі.
<? Xml version = "1.0" encoding = "utf-8"?> <! - Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In. SVG Version: 6.00 Build 0) -> <svg version = "1.2" baseProfile = "tiny" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http : //www.w3.org/1999/xlink "x =" 0px "y =" 0px "viewBox =" 0 0 612 792 "xml: space =" preserve "> <g id =" XMLID_1 _ "> <g> <circle fill = "red" stroke = "black" stroke-width = "2" stroke-miterlimit = "10" cx = "50" cy = "50" r = "40" /> </ g> </ g > </ svg>
Приклад вище отрісовиваєт просту круглу форму з чорною кордоном і червоним тлом. Вона була експортована з Adobe Illustrator. Легко здогадатися, що вона містить безліч метаданих, наприклад інформацію про шари, коментарі і простору імен XML, які найчастіше не потрібні для отобраденія ресурсу в браузері. В результаті, слід мініфіціровать файли SVG за допомогою інструменту svgo .
Наприклад, svgo зменшує розмір наведеного вище файлу SVG на 58% з 470 до 199 Б. Крім того, оскільки SVG - це формат на основі XML, ми може застосувати стиснення GZIP для зменшення його розміру при передачі. Переконайтеся, що на вашому сервері налаштований стиснення SVG-ресурсів.
Оптимізація растрових зображень
TL; DR
- Растрове зображення - це сітка пікселів.
- У кожному пікселі закодована інформація про колір і прозорості.
- Щоб зменшити розмір зображення, компресори використовують різні методи для зниження кількості бітів на піксель.
Растрове зображення - це просто двомірна сітка окремих пікселів. Наприклад, зображення 100x100 пікселів - це послідовно з 10 000 пікселів. У кожному з пікселів містяться значення RGBA: червоного (R), зеленого (G) і синього (B) каналу, а також альфа-каналу, або каналу прозорості (A).
Браузер встановлює 256 значень (відтінків) для кожного каналу, які в пере рахунку займають 8 бітів на канал (2 ^ 8 = 256) і 4 байта на піксель (4 канали x 8 біт = 32 біта = 4 байта). Таким чином, знаючи розміри сітки, ми легко можемо обчислити розмір файлу:
- Зображення 100 x 100 пікс. складається з 10 000 пікселів
- 10 000 пікс. x 4 Б = 40 000 Б
- 40 000 Б / тисячі двадцять чотири = 39 КБ
^
Розмір Пікселі Розмір файлу 100 x 100 10 000 39 КБ 200 x 200 40 000 156 КБ 300 x 300 90 000 351 КБ 500 x 500 250 000 977 КБ 800 x 800 640 000 2500 КБ
Може здатися, що 39 КБ - це зовсім небагато для зображення розміром 100x100 пікселів. Однак при збільшенні розміру файл буде важити набагато більше, і на його скачування доведеться витратити багато часу і ресурсів. Зараз це зображення не стисло. Що можна зробити, щоб зменшити його розмір?
Один з найпростіших способів оптимізації зображення - знизити глибину кольору з 8 бітів на канал, вибравши палітру меншого розміру. Встановивши глибину в 8 бітів на канал, ми отримуємо 256 значень для каналу і 16 777 216 (2563) квітів. Може, варто зменшити палітру до 256 квітів? Тоді нам буде потрібно всього 8 біт для всіх каналів RGB і тільки 2 байта на піксель, а не 4, як раніше. Нам вдалося стиснути зображення в два рази!
Оптимізувавши дані в окремих пікселях, звернемо увагу на сусідні пікселі. Виявляється, колір таких пікселів на багатьох зображеннях, особливо на фотографіях, часто схожий. Завдяки цьому компресор може застосовувати дельта-кодування . Замість збереження окремих значення для кожного пікселя можна вказати тільки різницю між сусідніми пікселями. Якщо вони однакові, то дельта дорівнює нулю, і нам потрібно зберегти всього один біт. Але це ще не все!
Ми часто не помічаємо різниці в деяких відтінках, тому ми можемо оптимізувати зображення, зменшивши або збільшивши палітру для цих квітів. У кожного пікселя в двомірної сітці є кілька сусідів, тому ми можемо вдосконалити дельта-кодування. Сконцентруєтеся нема на безпосередніх сусідів пікселя, а на цілих блоках схожих кольорів і закодуйте їх за допомогою різних налаштувань.
Як ви бачите, оптимізація зображення стає все складніше і цікавіше. На цю тему ведуться наукові та комерційні дослідження, тому що зображення важать багато байтів, і розвивати нові техніки стиснення вигідно. Якщо ви хочете дізнатися більше, прочитайте статтю на Вікіпедії або ознайомтеся з конкретними прикладами в брошурі про техніках стиснення WebP .
Отже, як весь цей складний матеріал допоможе нам оптимізувати зображення? Повторимо: нам не потрібно винаходити нові методи стиснення. Однак нам потрібно знати про ключові аспекти питання: пікселях RGBA, глибині кольору і різних техніках оптимізації. Це необхідно, щоб продовжити розмову про растрових форматах.
Стиснення з втратами і без втрат
TL; DR
- З огляду на особливості людського зору, для зображень можна застосовувати стиснення з втратами.
- Для оптимізації зображення використовується стиснення з втратами і без втрат.
- Різниця в форматах зображень - це відмінності в тому, як і які алгоритми цих стиснень застосовуються для зменшення розміру ресурсу.
- Не існує найкращого формату або настройки якості, які підійшли б для всіх зображень. При поєднанні різних компресорів і ресурсів ми ніколи не отримаємо однаковий результат.
Для певних типів даних, наприклад вихідного коду сторінки або виконуваного файлу, вкрай важливо, щоб компресор не видаляв і не міняв первинну інформацію. Через зниклого або неправильного біта даних може бути повністю спотворено або знищено значення контенту файлу. Однак інші типи даних цілком можна передати в приблизному вигляді.
Через особливості людського зору ми можемо не помітити відсутність будь-якої інформації про кожному пікселі, наприклад ми не побачимо відмінності між деякими відтінками кольору. Тому ми можемо використовувати менше бітів для кодування деяких квітів і завдяки цьому зменшити розмір ресурсу. Таким чином, стандартна оптимізація зображення складається з двох основних етапів:
- Стиснення зображення [з втратами] (http://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями), при якому видаляються деякі дані пікселів.
- Стиснення зображення [без втрат] (http://en.wikipedia.org/wiki/Lossless_compression), при якому дані пікселів стискуються.
Виконувати перший крок необов'язково. Точний алгоритм залежить від певного формату зображення, проте врахуйте, що кожне зображення можна стиснути з втратою даних. Насправді, різниця між форматами зображень, наприклад GIF, PNG, JPEG і т. Д., Складається саме в комбінації різних алгоритмів стиснення даних з втратою і без втрат.
Як найкраще поєднувати стиснення з втратами і без втрат? Це залежить від самого зображення і інших умов, наприклад балансу між розміром файлу та шумами. Щоб отримати чітке деталізоване зображення, ви можете не застосовувати стиснення з втратами. Якщо ж для вас більше важливий розмір файлу, сміливо використовуйте цей метод оптимізації. Єдиного варіанти налаштувань для всіх зображень не існує. Ви самі повинні визначити бажаний результат і прийняти рішення.
При використанні стиснення з втратами, наприклад JPEG, ви зможете вибрати налаштування якості (на кшталт повзунка Зберегти для Web в Adobe Photoshop). Зазвичай це значення від 1 до 100, яке визначає застосування алгоритмів стиснення з втратами і без. Не бійтеся знижувати якість: часто зображення як і раніше добре виглядає, а розмір файлу стає значно менше.
Вибір формату зображення
TL; DR
- Виберіть відповідний стандартний формат: GIF, PNG або JPEG.
- Спробуйте встановити різні настройки для кожного формату (якість, розмір палітри і т. Д.) І виберіть найбільш підходящі.
- Для сучасних клієнтів додайте ресурси в форматах WebP і JPEG XR масштабовані зображення:
- Масштабування зображень - один з найбільш простих і ефективних методів оптимізації.
- Якщо ви використовуєте зображення великого розміру, користувач може завантажувати зайві дані.
- Reduce the number of unnecessary pixels by scaling your images to their display size Знизьте кількість непотрібних пікселів, зменшивши зображення до відображуваного розміру.
Крім алгоритмів стиснення з втратами і без втрат, в форматах зображення підтримуються інші функції, наприклад анімація і канал прозорості (альфа-канал). Таким чином, при виборі відповідного формату вам потрібно врахувати бажаний візуальний ефект і вимоги до сайту або додатком.
Формат Прозорість Анімація Браузер GIF Так Так Всі PNG Так Ні Всі JPEG Ні Ні Все JPEG XR Так Так IE WebP Так Так Chrome, Opera, Android
Існують три стандартних формату зображень: GIF, PNG і JPEG. Крім них деякі браузери підтримують нові формати WebP і JPEG XR, для яких доступно більше стиснення і додаткові можливості. Отже, який формат вибрати?
- Зображення повинно бути анімованим? Тоді вибирайте формат GIF.
- Колірна палітра GIF складається всього з 256 кольорів. Це недостатньо для більшості зображень. Крім того, формат PNG-8 краще стискає зображення з маленькою палітрою. Таким чином, вибирайте GIF, тільки якщо вам потрібно анімація.
- Потрібно зберегти всі дрібні деталі в найвищому дозволі? Використовуйте PNG.
- У форматі PNG не застосовується стиснення з втратою даних, не рахуючи вибору розміру палітри. Завдяки цьому зображення зберігається в найвищій якості, але важить набагато більше, ніж файли інших форматів. Використовуйте цей формат тільки там, де це необхідно.
- Якщо зображення складається з геометричних фігур, конвертуйте його в векторний (SVG-) формат!
- Уникайте тексту в зображеннях. Його не можна вибрати, знайти або збільшити. Якщо текст необхідний для створення дизайну, використовуйте веб-шрифти.
- Ви оптимізуєте фотографію, скріншот або зображення схожого типу? Використовуйте JPEG.
- В JPEG використовується комбінація стиснення з втратами і без втрат для зменшення розміру файлу. Щоб вибрати найкраще поєднання якості і розміру зображення, спробуйте встановити кілька рівнів якості JPEG.
Визначивши відповідний формат і його налаштування для всіх ресурсів, додайте додатковий варіант в WebP і JPEG XR. Це нові формати, які поки не підтримуються у всіх браузерах. Однак з їх допомогою може значно зменшити розмір файлу. Наприклад, WebP стискає зображення на 30% більше, ніж JPEG.
Оскільки WebP and JPEG XR можуть підтримуватися не в усіх браузерах, вам треба додати додаткову логіку в додатку або на сервери, щоб відправляти користувачеві відповідний ресурс.
оптимізація зображень
Зображення - ті ресурси, які часто займають багато місця на сторінці і важать найбільше. Завдяки їх оптимізації ми можемо значно зменшити кількість завантажуваних даних і поліпшити роботу сайту. Чим більше стисло зображення, тим менше пропускної здатності каналу займає скачування і тим швидше браузер зможе показати сторінку користувачеві.
Оптимізація зображень - це одночасно наука і мистецтво. Ми можемо назвати це мистецтвом, тому що ніхто не може дати певну відповідь, як найкраще стиснути конкретне зображення. Однак це і наука, адже в нашому розпорядженні є розроблені техніки і алгоритми, які можуть значно зменшити розмір ресурсу. Щоб вибрати оптимальні настройки для зображення, необхідно врахувати багато чинників: можливості формату, закодовані дані, якість, кількість пікселів і т. Д.
Видалення і заміна зображень
TL; DR
- Видаліть непотрібні зображення.
- При можливості застосовуйте ефекти CSS3.
- Використовуйте веб-шрифти замість кодування тексту в зображеннях.
Перш за все задайте собі питання: чи дійсно це зображення необхідно? Хороший дизайн повинен бути простим і не погіршувати продуктивність. Найкраще просто видалити непотрібне зображення, оскільки воно важить набагато більше байтів в порівнянні з HTML, CSS, JavaScript і іншими ресурсами на сторінці. При цьому одне зображення в потрібному місці може замінити довгий текст, тому вам потрібно самостійно знайти баланс і прийняти правильне рішення.
Після цього ви повинні перевірити, чи не можна досягти бажаного результату більш ефективним шляхом:
- Завдяки CSS-ефектів (градиентам, тіням і т. Д.) І CSS-анімації ви можете створити ресурси, які чітко виглядають при будь-якому дозволі і масштабі і важать набагато менше, ніж зображення.
- Веб-шрифти дозволяють використовувати красиві написи, зберігаючи можливість вибирати і шукати текст, а також змінювати його розмір. Завдяки цьому робота з вашим ресурсом стане ще зручніше.
Уникайте кодування тексту в зображенні. Красиві написи необхідні для якісного дизайну, просування бренду і зручної роботи з ресурсом, але текст в зображенні тільки заважає всьому цьому. Його не можна вибрати, знайти, збільшити, скопіювати, а також він погано виглядає на пристроях з високою роздільною здатністю. Звичайно, веб-шрифтів також потрібно оптимізація, але вони допоможуть уникнути перерахованих вище проблем. Для відображення тексту завжди вибирайте саме їх.
Векторні і растрові зображення
TL; DR
- Векторний формат відмінно підходить для зображень з геометричних фігур.
- Якість векторних зображень не залежить від масштабу і дозволу.
- Використовуйте растровий формат для складних зображень з безліччю нестандартних форм і деталей.
Якщо ви вирішили, що для досягнення результату вам слід використовувати саме зображення, виберіть для нього відповідний формат:
- В векторної графіки для відображення картинки використовуються лінії, точки і багатокутники.
- В бітових зображеннях індивідуальні значення кожного пікселя в прямокутній сітці кодуються, і на їх основі показується зображення.
У кожного формату є свої переваги і недоліки. Векторний формат ідеально підходить для зображень з простих геометричних фігур (наприклад, логотипів, тексту, значків і т. Д.). Вони залишаються чіткими при будь-якому дозволі і масштабі, тому використовуйте цей формат для великих екранів і ресурсів, які повинні бути показані в різних розмірах.
Однак векторні формати не підходять для складних зображень (наприклад, для фотографій). SVG-розмітки для опису будь-яких форм може стати занадто багато, але отримане зображення все одно буде виглядати нереалістично. В цьому випадку вам варто використовувати растровий формат зображень, наприклад GIF, PNG, JPEG або нові формати JPEG-XR і WebP.
Якість растрових зображень залежить від дозволу і масштабу: при збільшенні воно стає розмитим і розпадається на пікселі. В результаті вам може знадобитися зберегти кілька версій растрового зображення в різних дозволах.
Оптимізація для екранів з високою роздільною здатністю
TL; DR
- На екранах з високою роздільною здатністю один CSS-піксель складається з декількох екранних пікселів.
- У зображеннях високої роздільної здатності пікселів і байтів набагато більше, ніж в звичайних.
- Техніки оптимізації можна застосовувати до зображень будь-якого дозволу.
Говорячи про пікселі, слід розрізняти екранні і CSS-пікселі. CSS-піксель може відповідати одному або декільком екранним. Це зроблено для того, щоб на пристроях з великою кількістю екранних пікселів зображення було більш чітким і деталізованим.
Звичайно, на екранах з високою роздільною DPI (HiDPI) графіка виглядає дуже красиво. Однак, щоб добре виглядати у високій роздільній здатності, наші зображення повинні бути більш деталізованими. Але у нас є рішення: векторні формати ідеально підходять для цього завдання. Вони зберігають чіткість в будь-якому дозволі. Навіть якщо збільшаться витрати на отрисовку дрібних деталей, ми як і раніше використовуємо один незалежний від розміру екрана ресурс.
З іншого боку, з растровими зображеннями виникає набагато більше складнощів, тому що вони кодують дані зображення в кожному пікселі. Таким чином, чим вище число пікселів, тим більше розмір такого ресурсу. Як приклад розглянемо різницю між фотографіями розміром 100х100 CSS-пікселів:
Дозвіл екрану Всього пікселів Розмір файлу без стиснення (4 Б на пікс.) 1x 100 x 100 = 10 000 40 000 Б 2x 100 x 100 x 4 = 40 000 160 000 Б 3x 100 x 100 x 9 = 90 000 360 000 Б
Коли ми вдвічі збільшуємо дозвіл екрана, загальна кількість пікселів зростає відразу в чотири рази: в два рази по вертикалі і в два по горизонталі.
Підведемо підсумок. На екранах з великою роздільною здатністю графіка виглядають дуже привабливо, тому ви зможете створити гарне враження про вашому сайті. Однак для таких екранів потрібні зображення з високою роздільною здатністю. Вибирайте векторні формати, тому що вони чітко виглядають на будь-яких пристроях. Якщо необхідно використовувати растрових зображень, додайте кілька оптимізованих варіантів ресурсу (див. Далі).
Оптимізація векторних зображень
TL; DR
- SVG - це формат зображень на основі XML
- SVG-файли потрібно мініфіціровать для зменшення розміру.
- Стискайте SVG-файли за допомогою GZIP.
Всі сучасні браузери підтримують формат SVG (Scalable Vector Graphics). Це формат зображень на основі XML для двомірної графіки. Розмітку SVG можна вбудувати прямо в сторінку або на зовнішній ресурс. У свою чергу, файл SVG можна створити за допомогою будь-якого ПО для векторного малювання або вручну в текстовому редакторі.
<? Xml version = "1.0" encoding = "utf-8"?> <! - Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In. SVG Version: 6.00 Build 0) -> <svg version = "1.2" baseProfile = "tiny" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http : //www.w3.org/1999/xlink "x =" 0px "y =" 0px "viewBox =" 0 0 612 792 "xml: space =" preserve "> <g id =" XMLID_1 _ "> <g> <circle fill = "red" stroke = "black" stroke-width = "2" stroke-miterlimit = "10" cx = "50" cy = "50" r = "40" /> </ g> </ g > </ svg>
Приклад вище отрісовиваєт просту круглу форму з чорною кордоном і червоним тлом. Вона була експортована з Adobe Illustrator. Легко здогадатися, що вона містить безліч метаданих, наприклад інформацію про шари, коментарі і простору імен XML, які найчастіше не потрібні для отобраденія ресурсу в браузері. В результаті, слід мініфіціровать файли SVG за допомогою інструменту svgo .
Наприклад, svgo зменшує розмір наведеного вище файлу SVG на 58% з 470 до 199 Б. Крім того, оскільки SVG - це формат на основі XML, ми може застосувати стиснення GZIP для зменшення його розміру при передачі. Переконайтеся, що на вашому сервері налаштований стиснення SVG-ресурсів.
Оптимізація растрових зображень
TL; DR
- Растрове зображення - це сітка пікселів.
- У кожному пікселі закодована інформація про колір і прозорості.
- Щоб зменшити розмір зображення, компресори використовують різні методи для зниження кількості бітів на піксель.
Растрове зображення - це просто двомірна сітка окремих пікселів. Наприклад, зображення 100x100 пікселів - це послідовно з 10 000 пікселів. У кожному з пікселів містяться значення RGBA: червоного (R), зеленого (G) і синього (B) каналу, а також альфа-каналу, або каналу прозорості (A).
Браузер встановлює 256 значень (відтінків) для кожного каналу, які в пере рахунку займають 8 бітів на канал (2 ^ 8 = 256) і 4 байта на піксель (4 канали x 8 біт = 32 біта = 4 байта). Таким чином, знаючи розміри сітки, ми легко можемо обчислити розмір файлу:
- Зображення 100 x 100 пікс. складається з 10 000 пікселів
- 10 000 пікс. x 4 Б = 40 000 Б
- 40 000 Б / тисячі двадцять чотири = 39 КБ
^
Розмір Пікселі Розмір файлу 100 x 100 10 000 39 КБ 200 x 200 40 000 156 КБ 300 x 300 90 000 351 КБ 500 x 500 250 000 977 КБ 800 x 800 640 000 2500 КБ
Може здатися, що 39 КБ - це зовсім небагато для зображення розміром 100x100 пікселів. Однак при збільшенні розміру файл буде важити набагато більше, і на його скачування доведеться витратити багато часу і ресурсів. Зараз це зображення не стисло. Що можна зробити, щоб зменшити його розмір?
Один з найпростіших способів оптимізації зображення - знизити глибину кольору з 8 бітів на канал, вибравши палітру меншого розміру. Встановивши глибину в 8 бітів на канал, ми отримуємо 256 значень для каналу і 16 777 216 (2563) квітів. Може, варто зменшити палітру до 256 квітів? Тоді нам буде потрібно всього 8 біт для всіх каналів RGB і тільки 2 байта на піксель, а не 4, як раніше. Нам вдалося стиснути зображення в два рази!
Оптимізувавши дані в окремих пікселях, звернемо увагу на сусідні пікселі. Виявляється, колір таких пікселів на багатьох зображеннях, особливо на фотографіях, часто схожий. Завдяки цьому компресор може застосовувати дельта-кодування . Замість збереження окремих значення для кожного пікселя можна вказати тільки різницю між сусідніми пікселями. Якщо вони однакові, то дельта дорівнює нулю, і нам потрібно зберегти всього один біт. Але це ще не все!
Ми часто не помічаємо різниці в деяких відтінках, тому ми можемо оптимізувати зображення, зменшивши або збільшивши палітру для цих квітів. У кожного пікселя в двомірної сітці є кілька сусідів, тому ми можемо вдосконалити дельта-кодування. Сконцентруєтеся нема на безпосередніх сусідів пікселя, а на цілих блоках схожих кольорів і закодуйте їх за допомогою різних налаштувань.
Як ви бачите, оптимізація зображення стає все складніше і цікавіше. На цю тему ведуться наукові та комерційні дослідження, тому що зображення важать багато байтів, і розвивати нові техніки стиснення вигідно. Якщо ви хочете дізнатися більше, прочитайте статтю на Вікіпедії або ознайомтеся з конкретними прикладами в брошурі про техніках стиснення WebP .
Отже, як весь цей складний матеріал допоможе нам оптимізувати зображення? Повторимо: нам не потрібно винаходити нові методи стиснення. Однак нам потрібно знати про ключові аспекти питання: пікселях RGBA, глибині кольору і різних техніках оптимізації. Це необхідно, щоб продовжити розмову про растрових форматах.
Стиснення з втратами і без втрат
TL; DR
- З огляду на особливості людського зору, для зображень можна застосовувати стиснення з втратами.
- Для оптимізації зображення використовується стиснення з втратами і без втрат.
- Різниця в форматах зображень - це відмінності в тому, як і які алгоритми цих стиснень застосовуються для зменшення розміру ресурсу.
- Не існує найкращого формату або настройки якості, які підійшли б для всіх зображень. При поєднанні різних компресорів і ресурсів ми ніколи не отримаємо однаковий результат.
Для певних типів даних, наприклад вихідного коду сторінки або виконуваного файлу, вкрай важливо, щоб компресор не видаляв і не міняв первинну інформацію. Через зниклого або неправильного біта даних може бути повністю спотворено або знищено значення контенту файлу. Однак інші типи даних цілком можна передати в приблизному вигляді.
Через особливості людського зору ми можемо не помітити відсутність будь-якої інформації про кожному пікселі, наприклад ми не побачимо відмінності між деякими відтінками кольору. Тому ми можемо використовувати менше бітів для кодування деяких квітів і завдяки цьому зменшити розмір ресурсу. Таким чином, стандартна оптимізація зображення складається з двох основних етапів:
- Стиснення зображення [з втратами] (http://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями), при якому видаляються деякі дані пікселів.
- Стиснення зображення [без втрат] (http://en.wikipedia.org/wiki/Lossless_compression), при якому дані пікселів стискуються.
Виконувати перший крок необов'язково. Точний алгоритм залежить від певного формату зображення, проте врахуйте, що кожне зображення можна стиснути з втратою даних. Насправді, різниця між форматами зображень, наприклад GIF, PNG, JPEG і т. Д., Складається саме в комбінації різних алгоритмів стиснення даних з втратою і без втрат.
Як найкраще поєднувати стиснення з втратами і без втрат? Це залежить від самого зображення і інших умов, наприклад балансу між розміром файлу та шумами. Щоб отримати чітке деталізоване зображення, ви можете не застосовувати стиснення з втратами. Якщо ж для вас більше важливий розмір файлу, сміливо використовуйте цей метод оптимізації. Єдиного варіанти налаштувань для всіх зображень не існує. Ви самі повинні визначити бажаний результат і прийняти рішення.
При використанні стиснення з втратами, наприклад JPEG, ви зможете вибрати налаштування якості (на кшталт повзунка Зберегти для Web в Adobe Photoshop). Зазвичай це значення від 1 до 100, яке визначає застосування алгоритмів стиснення з втратами і без. Не бійтеся знижувати якість: часто зображення як і раніше добре виглядає, а розмір файлу стає значно менше.
Вибір формату зображення
TL; DR
- Виберіть відповідний стандартний формат: GIF, PNG або JPEG.
- Спробуйте встановити різні настройки для кожного формату (якість, розмір палітри і т. Д.) І виберіть найбільш підходящі.
- Для сучасних клієнтів додайте ресурси в форматах WebP і JPEG XR масштабовані зображення:
- Масштабування зображень - один з найбільш простих і ефективних методів оптимізації.
- Якщо ви використовуєте зображення великого розміру, користувач може завантажувати зайві дані.
- Reduce the number of unnecessary pixels by scaling your images to their display size Знизьте кількість непотрібних пікселів, зменшивши зображення до відображуваного розміру.
Крім алгоритмів стиснення з втратами і без втрат, в форматах зображення підтримуються інші функції, наприклад анімація і канал прозорості (альфа-канал). Таким чином, при виборі відповідного формату вам потрібно врахувати бажаний візуальний ефект і вимоги до сайту або додатком.
Формат Прозорість Анімація Браузер GIF Так Так Всі PNG Так Ні Всі JPEG Ні Ні Все JPEG XR Так Так IE WebP Так Так Chrome, Opera, Android
Існують три стандартних формату зображень: GIF, PNG і JPEG. Крім них деякі браузери підтримують нові формати WebP і JPEG XR, для яких доступно більше стиснення і додаткові можливості. Отже, який формат вибрати?
- Зображення повинно бути анімованим? Тоді вибирайте формат GIF.
- Колірна палітра GIF складається всього з 256 кольорів. Це недостатньо для більшості зображень. Крім того, формат PNG-8 краще стискає зображення з маленькою палітрою. Таким чином, вибирайте GIF, тільки якщо вам потрібно анімація.
- Потрібно зберегти всі дрібні деталі в найвищому дозволі? Використовуйте PNG.
- У форматі PNG не застосовується стиснення з втратою даних, не рахуючи вибору розміру палітри. Завдяки цьому зображення зберігається в найвищій якості, але важить набагато більше, ніж файли інших форматів. Використовуйте цей формат тільки там, де це необхідно.
- Якщо зображення складається з геометричних фігур, конвертуйте його в векторний (SVG-) формат!
- Уникайте тексту в зображеннях. Його не можна вибрати, знайти або збільшити. Якщо текст необхідний для створення дизайну, використовуйте веб-шрифти.
- Ви оптимізуєте фотографію, скріншот або зображення схожого типу? Використовуйте JPEG.
- В JPEG використовується комбінація стиснення з втратами і без втрат для зменшення розміру файлу. Щоб вибрати найкраще поєднання якості і розміру зображення, спробуйте встановити кілька рівнів якості JPEG.
Визначивши відповідний формат і його налаштування для всіх ресурсів, додайте додатковий варіант в WebP і JPEG XR. Це нові формати, які поки не підтримуються у всіх браузерах. Однак з їх допомогою може значно зменшити розмір файлу. Наприклад, WebP стискає зображення на 30% більше, ніж JPEG.
Оскільки WebP and JPEG XR можуть підтримуватися не в усіх браузерах, вам треба додати додаткову логіку в додатку або на сервери, щоб відправляти користувачеві відповідний ресурс.
оптимізація зображень
Зображення - ті ресурси, які часто займають багато місця на сторінці і важать найбільше. Завдяки їх оптимізації ми можемо значно зменшити кількість завантажуваних даних і поліпшити роботу сайту. Чим більше стисло зображення, тим менше пропускної здатності каналу займає скачування і тим швидше браузер зможе показати сторінку користувачеві.
Оптимізація зображень - це одночасно наука і мистецтво. Ми можемо назвати це мистецтвом, тому що ніхто не може дати певну відповідь, як найкраще стиснути конкретне зображення. Однак це і наука, адже в нашому розпорядженні є розроблені техніки і алгоритми, які можуть значно зменшити розмір ресурсу. Щоб вибрати оптимальні настройки для зображення, необхідно врахувати багато чинників: можливості формату, закодовані дані, якість, кількість пікселів і т. Д.
Видалення і заміна зображень
TL; DR
- Видаліть непотрібні зображення.
- При можливості застосовуйте ефекти CSS3.
- Використовуйте веб-шрифти замість кодування тексту в зображеннях.
Перш за все задайте собі питання: чи дійсно це зображення необхідно? Хороший дизайн повинен бути простим і не погіршувати продуктивність. Найкраще просто видалити непотрібне зображення, оскільки воно важить набагато більше байтів в порівнянні з HTML, CSS, JavaScript і іншими ресурсами на сторінці. При цьому одне зображення в потрібному місці може замінити довгий текст, тому вам потрібно самостійно знайти баланс і прийняти правильне рішення.
Після цього ви повинні перевірити, чи не можна досягти бажаного результату більш ефективним шляхом:
- Завдяки CSS-ефектів (градиентам, тіням і т. Д.) І CSS-анімації ви можете створити ресурси, які чітко виглядають при будь-якому дозволі і масштабі і важать набагато менше, ніж зображення.
- Веб-шрифти дозволяють використовувати красиві написи, зберігаючи можливість вибирати і шукати текст, а також змінювати його розмір. Завдяки цьому робота з вашим ресурсом стане ще зручніше.
Уникайте кодування тексту в зображенні. Красиві написи необхідні для якісного дизайну, просування бренду і зручної роботи з ресурсом, але текст в зображенні тільки заважає всьому цьому. Його не можна вибрати, знайти, збільшити, скопіювати, а також він погано виглядає на пристроях з високою роздільною здатністю. Звичайно, веб-шрифтів також потрібно оптимізація, але вони допоможуть уникнути перерахованих вище проблем. Для відображення тексту завжди вибирайте саме їх.
Векторні і растрові зображення
TL; DR
- Векторний формат відмінно підходить для зображень з геометричних фігур.
- Якість векторних зображень не залежить від масштабу і дозволу.
- Використовуйте растровий формат для складних зображень з безліччю нестандартних форм і деталей.
Якщо ви вирішили, що для досягнення результату вам слід використовувати саме зображення, виберіть для нього відповідний формат:
- В векторної графіки для відображення картинки використовуються лінії, точки і багатокутники.
- В бітових зображеннях індивідуальні значення кожного пікселя в прямокутній сітці кодуються, і на їх основі показується зображення.
У кожного формату є свої переваги і недоліки. Векторний формат ідеально підходить для зображень з простих геометричних фігур (наприклад, логотипів, тексту, значків і т. Д.). Вони залишаються чіткими при будь-якому дозволі і масштабі, тому використовуйте цей формат для великих екранів і ресурсів, які повинні бути показані в різних розмірах.
Однак векторні формати не підходять для складних зображень (наприклад, для фотографій). SVG-розмітки для опису будь-яких форм може стати занадто багато, але отримане зображення все одно буде виглядати нереалістично. В цьому випадку вам варто використовувати растровий формат зображень, наприклад GIF, PNG, JPEG або нові формати JPEG-XR і WebP.
Якість растрових зображень залежить від дозволу і масштабу: при збільшенні воно стає розмитим і розпадається на пікселі. В результаті вам може знадобитися зберегти кілька версій растрового зображення в різних дозволах.
Оптимізація для екранів з високою роздільною здатністю
TL; DR
- На екранах з високою роздільною здатністю один CSS-піксель складається з декількох екранних пікселів.
- У зображеннях високої роздільної здатності пікселів і байтів набагато більше, ніж в звичайних.
- Техніки оптимізації можна застосовувати до зображень будь-якого дозволу.
Говорячи про пікселі, слід розрізняти екранні і CSS-пікселі. CSS-піксель може відповідати одному або декільком екранним. Це зроблено для того, щоб на пристроях з великою кількістю екранних пікселів зображення було більш чітким і деталізованим.
Звичайно, на екранах з високою роздільною DPI (HiDPI) графіка виглядає дуже красиво. Однак, щоб добре виглядати у високій роздільній здатності, наші зображення повинні бути більш деталізованими. Але у нас є рішення: векторні формати ідеально підходять для цього завдання. Вони зберігають чіткість в будь-якому дозволі. Навіть якщо збільшаться витрати на отрисовку дрібних деталей, ми як і раніше використовуємо один незалежний від розміру екрана ресурс.
З іншого боку, з растровими зображеннями виникає набагато більше складнощів, тому що вони кодують дані зображення в кожному пікселі. Таким чином, чим вище число пікселів, тим більше розмір такого ресурсу. Як приклад розглянемо різницю між фотографіями розміром 100х100 CSS-пікселів:
Дозвіл екрану Всього пікселів Розмір файлу без стиснення (4 Б на пікс.) 1x 100 x 100 = 10 000 40 000 Б 2x 100 x 100 x 4 = 40 000 160 000 Б 3x 100 x 100 x 9 = 90 000 360 000 Б
Коли ми вдвічі збільшуємо дозвіл екрана, загальна кількість пікселів зростає відразу в чотири рази: в два рази по вертикалі і в два по горизонталі.
Підведемо підсумок. На екранах з великою роздільною здатністю графіка виглядають дуже привабливо, тому ви зможете створити гарне враження про вашому сайті. Однак для таких екранів потрібні зображення з високою роздільною здатністю. Вибирайте векторні формати, тому що вони чітко виглядають на будь-яких пристроях. Якщо необхідно використовувати растрових зображень, додайте кілька оптимізованих варіантів ресурсу (див. Далі).
Оптимізація векторних зображень
TL; DR
- SVG - це формат зображень на основі XML
- SVG-файли потрібно мініфіціровать для зменшення розміру.
- Стискайте SVG-файли за допомогою GZIP.
Всі сучасні браузери підтримують формат SVG (Scalable Vector Graphics). Це формат зображень на основі XML для двомірної графіки. Розмітку SVG можна вбудувати прямо в сторінку або на зовнішній ресурс. У свою чергу, файл SVG можна створити за допомогою будь-якого ПО для векторного малювання або вручну в текстовому редакторі.
<? Xml version = "1.0" encoding = "utf-8"?> <! - Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In. SVG Version: 6.00 Build 0) -> <svg version = "1.2" baseProfile = "tiny" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http : //www.w3.org/1999/xlink "x =" 0px "y =" 0px "viewBox =" 0 0 612 792 "xml: space =" preserve "> <g id =" XMLID_1 _ "> <g> <circle fill = "red" stroke = "black" stroke-width = "2" stroke-miterlimit = "10" cx = "50" cy = "50" r = "40" /> </ g> </ g > </ svg>
Приклад вище отрісовиваєт просту круглу форму з чорною кордоном і червоним тлом. Вона була експортована з Adobe Illustrator. Легко здогадатися, що вона містить безліч метаданих, наприклад інформацію про шари, коментарі і простору імен XML, які найчастіше не потрібні для отобраденія ресурсу в браузері. В результаті, слід мініфіціровать файли SVG за допомогою інструменту svgo .
Наприклад, svgo зменшує розмір наведеного вище файлу SVG на 58% з 470 до 199 Б. Крім того, оскільки SVG - це формат на основі XML, ми може застосувати стиснення GZIP для зменшення його розміру при передачі. Переконайтеся, що на вашому сервері налаштований стиснення SVG-ресурсів.
Оптимізація растрових зображень
TL; DR
- Растрове зображення - це сітка пікселів.
- У кожному пікселі закодована інформація про колір і прозорості.
- Щоб зменшити розмір зображення, компресори використовують різні методи для зниження кількості бітів на піксель.
Растрове зображення - це просто двомірна сітка окремих пікселів. Наприклад, зображення 100x100 пікселів - це послідовно з 10 000 пікселів. У кожному з пікселів містяться значення RGBA: червоного (R), зеленого (G) і синього (B) каналу, а також альфа-каналу, або каналу прозорості (A).
Браузер встановлює 256 значень (відтінків) для кожного каналу, які в пере рахунку займають 8 бітів на канал (2 ^ 8 = 256) і 4 байта на піксель (4 канали x 8 біт = 32 біта = 4 байта). Таким чином, знаючи розміри сітки, ми легко можемо обчислити розмір файлу:
- Зображення 100 x 100 пікс. складається з 10 000 пікселів
- 10 000 пікс. x 4 Б = 40 000 Б
- 40 000 Б / тисячі двадцять чотири = 39 КБ
^
Розмір Пікселі Розмір файлу 100 x 100 10 000 39 КБ 200 x 200 40 000 156 КБ 300 x 300 90 000 351 КБ 500 x 500 250 000 977 КБ 800 x 800 640 000 2500 КБ
Може здатися, що 39 КБ - це зовсім небагато для зображення розміром 100x100 пікселів. Однак при збільшенні розміру файл буде важити набагато більше, і на його скачування доведеться витратити багато часу і ресурсів. Зараз це зображення не стисло. Що можна зробити, щоб зменшити його розмір?
Один з найпростіших способів оптимізації зображення - знизити глибину кольору з 8 бітів на канал, вибравши палітру меншого розміру. Встановивши глибину в 8 бітів на канал, ми отримуємо 256 значень для каналу і 16 777 216 (2563) квітів. Може, варто зменшити палітру до 256 квітів? Тоді нам буде потрібно всього 8 біт для всіх каналів RGB і тільки 2 байта на піксель, а не 4, як раніше. Нам вдалося стиснути зображення в два рази!
Оптимізувавши дані в окремих пікселях, звернемо увагу на сусідні пікселі. Виявляється, колір таких пікселів на багатьох зображеннях, особливо на фотографіях, часто схожий. Завдяки цьому компресор може застосовувати дельта-кодування . Замість збереження окремих значення для кожного пікселя можна вказати тільки різницю між сусідніми пікселями. Якщо вони однакові, то дельта дорівнює нулю, і нам потрібно зберегти всього один біт. Але це ще не все!
Ми часто не помічаємо різниці в деяких відтінках, тому ми можемо оптимізувати зображення, зменшивши або збільшивши палітру для цих квітів. У кожного пікселя в двомірної сітці є кілька сусідів, тому ми можемо вдосконалити дельта-кодування. Сконцентруєтеся нема на безпосередніх сусідів пікселя, а на цілих блоках схожих кольорів і закодуйте їх за допомогою різних налаштувань.
Як ви бачите, оптимізація зображення стає все складніше і цікавіше. На цю тему ведуться наукові та комерційні дослідження, тому що зображення важать багато байтів, і розвивати нові техніки стиснення вигідно. Якщо ви хочете дізнатися більше, прочитайте статтю на Вікіпедії або ознайомтеся з конкретними прикладами в брошурі про техніках стиснення WebP .
Отже, як весь цей складний матеріал допоможе нам оптимізувати зображення? Повторимо: нам не потрібно винаходити нові методи стиснення. Однак нам потрібно знати про ключові аспекти питання: пікселях RGBA, глибині кольору і різних техніках оптимізації. Це необхідно, щоб продовжити розмову про растрових форматах.
Стиснення з втратами і без втрат
TL; DR
- З огляду на особливості людського зору, для зображень можна застосовувати стиснення з втратами.
- Для оптимізації зображення використовується стиснення з втратами і без втрат.
- Різниця в форматах зображень - це відмінності в тому, як і які алгоритми цих стиснень застосовуються для зменшення розміру ресурсу.
- Не існує найкращого формату або настройки якості, які підійшли б для всіх зображень. При поєднанні різних компресорів і ресурсів ми ніколи не отримаємо однаковий результат.
Для певних типів даних, наприклад вихідного коду сторінки або виконуваного файлу, вкрай важливо, щоб компресор не видаляв і не міняв первинну інформацію. Через зниклого або неправильного біта даних може бути повністю спотворено або знищено значення контенту файлу. Однак інші типи даних цілком можна передати в приблизному вигляді.
Через особливості людського зору ми можемо не помітити відсутність будь-якої інформації про кожному пікселі, наприклад ми не побачимо відмінності між деякими відтінками кольору. Тому ми можемо використовувати менше бітів для кодування деяких квітів і завдяки цьому зменшити розмір ресурсу. Таким чином, стандартна оптимізація зображення складається з двох основних етапів:
- Стиснення зображення [з втратами] (http://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями), при якому видаляються деякі дані пікселів.
- Стиснення зображення [без втрат] (http://en.wikipedia.org/wiki/Lossless_compression), при якому дані пікселів стискуються.
Виконувати перший крок необов'язково. Точний алгоритм залежить від певного формату зображення, проте врахуйте, що кожне зображення можна стиснути з втратою даних. Насправді, різниця між форматами зображень, наприклад GIF, PNG, JPEG і т. Д., Складається саме в комбінації різних алгоритмів стиснення даних з втратою і без втрат.
Як найкраще поєднувати стиснення з втратами і без втрат? Це залежить від самого зображення і інших умов, наприклад балансу між розміром файлу та шумами. Щоб отримати чітке деталізоване зображення, ви можете не застосовувати стиснення з втратами. Якщо ж для вас більше важливий розмір файлу, сміливо використовуйте цей метод оптимізації. Єдиного варіанти налаштувань для всіх зображень не існує. Ви самі повинні визначити бажаний результат і прийняти рішення.
При використанні стиснення з втратами, наприклад JPEG, ви зможете вибрати налаштування якості (на кшталт повзунка Зберегти для Web в Adobe Photoshop). Зазвичай це значення від 1 до 100, яке визначає застосування алгоритмів стиснення з втратами і без. Не бійтеся знижувати якість: часто зображення як і раніше добре виглядає, а розмір файлу стає значно менше.
Вибір формату зображення
TL; DR
- Виберіть відповідний стандартний формат: GIF, PNG або JPEG.
- Спробуйте встановити різні настройки для кожного формату (якість, розмір палітри і т. Д.) І виберіть найбільш підходящі.
- Для сучасних клієнтів додайте ресурси в форматах WebP і JPEG XR масштабовані зображення:
- Масштабування зображень - один з найбільш простих і ефективних методів оптимізації.
- Якщо ви використовуєте зображення великого розміру, користувач може завантажувати зайві дані.
- Reduce the number of unnecessary pixels by scaling your images to their display size Знизьте кількість непотрібних пікселів, зменшивши зображення до відображуваного розміру.
Крім алгоритмів стиснення з втратами і без втрат, в форматах зображення підтримуються інші функції, наприклад анімація і канал прозорості (альфа-канал). Таким чином, при виборі відповідного формату вам потрібно врахувати бажаний візуальний ефект і вимоги до сайту або додатком.
Формат Прозорість Анімація Браузер GIF Так Так Всі PNG Так Ні Всі JPEG Ні Ні Все JPEG XR Так Так IE WebP Так Так Chrome, Opera, Android
Існують три стандартних формату зображень: GIF, PNG і JPEG. Крім них деякі браузери підтримують нові формати WebP і JPEG XR, для яких доступно більше стиснення і додаткові можливості. Отже, який формат вибрати?
- Зображення повинно бути анімованим? Тоді вибирайте формат GIF.
- Колірна палітра GIF складається всього з 256 кольорів. Це недостатньо для більшості зображень. Крім того, формат PNG-8 краще стискає зображення з маленькою палітрою. Таким чином, вибирайте GIF, тільки якщо вам потрібно анімація.
- Потрібно зберегти всі дрібні деталі в найвищому дозволі? Використовуйте PNG.
- У форматі PNG не застосовується стиснення з втратою даних, не рахуючи вибору розміру палітри. Завдяки цьому зображення зберігається в найвищій якості, але важить набагато більше, ніж файли інших форматів. Використовуйте цей формат тільки там, де це необхідно.
- Якщо зображення складається з геометричних фігур, конвертуйте його в векторний (SVG-) формат!
- Уникайте тексту в зображеннях. Його не можна вибрати, знайти або збільшити. Якщо текст необхідний для створення дизайну, використовуйте веб-шрифти.
- Ви оптимізуєте фотографію, скріншот або зображення схожого типу? Використовуйте JPEG.
- В JPEG використовується комбінація стиснення з втратами і без втрат для зменшення розміру файлу. Щоб вибрати найкраще поєднання якості і розміру зображення, спробуйте встановити кілька рівнів якості JPEG.
Визначивши відповідний формат і його налаштування для всіх ресурсів, додайте додатковий варіант в WebP і JPEG XR. Це нові формати, які поки не підтримуються у всіх браузерах. Однак з їх допомогою може значно зменшити розмір файлу. Наприклад, WebP стискає зображення на 30% більше, ніж JPEG.
Оскільки WebP and JPEG XR можуть підтримуватися не в усіх браузерах, вам треба додати додаткову логіку в додатку або на сервери, щоб відправляти користувачеві відповідний ресурс.
оптимізація зображень
Зображення - ті ресурси, які часто займають багато місця на сторінці і важать найбільше. Завдяки їх оптимізації ми можемо значно зменшити кількість завантажуваних даних і поліпшити роботу сайту. Чим більше стисло зображення, тим менше пропускної здатності каналу займає скачування і тим швидше браузер зможе показати сторінку користувачеві.
Оптимізація зображень - це одночасно наука і мистецтво. Ми можемо назвати це мистецтвом, тому що ніхто не може дати певну відповідь, як найкраще стиснути конкретне зображення. Однак це і наука, адже в нашому розпорядженні є розроблені техніки і алгоритми, які можуть значно зменшити розмір ресурсу. Щоб вибрати оптимальні настройки для зображення, необхідно врахувати багато чинників: можливості формату, закодовані дані, якість, кількість пікселів і т. Д.
Видалення і заміна зображень
TL; DR
- Видаліть непотрібні зображення.
- При можливості застосовуйте ефекти CSS3.
- Використовуйте веб-шрифти замість кодування тексту в зображеннях.
Перш за все задайте собі питання: чи дійсно це зображення необхідно? Хороший дизайн повинен бути простим і не погіршувати продуктивність. Найкраще просто видалити непотрібне зображення, оскільки воно важить набагато більше байтів в порівнянні з HTML, CSS, JavaScript і іншими ресурсами на сторінці. При цьому одне зображення в потрібному місці може замінити довгий текст, тому вам потрібно самостійно знайти баланс і прийняти правильне рішення.
Після цього ви повинні перевірити, чи не можна досягти бажаного результату більш ефективним шляхом:
- Завдяки CSS-ефектів (градиентам, тіням і т. Д.) І CSS-анімації ви можете створити ресурси, які чітко виглядають при будь-якому дозволі і масштабі і важать набагато менше, ніж зображення.
- Веб-шрифти дозволяють використовувати красиві написи, зберігаючи можливість вибирати і шукати текст, а також змінювати його розмір. Завдяки цьому робота з вашим ресурсом стане ще зручніше.
Уникайте кодування тексту в зображенні. Красиві написи необхідні для якісного дизайну, просування бренду і зручної роботи з ресурсом, але текст в зображенні тільки заважає всьому цьому. Його не можна вибрати, знайти, збільшити, скопіювати, а також він погано виглядає на пристроях з високою роздільною здатністю. Звичайно, веб-шрифтів також потрібно оптимізація, але вони допоможуть уникнути перерахованих вище проблем. Для відображення тексту завжди вибирайте саме їх.
Векторні і растрові зображення
TL; DR
- Векторний формат відмінно підходить для зображень з геометричних фігур.
- Якість векторних зображень не залежить від масштабу і дозволу.
- Використовуйте растровий формат для складних зображень з безліччю нестандартних форм і деталей.
Якщо ви вирішили, що для досягнення результату вам слід використовувати саме зображення, виберіть для нього відповідний формат:
- В векторної графіки для відображення картинки використовуються лінії, точки і багатокутники.
- В бітових зображеннях індивідуальні значення кожного пікселя в прямокутній сітці кодуються, і на їх основі показується зображення.
У кожного формату є свої переваги і недоліки. Векторний формат ідеально підходить для зображень з простих геометричних фігур (наприклад, логотипів, тексту, значків і т. Д.). Вони залишаються чіткими при будь-якому дозволі і масштабі, тому використовуйте цей формат для великих екранів і ресурсів, які повинні бути показані в різних розмірах.
Однак векторні формати не підходять для складних зображень (наприклад, для фотографій). SVG-розмітки для опису будь-яких форм може стати занадто багато, але отримане зображення все одно буде виглядати нереалістично. В цьому випадку вам варто використовувати растровий формат зображень, наприклад GIF, PNG, JPEG або нові формати JPEG-XR і WebP.
Якість растрових зображень залежить від дозволу і масштабу: при збільшенні воно стає розмитим і розпадається на пікселі. В результаті вам може знадобитися зберегти кілька версій растрового зображення в різних дозволах.
Оптимізація для екранів з високою роздільною здатністю
TL; DR
- На екранах з високою роздільною здатністю один CSS-піксель складається з декількох екранних пікселів.
- У зображеннях високої роздільної здатності пікселів і байтів набагато більше, ніж в звичайних.
- Техніки оптимізації можна застосовувати до зображень будь-якого дозволу.
Говорячи про пікселі, слід розрізняти екранні і CSS-пікселі. CSS-піксель може відповідати одному або декільком екранним. Це зроблено для того, щоб на пристроях з великою кількістю екранних пікселів зображення було більш чітким і деталізованим.
Звичайно, на екранах з високою роздільною DPI (HiDPI) графіка виглядає дуже красиво. Однак, щоб добре виглядати у високій роздільній здатності, наші зображення повинні бути більш деталізованими. Але у нас є рішення: векторні формати ідеально підходять для цього завдання. Вони зберігають чіткість в будь-якому дозволі. Навіть якщо збільшаться витрати на отрисовку дрібних деталей, ми як і раніше використовуємо один незалежний від розміру екрана ресурс.
З іншого боку, з растровими зображеннями виникає набагато більше складнощів, тому що вони кодують дані зображення в кожному пікселі. Таким чином, чим вище число пікселів, тим більше розмір такого ресурсу. Як приклад розглянемо різницю між фотографіями розміром 100х100 CSS-пікселів:
Дозвіл екрану Всього пікселів Розмір файлу без стиснення (4 Б на пікс.) 1x 100 x 100 = 10 000 40 000 Б 2x 100 x 100 x 4 = 40 000 160 000 Б 3x 100 x 100 x 9 = 90 000 360 000 Б
Коли ми вдвічі збільшуємо дозвіл екрана, загальна кількість пікселів зростає відразу в чотири рази: в два рази по вертикалі і в два по горизонталі.
Підведемо підсумок. На екранах з великою роздільною здатністю графіка виглядають дуже привабливо, тому ви зможете створити гарне враження про вашому сайті. Однак для таких екранів потрібні зображення з високою роздільною здатністю. Вибирайте векторні формати, тому що вони чітко виглядають на будь-яких пристроях. Якщо необхідно використовувати растрових зображень, додайте кілька оптимізованих варіантів ресурсу (див. Далі).
Оптимізація векторних зображень
TL; DR
- SVG - це формат зображень на основі XML
- SVG-файли потрібно мініфіціровать для зменшення розміру.
- Стискайте SVG-файли за допомогою GZIP.
Всі сучасні браузери підтримують формат SVG (Scalable Vector Graphics). Це формат зображень на основі XML для двомірної графіки. Розмітку SVG можна вбудувати прямо в сторінку або на зовнішній ресурс. У свою чергу, файл SVG можна створити за допомогою будь-якого ПО для векторного малювання або вручну в текстовому редакторі.
<? Xml version = "1.0" encoding = "utf-8"?> <! - Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In. SVG Version: 6.00 Build 0) -> <svg version = "1.2" baseProfile = "tiny" id = "Layer_1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http : //www.w3.org/1999/xlink "x =" 0px "y =" 0px "viewBox =" 0 0 612 792 "xml: space =" preserve "> <g id =" XMLID_1 _ "> <g> <circle fill = "red" stroke = "black" stroke-width = "2" stroke-miterlimit = "10" cx = "50" cy = "50" r = "40" /> </ g> </ g > </ svg>
Приклад вище отрісовиваєт просту круглу форму з чорною кордоном і червоним тлом. Вона була експортована з Adobe Illustrator. Легко здогадатися, що вона містить безліч метаданих, наприклад інформацію про шари, коментарі і простору імен XML, які найчастіше не потрібні для отобраденія ресурсу в браузері. В результаті, слід мініфіціровать файли SVG за допомогою інструменту svgo .
Наприклад, svgo зменшує розмір наведеного вище файлу SVG на 58% з 470 до 199 Б. Крім того, оскільки SVG - це формат на основі XML, ми може застосувати стиснення GZIP для зменшення його розміру при передачі. Переконайтеся, що на вашому сервері налаштований стиснення SVG-ресурсів.
Оптимізація растрових зображень
TL; DR
- Растрове зображення - це сітка пікселів.
- У кожному пікселі закодована інформація про колір і прозорості.
- Щоб зменшити розмір зображення, компресори використовують різні методи для зниження кількості бітів на піксель.
Растрове зображення - це просто двомірна сітка окремих пікселів. Наприклад, зображення 100x100 пікселів - це послідовно з 10 000 пікселів. У кожному з пікселів містяться значення RGBA: червоного (R), зеленого (G) і синього (B) каналу, а також альфа-каналу, або каналу прозорості (A).
Браузер встановлює 256 значень (відтінків) для кожного каналу, які в пере рахунку займають 8 бітів на канал (2 ^ 8 = 256) і 4 байта на піксель (4 канали x 8 біт = 32 біта = 4 байта). Таким чином, знаючи розміри сітки, ми легко можемо обчислити розмір файлу:
- Зображення 100 x 100 пікс. складається з 10 000 пікселів
- 10 000 пікс. x 4 Б = 40 000 Б
- 40 000 Б / тисячі двадцять чотири = 39 КБ
^
Розмір Пікселі Розмір файлу 100 x 100 10 000 39 КБ 200 x 200 40 000 156 КБ 300 x 300 90 000 351 КБ 500 x 500 250 000 977 КБ 800 x 800 640 000 2500 КБ
Може здатися, що 39 КБ - це зовсім небагато для зображення розміром 100x100 пікселів. Однак при збільшенні розміру файл буде важити набагато більше, і на його скачування доведеться витратити багато часу і ресурсів. Зараз це зображення не стисло. Що можна зробити, щоб зменшити його розмір?
Один з найпростіших способів оптимізації зображення - знизити глибину кольору з 8 бітів на канал, вибравши палітру меншого розміру. Встановивши глибину в 8 бітів на канал, ми отримуємо 256 значень для каналу і 16 777 216 (2563) квітів. Може, варто зменшити палітру до 256 квітів? Тоді нам буде потрібно всього 8 біт для всіх каналів RGB і тільки 2 байта на піксель, а не 4, як раніше. Нам вдалося стиснути зображення в два рази!
Оптимізувавши дані в окремих пікселях, звернемо увагу на сусідні пікселі. Виявляється, колір таких пікселів на багатьох зображеннях, особливо на фотографіях, часто схожий. Завдяки цьому компресор може застосовувати дельта-кодування . Замість збереження окремих значення для кожного пікселя можна вказати тільки різницю між сусідніми пікселями. Якщо вони однакові, то дельта дорівнює нулю, і нам потрібно зберегти всього один біт. Але це ще не все!
Ми часто не помічаємо різниці в деяких відтінках, тому ми можемо оптимізувати зображення, зменшивши або збільшивши палітру для цих квітів. У кожного пікселя в двомірної сітці є кілька сусідів, тому ми можемо вдосконалити дельта-кодування. Сконцентруєтеся нема на безпосередніх сусідів пікселя, а на цілих блоках схожих кольорів і закодуйте їх за допомогою різних налаштувань.
Як ви бачите, оптимізація зображення стає все складніше і цікавіше. На цю тему ведуться наукові та комерційні дослідження, тому що зображення важать багато байтів, і розвивати нові техніки стиснення вигідно. Якщо ви хочете дізнатися більше, прочитайте статтю на Вікіпедії або ознайомтеся з конкретними прикладами в брошурі про техніках стиснення WebP .
Отже, як весь цей складний матеріал допоможе нам оптимізувати зображення? Повторимо: нам не потрібно винаходити нові методи стиснення. Однак нам потрібно знати про ключові аспекти питання: пікселях RGBA, глибині кольору і різних техніках оптимізації. Це необхідно, щоб продовжити розмову про растрових форматах.
Стиснення з втратами і без втрат
TL; DR
- З огляду на особливості людського зору, для зображень можна застосовувати стиснення з втратами.
- Для оптимізації зображення використовується стиснення з втратами і без втрат.
- Різниця в форматах зображень - це відмінності в тому, як і які алгоритми цих стиснень застосовуються для зменшення розміру ресурсу.
- Не існує найкращого формату або настройки якості, які підійшли б для всіх зображень. При поєднанні різних компресорів і ресурсів ми ніколи не отримаємо однаковий результат.
Для певних типів даних, наприклад вихідного коду сторінки або виконуваного файлу, вкрай важливо, щоб компресор не видаляв і не міняв первинну інформацію. Через зниклого або неправильного біта даних може бути повністю спотворено або знищено значення контенту файлу. Однак інші типи даних цілком можна передати в приблизному вигляді.
Через особливості людського зору ми можемо не помітити відсутність будь-якої інформації про кожному пікселі, наприклад ми не побачимо відмінності між деякими відтінками кольору. Тому ми можемо використовувати менше бітів для кодування деяких квітів і завдяки цьому зменшити розмір ресурсу. Таким чином, стандартна оптимізація зображення складається з двох основних етапів:
- Стиснення зображення [з втратами] (http://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями), при якому видаляються деякі дані пікселів.
- Стиснення зображення [без втрат] (http://en.wikipedia.org/wiki/Lossless_compression), при якому дані пікселів стискуються.
Виконувати перший крок необов'язково. Точний алгоритм залежить від певного формату зображення, проте врахуйте, що кожне зображення можна стиснути з втратою даних. Насправді, різниця між форматами зображень, наприклад GIF, PNG, JPEG і т. Д., Складається саме в комбінації різних алгоритмів стиснення даних з втратою і без втрат.
Як найкраще поєднувати стиснення з втратами і без втрат? Це залежить від самого зображення і інших умов, наприклад балансу між розміром файлу та шумами. Щоб отримати чітке деталізоване зображення, ви можете не застосовувати стиснення з втратами. Якщо ж для вас більше важливий розмір файлу, сміливо використовуйте цей метод оптимізації. Єдиного варіанти налаштувань для всіх зображень не існує. Ви самі повинні визначити бажаний результат і прийняти рішення.
При використанні стиснення з втратами, наприклад JPEG, ви зможете вибрати налаштування якості (на кшталт повзунка Зберегти для Web в Adobe Photoshop). Зазвичай це значення від 1 до 100, яке визначає застосування алгоритмів стиснення з втратами і без. Не бійтеся знижувати якість: часто зображення як і раніше добре виглядає, а розмір файлу стає значно менше.
Вибір формату зображення
TL; DR
- Виберіть відповідний стандартний формат: GIF, PNG або JPEG.
- Спробуйте встановити різні настройки для кожного формату (якість, розмір палітри і т. Д.) І виберіть найбільш підходящі.
- Для сучасних клієнтів додайте ресурси в форматах WebP і JPEG XR масштабовані зображення:
- Масштабування зображень - один з найбільш простих і ефективних методів оптимізації.
- Якщо ви використовуєте зображення великого розміру, користувач може завантажувати зайві дані.
- Reduce the number of unnecessary pixels by scaling your images to their display size Знизьте кількість непотрібних пікселів, зменшивши зображення до відображуваного розміру.
Крім алгоритмів стиснення з втратами і без втрат, в форматах зображення підтримуються інші функції, наприклад анімація і канал прозорості (альфа-канал). Таким чином, при виборі відповідного формату вам потрібно врахувати бажаний візуальний ефект і вимоги до сайту або додатком.
Формат Прозорість Анімація Браузер GIF Так Так Всі PNG Так Ні Всі JPEG Ні Ні Все JPEG XR Так Так IE WebP Так Так Chrome, Opera, Android
Існують три стандартних формату зображень: GIF, PNG і JPEG. Крім них деякі браузери підтримують нові формати WebP і JPEG XR, для яких доступно більше стиснення і додаткові можливості. Отже, який формат вибрати?
- Зображення повинно бути анімованим? Тоді вибирайте формат GIF.
- Колірна палітра GIF складається всього з 256 кольорів. Це недостатньо для більшості зображень. Крім того, формат PNG-8 краще стискає зображення з маленькою палітрою. Таким чином, вибирайте GIF, тільки якщо вам потрібно анімація.
- Потрібно зберегти всі дрібні деталі в найвищому дозволі? Використовуйте PNG.
- У форматі PNG не застосовується стиснення з втратою даних, не рахуючи вибору розміру палітри. Завдяки цьому зображення зберігається в найвищій якості, але важить набагато більше, ніж файли інших форматів. Використовуйте цей формат тільки там, де це необхідно.
- Якщо зображення складається з геометричних фігур, конвертуйте його в векторний (SVG-) формат!
- Уникайте тексту в зображеннях. Його не можна вибрати, знайти або збільшити. Якщо текст необхідний для створення дизайну, використовуйте веб-шрифти.
- Ви оптимізуєте фотографію, скріншот або зображення схожого типу? Використовуйте JPEG.
- В JPEG використовується комбінація стиснення з втратами і без втрат для зменшення розміру файлу. Щоб вибрати найкраще поєднання якості і розміру зображення, спробуйте встановити кілька рівнів якості JPEG.
Визначивши відповідний формат і його налаштування для всіх ресурсів, додайте додатковий варіант в WebP і JPEG XR. Це нові формати, які поки не підтримуються у всіх браузерах. Однак з їх допомогою може значно зменшити розмір файлу. Наприклад, WebP стискає зображення на 30% більше, ніж JPEG.
Оскільки WebP and JPEG XR можуть підтримуватися не в усіх браузерах, вам треба додати додаткову логіку в додатку або на сервери, щоб відправляти користувачеві відповідний ресурс.
- Деякі мережі доставки контенту Надаються послуги з оптімізації збережений, в тому чіслі Надання файлів в JPEG XR и WebP.
- Деякі інструменти з відкрітім кодом, например PageSpeed для Apache и Nginx, автоматично віробляють оптімізацію, превращение и доставку відповідніх ресурсов.
- Ви можете Додати Додатковий логіку програми, щоб візначіті клієнт и его підтрімувані формати, а потім Відправити Оптимальний варіант ресурсу.
Зверніть увагу, що якщо ви використовуєте Webview для відтворення контенту в нативное додатку, тоді ви можете повністю управляти клієнтом і використовувати тільки WebP. У додатках Facebook, Google+ і т. Д. Використовуються саме WebP-ресурси, так як вони дійсно підвищують продуктивність. Щоб дізнатися більше про це форматі, подивіться презентацію WebP: Deploying Faster, Smaller, and More Beautiful Images від Google I / O 2013.
Інструменти і вибір параметрів
Немає єдиного ідеального формату, інструменту або алгоритму оптимізації, який би підійшов би для всіх зображень. Щоб отримати найкращий результат, ви повинні вибрати формат і його параметри в залежності від контенту, а також візуальних і технічних вимог.
інструмент Опис gifsicle створює і оптимізує GIF-зображення jpegtran оптимізує JPEG-зображення optipng стискає PNG без втрат pngquant стискає PNG з втратами
Не бійтеся експериментувати з параметрами компресорів. Встановіть різні настройки якості, виберіть відповідний варіант і застосуєте його до інших схожих зображень на сайті. Але пам'ятайте: не всі графічні ресурси потрібно стискати одним і тим же методом!
Масштабування переданих зображень
TL; DR
Розмір зображення - це сума пікселів, помножена на число байтів, використовуваних для кодування кожного пікселя. Оптимізація зображення зводиться до зменшення цих двох складових.
Таким чином, один з найбільш простих і ефективних методів оптимізації - переконатися, що розмір відправляється зображення не більше, ніж його відображається розмір в браузері. Нічого складного, але багато сайтів роблять серйозну помилку. Вони розміщують великі ресурси, і браузеру доводиться самому масштабувати і відображати їх в більш низькій роздільній здатності. Крім усього іншого, це збільшує навантаження на процесор користувача.
Відправляючи зайві пікселі і надаючи браузеру самому масштабувати ресурс, ми втрачаємо можливість оптимізувати кількість байтів, потрібних для відтворення сторінки. Зверніть увагу, що при масштабуванні не тільки зменшується кількість пікселів, але і змінюється вихідний розмір зображення.
Початковий розмір відображається розмір Непотрібні пікселі 110 x 110 100 x 100 110 x 110 - 100 x 100 = 2100 410 x 410 400 x 400 410 x 410 - 400 x 400 = 8100 810 x 810 800 x 800 810 x 810 - 800 x 800 = 16100
Зверніть увагу, що у всіх трьох випадках відображається розмір всього лише на 10 пікселів менше, ніж вихідний. Однак чим більше початковий розмір зображення, тим більше зайвих даних доводиться кодувати і відправляти. Навіть якщо вам не вдасться встановити повний збіг вихідного і відображуваного розмірів, ви повинні максимально скоротити кількість непотрібних пікселів.
Список методів оптимізації
Оптимізація зображень - це одночасно наука і мистецтво. Ми можемо назвати це мистецтвом, тому що ніхто не може дати певну відповідь, як найкраще стиснути конкретне зображення. Однак це і наука, адже в нашому розпорядженні є розроблені техніки і алгоритми, які можуть значно зменшити розмір ресурсу.
Пам'ятайте про деякі радах і техніках, які допоможуть вам оптимізувати зображення:
- Вибирайте зображення в векторних форматах. Їх якість не залежить від дозволу і масштабу, тому вони підходять для великих екранів і різних типів пристроїв.
- Мініфіціруйте і стискайте SVG-ресурси. Багато графічні додатки додають XML-розмітку, яка часто містить непотрібні метадані. Її можна видалити. Переконайтеся, що на серверах налаштоване GZIP-стиснення для SVG-ресурсів.
- Вибирайте найбільш підходящі растрових форматів. Визначте необхідні вимоги до зображень і виберіть потрібний формат для кожного ресурсу.
- Пробуйте різні настройки якостей для растрових форматів. Не бійтеся знижувати якість: часто зображення як і раніше добре виглядає, а розмір файлу стає значно менше.
- Видаляйте непотрібні метадані. Багато растрові зображення містять зайву інформацію про ресурс: годинне, відомості про камеру і т. Д. Для їх видалення використовуйте відповідні інструменти.
- Масштабуйте зображення. Зменшуйте файли на сервері, щоб вихідний і відображається розміри були практично однакові. Зверніть особливу увагу на великі зображення. Якщо їх масштабує браузер, продуктивність вашого сайту значно знижується.
- Автоматизуйте. Використовуйте надійні інструменти і ПО, які будуть автоматично оптимізувати зображення на вашому сайті.
Lt;?
Encoding = "utf-8"?
Що можна зробити, щоб зменшити його розмір?
Може, варто зменшити палітру до 256 квітів?
Отже, як весь цей складний матеріал допоможе нам оптимізувати зображення?
Як найкраще поєднувати стиснення з втратами і без втрат?
Отже, який формат вибрати?
Зображення повинно бути анімованим?
Потрібно зберегти всі дрібні деталі в найвищому дозволі?
