Стиснення картинок для web - огляд інструментів
Швидкість завантаження сайту є важливим фактором ранжування в пошукових системах. Більшість часу, необхідна завантаження сайту, посідає зображення. Тому стиснення картинок сприяє покращенню сайту.
У цій статті я розповім вам про графічні формати, онлайн сервіси TinyJPG і TinyPNG, програму для стиснення картинок FileOptimizer і результати проведених досліджень.
GIF, JPEG чи PNG?
Кожне зображення є файлом, закодованим у відповідному графічному форматі. У мережі Інтернет популярні GIF, JPEG та PNG. Кожен із них має плюси та мінуси.
- ФорматGIFвикористовує індексовану палітру до256-квітів. Використовуйте його для невеликих картинок (іконок). Особливість GIF – підтримка анімації, але розмір кінцевого файлу обмежує її застосування.
- Використовуйте форматJPEGдля збереження фотографій та картин з плавними переходами яскравості та кольору. В інших випадках велика ймовірність, отримати спотворення та втрату якості зображення.
- PNGзроблено спеціально для Інтернету. Особливість PNG – підтримка напівпрозорості та стиснення картинок без втрати якості, що відображається на розмірі файлу зображення.
Раді: вибираючи той чи інший формат, дивіться на кінцеву якість і розмір файлу конкретної картинки.
Стиснення картинок онлайн
Онлайн сервіси стиснення картинокTinyJPGтаTinyPNGстворені нідерландською студієюVoormedia. Їх простий і зрозумілий інтерфейс англійською мовою не викликає труднощів навіть у користувачів-початківців.
Пропонований онлайн сервісамиAPIдозволяє стискати картинки буквально нальоту. Стиснення до500картинокмісяць -безкоштовно. Для блогів на движку WordPress є і готовий плагін.
Якщо вам потрібен Photoshop плагін, доступний для Mac і Windows, доведеться розщедритися. Ціна питання –$50.
Онлайн сервіс TinyJPG використовує алгоритм стиснення картинокSmart JPEG, що дозволяє отримати оптимальний баланс між якістю та розміром фала.
За раз додається до20картинок, але розміром трохи більше5Мб кожна. Сервіс автоматично аналізує та вибирає оптимальний варіант стиснення, а результат скачується або зберігається на Dropbox.
Для перевірки сервісу взято фотографію, збережену у Photoshop у форматіJPEGз Hight якістю (60%) та встановленою галочкою «Optimized». Вихідний розмір файлу становив121 Кб. Після обробки картинки TinyJPG отриманий файл на6%менше оригіналу. Його розмір становив113 Кб.
Візуальне порівняння оригіналу та стисненої картинки показало гарний результат. Картинка стала навіть чіткішою, але артефактів сильно не побільшало.
Онлайн сервіс TinyPNG використовує алгоритм стиснення картинокSmart JPEG, що дозволяє отримати оптимальний баланс між якістю та розміром фала.
За раз додається до20картинок, але розміром трохи більше5Мб кожна. Сервіс автоматично аналізує та вибирає оптимальний варіант стиснення, а результат скачується або зберігається на Dropbox.
Для перевірки сервісу взято фотографію, збережену у Photoshop у форматіPNG-24з відключеною прозорістю. Вихідний розмір файлу становив727 Кб. Після обробки картинки TinyJPG отриманий файл на75%менше оригіналу. Його розмір склав179 Кб.
Візуальне порівняння оригіналу та стисненої картинки показало відносний результат. Скорочення кількості кольорів додало артефактів, але помітних лише за наближення.
Програма FileOptimizer для стиснення картинок
Вивчивши наявні програми для стиснення картинок, зупинився на FileOptimizer. Програма працює за тим же принципом, що і описані онлайн сервіси. Перебираючи способи стиснення картинки, вона вибирає оптимальний варіант.
Примітка: FileOptimizer стискає файли без втрати якості різних форматів: 3GP, .APNG, .BMP, .CHM, .CSS, .DOC, .EPUB, .FB2, .GIF, .HTML, .ICO, . JAR, .JPEG, .JPG, .JS, .MP3, .MP4, .PDF, .PNG, .PSD, .SVG, .SWF, .TIF, .TIFF, .ZIP і т.д.
Стиснення зображень у програмі FileOptimizer
Користуватись програмою одне задоволення. Вам не потрібно налаштовувати FileOptimizer. Все вже настроєно оптимальним чином. Тому залишилося виконати такі найпростіші дії:
- Клацніть «Add files…» і (у вікні) виберіть файли для стиснення.
- Клацніть «Optimize all files» і дочекайтеся, коли статус у стовпці «Status» доданих до списку файлів зміниться на «Done» (з англ.зроблено) .
Примітка: оригінальні файли перезаписуються стислими файлами. Стиснення JPEG файлів відбувається швидко, а ось PNG - вимагає часу. Результат не настільки вражає, як у випадку з онлайн-сервісами, але тут варто пам'ятати про якість.
Для перевірки програми взято фотографію, збережену у Photoshop у форматіJPEGз Hight якістю (60%) та встановленою галочкою «Optimized». Початковий розмір файлустановив121 Кб. Після обробки картинки в FileOptimizer отриманий файл4%менше оригіналу. Його розмір становив116 Кб.
Для перевірки програми взято фотографію, збережену у Photoshop у форматіPNG-24з вимкненою прозорістю. Вихідний розмір файлу становив727 Кб. Після обробки картинки в FileOptimizer отриманий файл5%менше оригіналу. Його розмір становив696 Кб.
Візуальне порівняння оригіналу та стисненої картинки показало найкращий із можливих результатів. Зображення не відрізняються навіть при найближчому розгляді, але розмір файлу менший.
Примітка: Google онлайн сервіс аналізу сайтів PageSpeed Insights вважає картинки стислі в FileOptimizer прийнятними. Та й якісні картинки повинні ранжуватися в пошукових системах краще.
TinyJPG і TinyPNG фактично один і той же сервіс, але доступний по різних доменів. Тобто. можна і туди, і туди, заливати PNG І JPEG файли скопом. Хороші стискалки, але було б зручніше софт. Плагін для Photoshop за $50 це ппц.
За замовчуванням PNG у кілька разів більший за JPG. Якщо картинка потрібна хорошої якості в JPG, потрібно завантажувати оригінальний розмір на сайт, а в статтю класти мініатюру.
Це набагато простіше і краще, ніж стискати PNG і як написано у статті - це не дає сильної економії:
Початковий розмір файлу становив 727 Кб. Після обробки картинки в FileOptimizer отримано файл на 5% менше від оригіналу. Його розмір становив 696 Кб.
2Блокнот вебмайстраСтиснення PNG дало зменшення файлу більше ніж у JPEG. PNG дуже стискається! Але для фото, дійсно, краще за JPEG. А ось зі скріншотами я вибрав PNG, там JPEG програє. Тобто. у кожному разі треба дивитися окремо. Мініатюра ж, згоден, оптимальна для всіхформатів.
А який сенс стискати лише на 5%? Я може чогось не розумію. Я стискаю до розміру не більше 100 Кб, вручну іноді користуюся дитячим онлайн-сервісом fanstudio.ru, але там потрібно ще попрацювати над якістю. Там є функція автоматичного розміру для розміщення в інтернеті, можна задати свої параметри. Факт у тому, що якість втрачається. Але сервіс зручний. Спробувала використати TinyJPG – якість теж не хило знизилася. Якщо стискаю просто вручну в Paint, то якість особливо не страждає. А який оптимальний розмір картинки має бути взагалі?
2Сама ДобротаУ плані стиснення картинок потрібно знайти оптимальний варіант. Користувачам, а значить і пошукачам, важливо як розмір, так і якість картинки. Ви правильно відзначили - стискаючи TinyPNG або TinyJPG, картинка втрачає якість; помірно, але губиться. FileOptimizer стискає зображення без втрати якості. 5% це не мало! У прикладі це становило 31 Кб. HTML-код сторінки цієї статті важить 57 Кб.
2Васильтак, часто для скріншотів хороший PNG, а для фоток JPEG.
Хороший додаток до статті від Сергія Поповича в стилі lifehack. Виявляється в PageSpeed Insight є можливість не тільки проаналізувати веб-сторінку, але й завантажити її оптимізований варіант:
Я тисну в основному в програмі для скріншотів FSCapture, намагаюся робити не більше 30 Кб (не пам'ятаю чому саме ця цифра). Рідше користуюсь онлайн сервісами. Костянтин, до речі, хотів запитати – Ви не користувалися плагіном для WordPress – Seo by Squirrly. Було б цікаво дізнатися Вашу думку про нього, а також дізнатися чи не навантажує плагін завантаження і чи не конфліктує з All In One Seo Pack?
Щодо Seo by Squirrly – уперше чую. Я давно вже перейшов на Blogger і цим вирішив проблему з навантаженням. Звичайно,блог-платформа це завжди обмеження, та й від інших проблем він не застрахований, проте. Мене відверто задовбали всі ці ліміти. В іншому ж будь-який плагін це часто додаткові запити до БД, причому в безмірній кількості. Навіть All In One Seo Pack працює далеко не оптимально і я, була річ, його якось оптимізував, що значно знизило кількість запитів.
https://compressor.io/ - стислі зображення підходять Гуглу