Як аптымізаваць выявы для сайта

1. Так як жа аптымізаваць выявы для сайта?
2. Ўтыліты аптымізацыі малюнкаў з графічным інтэрфейсам
3. ImageAlpha
4. JPEGmini
5. Мой Workflow і ImageOptim-CLI
6. Ўстаноўка ImageOptim-CLI
7. Запуск ImageOptim-CLI
8. Убудова для WordPress
9. заключэнне

Наша команда-партнер Artmisto

Думаю, што кожны ведае, што перад тым, як размясціць малюнак на сайце, яго трэба смасштабировать да патрабаванага памеру, а не заліваць адразу на сайт 2,5-мегабайтны tiff, задаючы памер потым толькі атрыбутамі width і height ў html або css.

Калі перад размяшчэннем малюнка для сайта аптымізаваць, то можна яшчэ больш знізіць аб'ём перадаваных дадзеных пры адкрыцці вашага сайта, і, такім чынам, павялічыць хуткасць яго адкрыцця. А гэта добра для вашых карыстальнікаў, якія ў такім разе не сыдуць з вашага сайта з-за занадта доўгага яго адкрыцця, што асабліва актуальна, улічваючы, што ўсё больш і больш трафіку генерится мабільнымі прыладамі. Таксама гэта добра для SEO, таму што, наколькі я ведаю, пры іншых роўных пашукавікі ўлічваюць хуткасць адкрыцця вашага сайта.

Калі вы яшчэ не ўпэўненыя, што малююнкі заслугоўваюць такой пільнай увагі, то паглядзіце на гэты цікавы графік, на якім адлюстравана сярэдняя колькасць байт, што перадаюцца пры адкрыцці старонкі сайта, з разбіўкай па тыпу кантэнту.

Аптымізацыя малюнкаў - гэта працэс, які прымяняе да выявы больш прыдатны алгарытм сціску, а таксама дазваляе пазбавіцца ад лішняй інфармацыі, якая захоўваецца ў малюнку, напрыклад мета-дадзеных, якія запісваюцца ў файл малюнка пры захаванні ў графічным рэдактары ці фотаапаратам пры здымцы.

Такім чынам, аптымізацыя малюнкаў памяншае аб'ём дадзеных, неабходны для захоўвання і перадачы малюнка (напрыклад, па сетцы).

Існуюць як lossy, так і lossless метады аптымізацыі.

На маю вопыту, нават пры выкарыстанні lossless аптымізацыі ў сярэднім атрымліваецца знізіць памер малюнка на 5-10%, а ў некаторых выпадках гэтая лічба ўзрастае да 15-25% і пры шанцаванні нават да 35%. Пагадзіцеся, што гэта даволі прыемны выйгрыш у аб'ёме дадзеных.

Калі ж скарыстацца ўтылітамі, якія выкарыстоўваюць lossy сціск, то можна выйграць у аб'ёме малюначкаў у некалькі разоў. Галоўнае, што, са слоў стваральнікаў гэтых утыліт, яны аўтаматычна выбіраюць такую ​​ступень сціску, каб страта якасці малюнка не была прыкметная воку, і можна не перажываць, што на малюнках з'явіцца зярністасць або якія-небудзь іншыя непажаданыя артэфакты.

Адкрыў малюнак у аптымізатараў, і бум! - малюнак стала важыць на некалькі дзясяткаў працэнтаў менш. Вось бы гэтак жа можна было худнець, так?

Так як жа аптымізаваць выявы для сайта?

Выкарыстоўваць для гэтага адпаведныя ўтыліты. Яны бываюць як у выглядзе дэсктопных прыкладанняў, так і ў выглядзе утыліт для каманднага радка. Але акрамя таго, што з CLI няпроста адразу разабрацца, так яны яшчэ і даюць не самы лепшы вынік у плане сціску. Таму я не буду іх тут разглядаць.

Таксама ёсць як універсальныя рашэнні для ўсіх трох тыпаў малюнкаў (png, jpеg, gif), так і тыя, што апрацоўваюць толькі png або jpeg фармат.

Ўтыліты аптымізацыі малюнкаў з графічным інтэрфейсам

ImageOptim

