- Онлайн-сервіси для оптимізації зображень
- Утиліти для оптимізації зображень
- Зведена таблиця
- Case study
Сьогодні ми знову будемо вести репортаж з поля бою, на якому веб-розробники ведуть боротьбу із зайвою вагою своїх картинок. І зараз ми розповімо про зброю проти великих розмірів - інструментах для оптимізації зображень. Ні для кого не секрет, що картинки люблять довго грузиться, але відмовитися від них, на жаль, ніяк не можна. При цьому, чомусь, багато хто забуває, що за допомогою оптимізації можливо отримати менший розмір при збереженні якості. Отже, приступимо.
В якості піддослідного кролика ми взяли зображення в форматі * .png вагою 122 Кбайт, яке було використано для анонса нашого доповіді на OSDN Conference 2013 . Під час оптимізації ми не змінювали ніяких параметрів додатків або онлайн-сервісів, якщо такі були доступні.
Онлайн-сервіси для оптимізації зображень
OptiPic - відмінне рішення для тих, кому потрібно стиснути зображення прямо на сайті, не проводячи при цьому їх вивантаження / завантаження. Модуль встановлюється прямо через FTP, працює на всіх популярних CMS і автоматично стискає все зображення на веб-ресурсі, помітно прискорюючи швидкість завантаження сторінок. Детальніше про це рішення можна почитати в нашому огляді .
До речі, цей же сервіс пропонує безкоштовне рішення зі стиснення зображень онлайн. І це найкращий результат серед всіх протестованих рішень.
Smush.it належить компанії Yahoo !, яка, до речі, також розвиває утиліту YSlow для аналізу швидкості завантаження сайту . Сервіс не має додаткових налаштувань, для його використання необхідно просто завантажити зображення зі свого комп'ютера або розмістити посилання на зображення, яке слід оптимізувати. Smush.it працює з GIF, JPEG і PNG, а розмір файлів обмежений 1 Мбайтом. Підтримується пакетна обробка.
Для WordPress є плагін WP Smush.it, який працює на базі даного сервісу. Познайомитися з ним і встановити його можна тут . Наше тестове зображення після обробки зменшилася в розмірі з 122 Кбайт до 76 Кбайт, тобто втратило 46 Кбайт або 38% від свого початкового розміру.
Kraken.io - ще один сервіс для зменшення розміру зображення без втрати якості. Є безкоштовна і платна версія . Остання від першої відрізняється тим, що нам стає доступний API, а також збільшується розмір і кількість зображень, які можна завантажувати. У безкоштовної версії є тільки веб-інтерфейс і діє обмеження в 1 Мбайт для кожного завантаження. Користувачеві доступно два режими - Lossless і Lossy. Використовуючи режим Lossy, можна максимально стиснути розмір зображення, але з деякою втратою якості. Сервіс працює з GIF, PNG, JPEG. Також користувачеві доступна пакетна обробка.
Крім того, в Chrome Store доступно розширення Kraken.io Image Optimizer , Яке оптимізує всі зображення на якій-небудь сторінці сайту. Просто заходимо на потрібну нам сторінку і запускаємо його, а на виході отримуємо схудлі на порядок зображення. Також є плагіни для Magento і WordPress .
Наше піддослідна зображення в режимі Lossless втратило 53 Кбайта або 43% і стало важити 69 Кбайт. А в режимі Lossy зображення на виході мало розмір 40 Кбайт, тобто воно схудло на 82 Кбайта або 67%. При цьому ми, по правді кажучи, не виявили втрат якості.
Compress PNG - це ще один онлайн-сервіс, який дозволяє зменшувати розмір зображення без втрати якості. Користувач може завантажити до 20 зображень, які по черзі будуть оброблені. Після завантаження можна додатково зменшити кількість квітів, отримавши в результаті файл ще меншого розміру. Сервіс працює з PNG. Також підтримуються JPG, BMP, ICO, GIF і JPG, які в автоматичному режимі конвертуються в PNG. Є версія сервісу, яка працює з JPG, чи не конвертуючи в PNG. Додатково вона дозволяє обробляти BMP і PNG, але автоматично перетворює їх в JPG.
Наше зображення після оптимізації став важити 40 Кбайт, тобто втратило 82 Кбайта або 67% від свого початкового розміру. Погодьтеся, що це прекрасний результат.
Утиліти для оптимізації зображень
RIOT (Radical Image Optimization Tool) - безкоштовний оптимізатор для ОС Windows. Користувач може обробляти свої зображення в автоматичному режимі або в ручному, налаштувавши дану утиліту більш тонко. Завантажити її можна з офіційного сайту , Крім того, тут ви знайдете це ж додаток у вигляді плагіна для The GIMP, IrfanView, XnView. RIOT підтримує PNG, GIF, JPEG, є пакетна обробка. Для того, щоб оптимізувати кілька зображень, виберіть у меню "Tools" пункт "Bath Optimizer ...". У цьому режимі можна додавати файли, каталоги і каталоги з підкаталогами.
Наш тестовий зразок після оптимізації за допомогою RIOT став важити 108 Кбайт, тобто втратив всього 14 Кбайт або 11%. Однак для досягнення більшого ефекту слід звернути увагу на ручний режим, який дозволяє змінювати безліч налаштувань.
PNGGauntlet - безкоштовна утиліта для оптимізації розміру зображень без втрати якості, яка працює в ОС Windows. Користувачеві доступний автоматично і ручний режим з великою кількістю налаштувань, яке допоможуть домогтися кращих результатів в боротьбі із зайвою вагою. Працює з форматами JPEG, GIF, TIFF, BMP, PNG, після оптимізації конвертуючи все в PNG.
Тестове зображення після оптимізації стало важити 72 Кбайта, втративши 50 Кбайт або 41% від свого початкового розміру.
ImageOptim - оптимізатор зображень для Mac OS X. Він абсолютно безкоштовний, скачати його можна на офіційному сайті , А коротка інструкція російською мовою доступна тут . Користувач може використовувати автоматичний режим або вибрати певний інструмент оптимізації. ImageOptim підтримує PNG, JPEG та GIF. До речі, офіційний сайт розробників підказує, що для Ubuntu можна використовувати безкоштовний оптимізатор Trimage .
Після оптимізації ми отримали зображення розміром 73 Кбайта, що втратило 49 Кбайт або 40%.
Зведена таблиця
Для наочності ми вирішили скласти невелику таблицю.
НазваВихідний розмір, КбайтНовий розмір, КбайтЗміна, КбайтЗміна,%Тип
OptiPic 122 37 85 -70 Онлайн-сервіс smush.it 122 76 46 -38 Онлайн-сервіс kraken.io (LOSSLESS) 122 69 53 -43 Онлайн-сервіс kraken.io (LOSSY) 122 40 82 -67 Онлайн-сервіс Compress PNG 122 40 82 -67 Онлайн-сервіс RIOT 122 108 14 -11 Windows PNGGauntlet 122 72 50 -41 Windows ImageOptim 122 73 49 -40 Mac OS X
Бажаємо вам легких зображень!
Case study
На закінчення - невелика історія. Одного разу, один хороший чоловік, який в той час був фрілансером-студентом, робив сайт одному клієнту. Дизайн був зроблений досить швидко, дизайн був хороший. Але через авралів вийшло так, що у студента не залишилося часу для того, щоб натягнути його на Joomla. Тому довелося його залити звичайною картинкою, а клікабельним зробити тільки меню.
На свій законний питання про те, чому з сайту не виходить копіювати текст і картинки, клієнт сам собі і відповів, що це напевно зроблено для того, щоб конкуренти не вкрали контент. Розробник охоче погодився на цю версію і підтвердив: "Ага, саме!". В такому стані сайт проіснував досить довго, поки покупець не вирішив самостійно змінювати текст і не почав задавати питання про панелі управління.
В результаті сайт таки довелося натягнути на Joomla, клієнт зміг змінювати свій текст в будь-який зручний йому час без перерв на обід, а студент отримав душевний спокій, оскільки текст клієнт змінював неймовірно часто і по всіх сторінках сайту, а перемальовування картинки з цього приводу було завданням вельми трудомісткою.
З вищевикладеного можна зробити два висновки.
1. Брехати негарно.
2. Якщо брешете і робите сайт-картинку, то хоча б зменшуйте розмір зображень за допомогою оптимізаторів, які були описані вище.
