Як зберігати зображення для сайтів

1. Виберіть відповідний формат для зображень
2. Готуємо до публікації JPG
3. GIF і PNG-8
4. PNG-24
5. WebP
6. загальні рекомендації
7. висновок

Головний біль вебмастера - картинки. Пошукові системи хочуть, щоб картинки були легкими і швидко вантажилися, відвідувачі сайтів і соцмереж не хочуть дивитися на «потиск» пікселі і огидні артефакти стиснення. Як знайти компроміс між вимогами пошукових алгоритмів і людей? Ось кілька порад.

(Last Updated On: 27.10.2018)

Виберіть відповідний формат для зображень

Повнокольорові зображення, що включають в себе мільйони відтінків, можна зберігати лише в двох основних форматах: JPG і PNG-24. GIF і PNG-8 категорично не годяться: вони обидва працюють лише з обмеженою кількістю квітів (до 256 в залежності від колірної таблиці). І GIF, і PNG-8 ідеальні для збереження малюнків, креслень, або зображень, де використовується дуже обмежена палітра. Чи не фото!

• Особливість картинок в форматах GIF і PNG-8: на відміну від JPG і PNG-24, їх не варто масштабувати. Відразу втрачається чіткість, з'являються неприємні артефакти.
• Особливості JPG і PNG-24. PNG-24 варто вибрати, якщо потрібно максимально доступне якість незалежно від розміру. Ще одна відмінність цього формату - підтримка прозорості: можна, наприклад, видалити фон, щоб розмістити фрагмент фото на тому тлі, який вже є на сайті. Це зручно для розміщення складних логотипів в градієнтними квітами і безліччю колірних відтінків. У більшості випадків треба використовувати JPG.

Висновок. Якщо вам потрібно розмістити на сайті креслення, скан документа, малюнок - використовуйте GIF і PNG-8. В такому випадку ви отримаєте високу чіткість при крихітному вазі. Для завантаження фотографій на сайт використовуйте JPG. У соцмережі переважно завантажувати PNG-24, але про це - нижче.

Так виглядає фотографія, яку зберігають в одному з восьмибітних форматів Для підготовки фото для веб використовуйте професійне ПО. Я рекомендую Adobe Photoshop або його аналоги. Чому «Фотошоп»? Його модуль Save for Web дозволяє бачити, як саме псується картинка в міру посилення стиснення, і ви можете вибрати потрібне співвідношення між якістю і вагою картинки. У цьому ж вікні можна подивитися, як буде виглядати картинка на інших платформах.А тепер перейдемо до більш конкретних рекомендацій.

Готуємо до публікації JPG

Перше, що варто засвоїти: кожне збереження в форматі JPG збільшує кількість артефактів. Цей алгоритм стискає за рахунок усереднення однорідних пікселів. Чим більше стиснення - тим менше деталей, відтінків, тим більше виражені всім знайомі «квадратики». Зберігайте зображення в JPG для веб в самий останній момент, перед публікацією. До цього зберігайте картинку в одному з форматів без стиснення з втратами: PSD, TIFF, або навіть PNG-24.

До того, як зберігати зображення для веб, зменшіть дозвіл фото. Записані фотографії з ppi 300 або 240 (в залежності від налаштувань камери), а дисплеї (крім ретини) розуміють лише 72 ppi. Надмірне дозвіл збільшує вагу зображення без будь-яких візуальних переваг. Висока роздільна здатність потрібно тільки для друку.

Чи не зберігайте для публікації в інтернет фото з надмірною дозволом. Це збільшує розміри, але не дає ніяких переваг Ступінь стиснення JPG для публікації в web - 80% і більше (тобто 70, 60, 50% ...). Орієнтуйтеся на якість в першу чергу, але пам'ятайте: на сьогоднішній день граничний «вага» картинки, розміщеної на сторінці як ілюстрація - близько 250 кб. Дотримуйтеся цієї цифри.

Підпишіться на наш канал в Telegram, щоб не пропустити нові статті та рецепти!
@aromaesthetica

Видаляйте метатеги з картинок для веб: дані про автора, авторські права, інформація про камеру і т. Д. Вони значно збільшують «вага» картинки.

При збереженні поставте галочку в Галочка «Прогресивна розкладка». Цей алгоритм завантажує зображення за кілька проходів. Відвідувач сайту вже бачить завантажувати фотографії, яка в міру завантаження стає все більш детальної.

Чи варто включати в зображення колірний профіль? Мабуть, немає, якщо ви конвертувати фото в sRGB-1966. Браузери вміють працювати тільки з ним. А ось якщо ваше зображення збережено в одному з професійних форматів, з відображенням будуть проблеми. Сам по собі колірний профіль - крихітний текстовий файлик, інтегрований в контейнер із зображенням. Звичайно ж, він трохи збільшує вагу файлу, тому його краще зрізати разом з метатегами.

GIF і PNG-8