ImageOptim - гэта простая, эфектыўная і універсальная ўтыліта для аптымізацыі малюнкаў для Mac OS X.

Падтрымлівае ўсе неабходныя фарматы малюнкаў: png, jpg, gif. Выконвае lossless аптымізацыю.

ImageOptim адначасова соовмещает ў сабе лепшыя ўтыліты для аптымізацыі малюнкаў: PNGOUT , Zopfli , Pngcrush , AdvPNG , extended OptiPNG , JpegOptim , Jpegrescan, jpegtran і Gifsicle . Менавіта таму я не бачу сэнсу разглядаць іх паасобку, калі яны ўсё прадстаўленыя ў адной праграме, што нашмат зручней.

Калі ж вы па нейкіх прычынах карыстаецеся Windows, для вас існуе альтэрнатыва RIOT . Cам я гэтую ўтыліту не выкарыстоўваў, але выглядае яна нядрэнна.

ImageAlpha

ImageAlpha сціскае png файлы шляхам lossy сціску і канвертацыі 24-бітных PNG ў PNG8 з захаваннем альфа-канала (празрыстасці). Пры гэтым такія выявы падтрымліваюцца ў iOS, усімі браўзэрамі і нават у IE6.

Гэтая ўтыліта дазваляе выйграць больш за 30% ад першапачатковага аб'ёму малюнка, а страта якасці прыкметная толькі пры вельмі пільным позірку пад лупай.

На жаль, аналагі пад Windows мне не вядомыя.

JPEGmini

JPEGmini lossy аптымізатар jpeg малюнкаў, але пагаршэнне якасці пасля яго выкарыстання нават складаней заўважыць, чым пасля ImageAlpha. ёсць версія для Windows .

У яго ёсць толькі адзін недахоп - у адрозненне ад папярэдніх утыліт, якія бясплатныя і open source, JPEGmini платны. Праўда, у яго ёсць бясплатная Lite версія , Якая дазваляе апрацоўваць 20 файлаў у дзень.

Не забудзьцеся пасля ImageAlpha і JPEGmini прапусціць малюнак праз ImageOptim, каб зэканоміць яшчэ пару адсоткаў месцы.

Калі вы хочаце знайсці «больш лепшую» ўтыліту: параўнанне эфектыўнасці апісваных мной утыліт з іншымі папулярнымі аптымізатарамі малюнкаў.

Мой Workflow і ImageOptim-CLI

У аптымізацыі малюнкаў, акрамя бясспрэчных плюсаў, такіх як памяншэнне месца, неабходнага для іх захоўвання (што на вэб-сэрвэры далёка не лішняе), памяншэнне бескарыснага трафіку вашага вэб-сервера і паскарэнне адкрыцця вашых сайтаў, ёсць адзін вялікі недахоп: малюнка трэба аптымізаваць.

Гэта значыць, кожны раз, перад тым як выкласці малюнак на сайт, неабходна выканаць адно і тое ж спалучэнне дзеянняў: запусціць ImageAplpha або JPEGmini, адкрыць у ім малюнак, пачакаць выніку, потым прагнаць гэтую ж карцінку праз ImageOptim. А калі затым выява прыйшлося адрэдагаваць, то працэс давядзецца паўтарыць.

Усё гэта пачынае хутка і вельмі моцна раздражняць і, я б нават сказаў, бесить. Але, на шчасце, чалавек па імі Jamie Mason паклапаціўся пра гэтую праблему і абгарнуў ўсе тры утыліты ў AppleScript і Shell, так што можна апрацоўваць шмат файлаў за раз, выканаўшы ўсяго адну каманду.

Ўстаноўка ImageOptim-CLI

Калі ў сістэме ўсталяваны node.js (А дакладней пакетны менеджэр npm , Які ставіцца разам з node.js), то ўсталяваць ImageOptim-CLI вельмі проста, дастаткова выканаць у тэрмінале :

Калі ж у вас няма node.js, то ўстаноўка будзе выглядаць так:

