Аптымізацыя малюнкаў для сайта: пакетная апрацоўка з дапамогай jpegtran | optipng | pngout

1. перадумовы
2. Выкарыстоўваем рэкамендацыі для малюнкаў
3. структура архіва
4. Кароткая інструкцыя па працы
5. дапаўненні
6. x64 (aka andi)

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

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

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

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

Даўным-даўно, калі Пуцін не здаваўся вечным, рабіў я свой першы вэб-партал медыцынскай накіраванасці. Трэба было размясціць карцінкі да атласе. Відавочна, што анатамічны будынак цела без малюнкаў прадставіць даволі складана, і тым больш апісаць словамі. І я, не мудрагелячы, заліў карцінкі ў bmp (фармат без сціску). Ці трэба казаць, што важылі яны дофигища? Больш за тое, частка браўзэраў не ўмела паказваць такія карцінкі.

Дык навошта ж аптымізаваць выявы? Просты прыклад - фота. Сучасныя тэлефоны маюць камеры ў 8, 12 і нават больш, мегапікселяў. 12 МП адпавядае малюнку ў 4000 × 3000 пікселяў. У залежнасці ад складанасці сцэны, гэта адпавядае памеру 2-5 мегабайт, і нават больш. Дзясятак фота - і памер старонкі моцна раздзімаецца. Малюнак ўпісваецца ў вобласць кантэнту, значыць браўзэр павінен спачатку ўсё спампаваць, отмасштабировать і толькі потым вывесці. для слабых працэсараў або пры невялікім памеры аператыўнай памяці - катастрофа.

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

Хтосьці запярэчыць, што сэнсу ў гэтым ніякага, сучасныя CMS пры загрузцы малюнкаў аўтаматычна робяць паменшаныя копіі. Але ці ўсё размяшчаюць свае сайты на VPS або VIP-тарыфах? Загрузіць адно 12 МП малюнак можа і выйдзе, але для яго апрацоўкі PHP спатрэбіцца вылучыць 35+ мегабайт (у тэорыі, на справе больш) для захоўвання, а затым яшчэ немаведама колькі для стварэння паменшанай копіі. Танныя тарыфы адразу ўпруцца ў перавышэнне рэсурсаў. Добры хостер папросіць карыстальніка больш так не рабіць, дрэнны - праігнаруе, бо для яго важныя толькі грошы, а не працаздольнасць сэрвісаў.

І вось, мы вырашылі дзейнічаць правільна. Самі папярэдне памяншаем малюнка, пасля чаго заліваем на сайт. Так і рухавічку прасцей, і людзям. Всё? Не зусім.

Многія рэдактары захоўваюць зыходныя Чанк (мета-інфармацыя, часткі файла, не якія адносяцца да выявы), якія змяшчаюць дадатковую інфармацыю. Напрыклад, калі сфатаграфаваць нешта на тэлефон, перакінуць файл на комп, жмакнуть па ім правай клавішай і выбраць «Уласцівасці → Падрабязна», ўбачым дадзеныя па прыладзе: на якую камеру фатаграфавалі, вытрымку, ISO і іншае. Для карыстальніка гэтая інфармацыя бескарысная, значыць, ад яе можна пазбавіцца.

Ну падумаеш, адзін Чанк. Што там, куча інфармацыі ці што змяшчаецца? Уявіце сабе. Часам атрымліваеш малюнка, у якіх сотні кілабайт такіх дадзеных. Літаральна сёння, даслалі для размяшчэння лога памерам 584 КБ. Пры гэтым, карысная інфармацыя складала ўсяго 14 КБ! Як па мне, не зусім правільна прымушаць наведвальніка пампаваць 570 КБ зверху.

Давайце падвядзем прамежкавыя вынікі. Для таго, каб карыстальнікам сайта зрабіць добра, трэба:

1. Паменшыць памер малюнка. У дапамогу любы графічны рэдактар.
2. Выкінуць з файла непатрэбныя часткі. Па сутнасці, карыстачу патрэбна толькі карцінка.
3. Паспрабаваць дадаткова паменшыць памер малюнка.

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

А вось пункты 2 і 3 можна аддаць на разарванне спецыяльных праграмах. Софту для працы з выявамі мноства. Гугл рэкамендуе наступныя праграмы:

• jpegtran для малюнкаў фармату JPG.
• optipng і pngout для малюнкаў фармату PNG.

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

перадумовы

Год таму масава загаварылі пра сэрвіс PageSpeed ​​Insights ад Google. Па сутнасці, гэта рэкамендацыі пошукавага гіганта на тэму «як зрабіць добра». Проста убіце адрас сайта і атрымаеце спіс прапаноў па аптымізацыі. Там жа можна спампаваць ўжо аптымізаваныя рэсурсы, уключаючы выявы, для свайго сайта. Праўда, гэта актуальна толькі для правяранай старонкі.

Калі ў Вас ёсць сайт, абавязкова паглядзіце гэтую артыкул . Асабліва карысна тым, хто выкарыстоўваецца WordPress.

Выкарыстоўваем рэкамендацыі для малюнкаў