Різниця між цими форматами - в ліцензуванні, і нашої теми це не стосується. Крім того, GIF вміє працювати з анімацією, а PNG-8 - немає. Якщо ваше зображення містить обмежену кількість кольорів (від 1 до 256), а також області прозорого - зберігайте в одному з цих форматів.

Старовинна гравюра містить мінімум кольорів і побудована на штрихах. оптимальний формат - GIF або PNG-8 При збереженні GIF і PNG-8 «Фотошоп» пропонує кілька опцій. Перша: вибрати кількість квітів. Більше квітів - більше вага. Дивіться, щоб не йшло якість і не губилася різкість, і орієнтуйтеся на мінімальну за розмірами палітру.

Якщо зображення не потрібна прозорість - зніміть відповідну галочку.

У деяких випадках в індексовані зображення треба підмішати трохи «шуму», щоб приховати артефакти. Це використовується для збереження GIF і PNG-8, що створюються з фотографій і відео (якщо мова про GIF). «Фотошоп» пропонує кілька типів такого шуму, вибирайте відповідний.

Нагадаю: GIF і PNG-8 не варто масштабувати! Зберігайте їх в тому розмірі, в якому вони повинні відображатися на моніторі.

PNG-24

У цей форматі якість зберігається, тому що стиск не передбачено. Підтримується прозорість (альфа-канал).

Ніколи не публікуйте на сайті фотографії в форматі PNG-24. Вони в кілька разів «важче» фото в форматі JPG. Розмір завантаження зображення прямо впливає на швидкість завантаження сторінки, і файл у форматі PNG-25 «важить» приблизно в 4-8 разів більше цього ж зображення у форматі JPEG без видимого погіршення якості (з показником стиснення 80%).

Якщо ви завантажуєте фото в соцмережі (Facebook, Instagram, Vkontakte), варто вибрати PNG-24. Причина в тому, що при завантаженні зображення все одно будуть конвертовані та стиснуті соцмережами, а значить, якість фото постраждає ще раз. Ви ніяк не можете контролювати ступінь стиснення, можна лише спробувати знизити ризики. Для цього і потрібен PNG-24 як формат без втрати якості. У всіх інших випадках використовуйте більш підходящі формати.

WebP

Цей формат зображень для публікації в інтернет був розроблений Google майже 10 років тому. Головна його перевага - він стискає файли без втрати якості в півтора рази сильніше, ніж JPEG, та ще й підтримує прозорість. Він може замінити всі актуальні формати зображень для веб. Здавалося б, чому б не використати його?

Головна проблема формату WebP (читається як «веппі»): його досі читають далеко не всі браузери. Зараз, в 2018, з ним справляються тільки Chrome і Opera, а Microsoft Explorer, Microsoft Edge, Firefox і Safari його не розуміють. Тому вам доведеться передбачити підміну зображень цього формату на зображення традиційних для інтернет форматів. А це рівно в два рази більше картинок, які доведеться завантажувати на сервер.

Ще одна проблема: актуальна реалізація роботи з цим форматом має на увазі і конвертацію «нальоту», значно ускладнює вихідний хід веб-сторінки. Іншими словами, співвідношення «текст / код html» змінюється в сторону html. Це погано для пошукової оптимізації. Ось і виходить: з одного боку, картинки швидше вантажаться, але не кожним браузером, і треба тримати картинки в двох форматах. З іншого боку, сторінка стає важче.

У формату зображень для інтернет WebP може бути велике майбутнє: він дійсно сильніше стискає картинки. Фото з великим ступенем стиснення стає трохи більш каламутним, інші артефакти стиснення не виявлені. Але використовувати цей формат зараз - тема для роздумів вебмастера. Особисто я поки використовувати цей формат не готовий.

загальні рекомендації

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

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

Не ставте масштабовані зображення. Потрібно звернутися до веб-майстра, який розмір по ширині і висоті зображення потрібен для сайту, і зберігайте ваше фото для публікації саме в цьому розмірі. CMS можуть масштабувати зображення автоматично, але в результаті сторінка буде важити набагато більше, ніж треба. Це погано позначається на швидкодії сайту, і як наслідок - на його місце в пошуковій видачі. Або, як варіант, CMS розтягне картинку до потрібного розміру, виглядає це погано.

Ті самі «квадратики», артефакти алгоритму стиснення. Вам подобається така якість? Не рекомендую автоматичні «оптимізатори» картинок за рекомендаціями Google Speed ​​Test. Так, вони драматично зменшать вагу зображень, але пошкодуйте очі своїх відвідувачів. Та й власний бізнес: якість візуального контенту впливає на сприйняття сайту і конверсію. Гірше сприйняття - менше грошей у вашу кишеню. Краще витратьте трохи часу на підготовку повноцінного контенту, воно того варто.

висновок

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

резюме

Назва статті

Як зберігати зображення для сайтів

опис

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

Автор

Віктор Петров

видавець

aromaesthetica.ru