1. адкрываем тэрмінал і спампоўваем ImageOptim-CLI: curl --output ~ / Downloads / imageoptim-cli.zip https://codeload.github.com/JamieMason/ImageOptim-CLI/zip/1.7.10
2. Распакоўваецца ў тое месца, дзе хочам, каб ён ляжаў, напрыклад, у хатні каталог : Unzip ~ / Downloads / imageoptim-cli.zip -d ~ /
3. І дадаем imageOptim ў PATH, каб яго можна было запускаць, не паказваючы ўвесь шлях да ўтыліты цалкам: export PATH = $ PATH: ~ / ImageOptim-CLI-1.7.10 / bin

Запуск ImageOptim-CLI

Зараз каб аптымізаваць ўсе выявы ўнутры якой-небудзь дырэкторыі, дастаткова выканаць:
imageOptim -j -a -d ~ / Sites / MyProject, дзе

• ~ / Sites / MyProject - гэта шлях да вашаму праекту з малюначкамі,
• -j прапусціць малюнка праз JPEGmini,
• -a прапусціць малюнка праз AlphaImage,
• -d апрацаваць выявы ў дырэкторыі.

Хутчэй за ўсё, каб опцыя -j працавала і дадатак JPEGmini магло быць аўтаматызавана, неабходна дазволіць так званы «доступ для дапаможных прылад і праграм« (Enable access for assistive devices).

Для гэтага трэба адкрыць «Сістэмныя налады» (System Preferences), і калі ў вас Mac OS X Mavericks (10.9), выканаць наступныя дзеянні:

1. У «Сістэмных наладах» (System Preferences) клікнуць па «Абарона і бяспека» (Security & Privacy).
2. Перайсці на ўкладку «Канфідэнцыяльнасць» (Privacy).
3. У спісе справа выбраць пункт «Універсальны доступ» (Accessibility).
4. Пстрыкнуць па значку замка ў ніжнім левым куце акна. І затым ўвесці імя і пароль адміністратара.
5. І, нарэшце, паставіць галачку насупраць прыкладання Тэрмінал (Terminal).

Тым, хто не абнавіўся да Mavericks, прасцей - досыць адкрыць «Універсальны доступ» (Accessibility) адразу ў «Сістэмных наладах» (System Preferences). І паставіць галачку побач з «Дазволіць доступ для дапаможных прылад і праграм« (Enable access for assistive devices).

Цяпер самы просты спосаб аптымізаваць ўсе выявы вашага сайта:

1. Спампаваць пры дапамозе FTP кліента дырэкторыю з усімі малюнкамі, напрыклад, тэчку wp-content / uploads, калі ў вас сайт на WordPress.
2. Нацкаваць на гэтую тэчку ImageOptim-CLI, напрыклад так: imageOptim -j -a -d ~ / Sites / example.com / wp-content / uploads
3. Выпіць чаю, пакуль выявы апрацоўваюцца.
4. Пацешыцца таму, колькі месца было зэканомлена і загрузіць выявы назад.

Убудова для WordPress

Калі ў вас сайт працуе на WordPress, вы не імкнецеся да максімальна магчымай ступені сціску пры аптымізацыі і не хочаце разбірацца з усімі апісанымі вышэй ўтылітамі, то для вас ёсць рашэнне - убудова для WordPress EWWW Image Optimizer .

Сам я гэтым убудовай не карыстаюся, таму што аддаю перавагу абыходзіцца мінімумам убудоў. Плюс як максімаліст я імкнуся да максімальна магчымай ступені аптымізацыі малюнкаў :)

заключэнне

Аптымізацыя малюнкаў - гэта апрацоўка малюнкаў адмысловымі ўтылітамі, якія выдаляюць непатрэбныя метададзеныя і ўжываюць найлепшы алгарытм сціску да графічных файлаў, што ў выніку памяншае аб'ём дадзеных, які гэтыя выявы займаюць.

Аптымізацыя патрэбна для:

• паскарэння адкрыцця вашага сайта,
• эканоміі месца, займанага малюнкамі,
• памяншэння часу стварэння бэкапу сайта,
• эканоміі трафіку вэб-сервера.

Аптымізаваць выявы можна ўтылітамі: ImageOptim, ImageAlpha і JPEGMini, а можна выкарыстоўваць іх усё разам пры дапамозе ImageOptim-CLI.

падобнае