Накшталт проста: спампаваць названыя Гуглом праграмы і прагнаць ўсе наяўныя на сэрвэры файлы праз іх. Праблема ў тым, што дадзеныя ўтыліты кансольныя. Яны за раз прымаюць толькі 1 файл. Але мы ж не дарма ў мінулым артыкуле надалі час пакетным файлаў, праўда?

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

Спампаваць архіў (212 КБ)

структура архіва

У архіве ўтрымоўваецца папка [OptimizeImg]. Для пачатку працы распакуйце яе куды-небудзь. У мяне размешчана ў c: \ temp \ але гэта не прынцыпова. Галоўнае, каб шлях не утрымліваў клічнікі.

Далей. У гэтай тэчцы утрымліваецца падтэчка [uploads]. Сюды трэба змяшчаць файлы, якія патрабуюць апрацоўкі. Самае прыемнае, што можна запхнуць хоць структуру тэчак / файлаў.

Ёсць яшчэ 3 праграмы: jpegtran.exe | optipng.exe | pngout.exe - гэта тыя самыя ўтыліты, рэкамендуемыя Гуглом. Запампаваныя з адпаведных афіцыйных сайтаў / рэпазітароў. Калі сумняваецеся, ці проста хочаце абнавіць версію, запампуйце з даверанай крыніцы і заменіце наяўныя.

І, нарэшце, сэрца тулзы. Батнички:

• 1.bat
• 3.bat
• 3-go.bat
• 3-opti-to-out.bat
• 3-out-to-opti.bat

Першы файл - 1.bat - вобразы знайшлі структуру з [uploads]. Ствараюцца 3 дадатковыя папкі: [jpg_jpegtran] [png_optipng] [png_pngout] з апрацаванымі мінімізаваць файламі свайго тыпу (jpg - толькі * .jpg-файлы, аналагічна і з png).

3.bat паслядоўна запускае на выкананне тры пакетных файла:

• 3-go.bat практычна аналагічны 1.bat. Прапускае jpg / png файлы праз минимизаторы. Вынікам работы будуць 3 папкі (гл. Вышэй) з адпаведнымі малюнкамі.
• 3-opti-to-out.bat стварае тэчку [png_optipng-to-pngout], у якую пішуцца файлы, апрацаваныя optipng + pngout (менавіта ў такой паслядоўнасці).
• 3-out-to-opti.bat стварае тэчку [png_pngout-to-optipng], у якую пішуцца файлы, апрацаваныя pngout + optipng. Аналагічна папярэдняму, толькі ў іншай паслядоўнасці.

У прынцыпе, для нашых патрэб дастаткова толькі 1.bat. Пакетники 3x з'явіліся ў выніку пошукаў і памылак у працы папярэдняй версіі батника. Так атрымалася, што ў ходзе памылкі файлы для pngout браліся з дырэкторыі optipng. І якое ж было маё здзіўленне, калі запуск старой версіі выдаваў у 1.5 разы меншы памер, чым у абноўленым батнике. У выніку аказалася, што падвойная апрацоўка можа нядрэнна «доужать» карцінкі. Але гэта патрабуе амаль у 2 разы больш часу. Так што самі вырашайце, ці трэба яно.

Кароткая інструкцыя па працы

1. спампаваць архіў .
2. Распакаваць яго.
3. Зайсці ў свежераспакованную тэчку [OptimizeImg].
4. Усе файлы, якія патрабуюць заўсёды малыя, скапіяваць у тэчку [upload].
5. Запусціць 1.bat і чакаць. Калі файлаў шмат, і яны png, чакаць доўга.
6. Калі ў чорным акенцы з'явіцца паведамленне аб неабходнасці націснуць клавішу для працягу - усё гатова. Засталося ўзяць змесціва створаных тэчак і скапіяваць на хостынг па фтп, перезаписывая старыя файлы.

Для прыкладу. Хай у Вас блог на WordPress. Усе выявы захоўваюцца ў [/ wp-content / uploads /]. Заходзім у тэчку сайта (па фтп), заходзім у [wp-content] і проста капіюем [uploads] у аднайменную тэчку OptimizeImg. Запускаем 1.bat і чакаем. Пасля заканчэння працы содежимое [jpg_jpegtran] (заходзім туды!) Заліваем на сервер. На запыты аб наяўных файлах адказваем перазапісам. Аналагічны трук для png, толькі спачатку глядзім, якая папка - [png_optipng] або [png_pngout] - займае менш месцы, яго змесціва і заліваем.

Не трэба баяцца пашкодзіць астатнія файлы. Батники працуюць толькі з jpg / png, і ў новаствораны тэчкі пішуцца толькі выявы гэтых тыпаў.

Спадзяюся, камусьці будзе карысна. Поспехаў!

дапаўненні

1. Шлях да [OptimizeImg] не павінен утрымліваць клічнікаў! і працэнтаў%
2. Запускаць скрыпты ад імя адміністратара не трэба. Больш за тое, у гэтым выпадку яны могуць не працаваць!
3. ...

аўтар публікацыі

не ў сеткі 13 гадзін

x64 (aka andi)

Каментары: 2846 Публікацыі: 395 Рэгістрацыя: 2009/04/02