Сёння мы зноў будзем весці рэпартаж з поля бою, на якім вэб-распрацоўшчыкі вядуць барацьбу з лішняй вагой сваіх малюнкаў. І зараз мы раскажам аб зброі супраць вялікіх памераў - інструментах для аптымізацыі малюнкаў. Ні для каго не сакрэт, што карцінкі любяць доўга грузіцца, але адмовіцца ад іх, на жаль, ніяк нельга. Пры гэтым, чамусьці, шмат хто забывае, што з дапамогай аптымізацыі магчыма атрымаць меншы памер пры захаванні якасці. Такім чынам, непасрэдна да справы.
У якасці паддоследнага труса мы ўзялі малюнак у фармаце * .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. Калі лжёте і робіце сайт-карцінку, то хаця б памяншайце памер малюнкаў з дапамогай аптымізатараў, якія былі апісаны вышэй.
