Аптымізацыя і сціск png, jpg, jpeg без страты якасці

Навошта аптымізаваць выявы

У цяперашні стагоддзе мабільных тэхналогій аптымізацыя малюначкаў у фарматах PNG і JPG, JPEG стала зноў актуальная, як гэта было актуальным у тыя часы, калі інтэрнэт толькі ўваходзіў у наша жыццё і быў паўсюдна павольным і диалапным. Мабільны інтэрнэт, вядома, не зусім карэктна параўноўваць з дыялап, але месцамі, дзе сувязь дрэнная, там і хуткасць доступу даволі маленькая. Ды і ў тыя часы карыстачу было няма куды дзявацца, і даводзілася чакаць загрузкі старонкі. Зараз жа інтэрнэт вырас, выбар сайтаў вялікі. Карыстальнік стаў капрызным і нецярплівым, і сярэдні час чакання загрузкі старонкі моцна зменшылася. Карыстачу прасцей знайсці іншы больш шустры сайт.
Ды і пошукавыя гіганты накшталт Google або Yandex пачалі звяртаць увагу на тое, як хутка грузяцца сайты, аддаючы перавагу ў выдачы тым, што пошустрее. Не апошнюю ролю ў гэтым адыгрывае і вага старонкі, які, у сваю чаргу, моцна залежыць ад вагі размяшчаюцца на ёй малюнкаў. Даволі відавочна, што мець кампактныя сціснутыя карцінкі выгадна ўсім. Таму тут я хачу пагаварыць пра тое, як падрыхтаваць вашы PNG і JPG, JPEG файлы да заліванні на хостынг.

Базавая аптымізацыя малюнкаў

Тут маецца на ўвазе абразанне непатрэбных палёў, памяншэнне глыбіні колеру, выдаленне каментароў і захаванне выявы ў падыходным фармаце. Для гэтага можаце скарыстацца Adobe Photoshop, або, калі ў вас яго няма, MS Paint ці GIMP.
Нават элементарная абрэзка выявы нядрэнна знізіць яго вага.

Як паменшыць малюнак у MS Paint

Пакажу на прыкладзе MS Paint, як паменшыць малюнак да патрэбных памераў.
Возьмем для прыкладу лога NGINX і яго выява nginx.png памеры 2000 × 417 пікселяў, якое трэба абрэзаць па шырыні да 1024, бо гэта шырыня вёрсткі старонкі, і рабіць больш няма сэнсу.

1. Адкрываем Paint (Пуск-Выканаць-Уводзім «mspaint»)

   Як адкрыць MS Paint

2. Загружаем nginx.png, знаходзім «Змяніць памер», адкрываецца акенца з працэнтамі і пікселямі, у ім пераходзім на пікселі і задаём патрэбны памер, у нашым выпадку ўбіваем ў шырыні 1024

   Як паменшыць памер выявы ў MS Paint

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

File Optimizer для сціску PNG і JPG, JPEG

Найбольш просты і хуткі спосаб дамагчыся аптымальнага сціску выяваў без страты якасці - выкарыстоўваць праграму File Optimizer

Афіцыйны сайт і апісанне праграмы: http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer

Спампаваць File Optimizer вы можаце з SourceForge.net

Апісанне. З'яўляецца эфектыўным аптымізатарам не толькі для малюнкаў, але таксама і для .pdf, .docx, txt і іншых тэкставых, аўдыё- і відэафайлаў, а таксама архіваў. Поўны спіс падтрымоўваных пашырэньні вы знойдзеце на афіцыйнай старонцы праекта.
Вось некаторыя з утыліт, якія выкарыстоўваюцца ў рабоце: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, Gifsicle, Ghostcript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pngquant, pngrewrite, pngwolf, TruePNG, tidy-html5, ZLib, zRecompress. Думаю, нават гэты няпоўны спіс даволі вялікі.

Ўстаноўка і выкарыстанне File Optimizer

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

File Optimizer ў архіве

Інтэрфейс даволі просты і інтуітыўна зразумелы.
У наладзе не мае патрэбы, але вы можаце некаторыя фарматы наладзіць пад сябе з дапамогай кнопкі Options ...
Выкарыстанне. Вы альбо перацягваць патрэбныя файлы і нават тэчкі (каталогі) у акенца праграмы, альбо выбіраеце патрэбныя праз меню Add files ...
Для аптымізацыі файлаў жмёте Optimize all files

Інтэрфейс File Optimizer

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

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

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

Cжатие PNG без страты якасці

Разгледзім 3 праграмы для аптымізацыі PNG:

• Adobe Photoshop
• OptiPNG
• PNGOUT

Параўнаем іх па якасці сціску малюнкаў. Сціскаць будзем nginx.png з папярэдняга раздзела. Вага арыгінала 27,5 Кб.

PNG да сціску

Cжатие PNG з дапамогай Adobe Photoshop

Першы ў спісе - добра вядомы ўсім фотошоп. Шматфункцыянальны камбайн для дызайнера, які ўмее амаль усё, у тым ліку і сціскаць малюнка.
У фотошопе адкрываем Файл-Захаваецца для Web альбо выкарыстоўваем камбінацыю Alt + Shift + Ctrl + S

Сціскае PNG ў Adobe Photoshop

У выніку атрымліваем 22,7 Кб, г.зн. сціснулі на 17,5%

PNG пасля сціску ў Adobe Photoshop

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

Выкарыстанне OptiPNG для сціску PNG

OptiPNG - праграма, створаная адмыслова для сціску PNG малюнкаў. Спампаваць яе можна тут http://optipng.sourceforge.net/ .

Рэкамендую спампаваць і ўсталяваць Far Manager . Далей ён нам спатрэбіцца

Як усталяваць і карыстацца OptiPNG

Спампавалі .exe, залілі ў C: \ Windows, узялі патрэбны PNG-файл, паклалі ў якую небудзь тэчку. Зараз з дапамогай FAR Manager небудзь іншага файлавага мэнэджара з падтрымкай кансолі зайшлі ў гэтую тэчку і ўвялі каманду ў кансоль

optipng -o7 nginx.png

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

Сціскае PNG з дапамогай OptiPNG

18,8 Кб, г.зн. сціснулі на 31,6%, амаль на траціну. Вельмі няблага, няпраўда ці што? У фотошопа атрымалася нашмат горш.

Выкарыстанне PNGOUT для сціску PNG

PNGOUT - утыліта, гэтак жа, як і папярэдняя, ​​створана, каб сціскаць PNG. Спампаваць яе можна тут http://www.advsys.net/ken/utils.htm .

Як усталяваць і карыстацца PNGOUT

Усё сапраўды гэтак жа, як і для OptiPNG. Спампоўваеце PNGOUT.exe, закідвалі ў C: \ Windows, адкрываеце ў файлавым мэнэджару, напрыклад, Far Manager тэчку з PNG, і ў камандным радку пішаце

pngout nginx.png

вынік ніжэй

PNG пасля сціску ў PNGOUT

Вынік 23,4 Кб, г.зн. атрымалася сціснуць на 15%. Вельмі нядрэнна.

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

Як хутка сціснуць PNG ў OptiPNG і PNGOUT

Ствараеце файл png.reg і запісваеце туды дадзеныя для рэестра

Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ OptiPNG] @ = "Run OptiPNG on Folder" [HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ OptiPNG \ command] @ = "cmd.exe / c \ "TITLE Running optiPNG on% 1 && FOR / r \"% 1 \ "%% f IN (* .png) DO optipng -o7 \" %% f \ "\" "[HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ PNGOUT] @ = "Run PNGOUT on Folder" [HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ PNGOUT \ command] @ = "cmd.exe / c \" TITLE Running PNGOUT on% 1 && FOR / r \ "% 1 \ "%% f IN (* .png) DO pngout \" %% f \ "\" "

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

Каб выдаліць усё з кантэкстнага меню, запісваеце ніжэйзгаданы код у png.reg і запускаеце яго

Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ OptiPNG] [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ OptiPNG \ command] [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ PNGOUT] [ -HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ PNGOUT \ command]

Cжатие JPG, JPEG без страты якасці

Для аптымізацыі JPG, JPEG па аналогіі з PNG існуюць свае ўтыліты: jpegtran і jpegoptim. Вядома, вы можаце карыстацца фоташопам, аднак для сціску JPG, JPEG я настойліва рэкамендую карыстацца менавіта імі.

Як усталяваць, наладзіць і выкарыстоўваць jpegtran

jpegtran - магутная ўтыліта, якая дазваляе выканаць як проста сціск JPG без страты якасці, так і сціск з пэўным узроўнем згладжвання, і нават пераўтварэнне ў Progressive JPEG.
Спампаваць jpegtran можна тут http://jpegclub.org/jpegtran/ (Шукаеце і пампуеце jpegtran.exe).

Як сціснуць JPG, JPEG з дапамогай jpegtran

Заліваеце jpegtran.exe ў C: \ Windows
Потым адкрываеце ў Far Manager тэчку з патрэбным JPEG і ў кансолі ўводзіце

jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg # Базавая аптымізацыя 1.jpg # -copy none прыбірае метададзеныя з JPG # -optimize аптымізуе выява

Progressive JPG, JPEG

Гэта такі тып JPG, які пры загрузцы старонкі спачатку паказвае агульныя абрысы, потым догружать і даводзіць якасць карцінкі да максімальнага. Вельмі зручна для павольнага мабільнага інтэрнэту, і таму яго неабходна выкарыстоўваць.

jpegtran -progressive -outfile 1.jpg 1.jpg # трансфармуецца фармат 1.jpg ў Progressive

Як праверыць, ці з'яўляецца малюнак Progressive JPEG

выкарыстоўвайце http://highloadtools.com/progressivejpeg

Пашыраныя магчымасці jpegtran

Тут разгледжаны ўсе магчымыя варыянты выкарыстання jpegtran

jpegtran --help usage: jpegtran [switches] inputfile outputfile Switches (names may be abbreviated): -copy none Copy no extra markers from source file -copy comments Copy only comment markers (default) -copy all Copy all extra markers -optimize Optimize Huffman table (smaller file, but slow compression) -progressive Create progressive JPEG file Switches for modifying the image: -crop WxH + X + Y Crop to a rectangular subarea -flip [horizontal | vertical] Mirror image (left-right or top- bottom) -grayscale Reduce to grayscale (omit color data) -perfect Fail if there is non-transformable edge blocks -rotate [90 | 180 | 270] Rotate image (degrees clockwise) -scale M / N Scale output image by fraction M / N, eg, 1/8 -transpose Transpose image -transverse Transverse transpose image -trim Drop non-transformable edge blocks -wipe WxH + X + Y Wipe (gray out) a rectangular subarea Switches for advanced users: -arithmetic Use arithmetic coding - restart N Set restart interval in rows, or in blocks with B -maxmemory N Maximum memory to use (in kbytes) -outfile name Specify name for output file -verbose or -debug Emit debug output Switches for wizards: -scans file Create multi-scan JPEG per script file

Як хутка на аўтамаце сціснуць JPEG з дапамогай jpegtran ў Windows

Праз кантэкстнае меню сціскаць не атрымаецца з-за асаблівасці працы ўтыліты, аднак, наладзіць сціск мноства JPEG разам на аўтамаце можна.
Для гэтага нам трэба стварыць файл з пашырэннем .bat ( Far Manager у дапамогу) і запісаць туды

cd / d. for %% j in (* .jpg) do call: sheensay "%% ~ nxj" "%% ~ nj.jpg" goto: eof: sheensay jpegtran -copy none -optimize -progressive "% ~ 1" "% ~ 2 "

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

Як усталяваць, наладзіць і выкарыстоўваць jpegoptim

Спампаваць версію для Windows можна тут http://sourceforge.net/projects/jpegoptim/ .

Як сціснуць JPG, JPEG з дапамогай jpegoptim

Заліваем jpegoptim.exe ў C: \ Windows. Потым адкрываем тэчку з JPG выявамі з дапамогай Far Manager і ўводзім ў кансоль

jpegoptim * .jpg --strip-all --all-progressive

Як аптымізаваць некалькі JPG, JPEG разам з дапамогай jpegoptim

У адрозненне ад jpegtran, ўтыліта jpegoptim цалкам выдатна дазваляе працаваць з ёй і з кантэкстнага меню.
Створым файл jpegoptim.reg, напрыклад, з дапамогай Far Manager, і запішам туды

Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ jpegoptim] @ = "Run jpegoptim on Folder" [HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ jpegoptim \ command] @ = "cmd.exe / c \ "TITLE Running jpegoptim on% 1 && FOR / r \"% 1 \ "%% f IN (* .jpg) DO jpegoptim * .jpg --strip-all --all-progressive \" %% f \ "\" "

Запусцілі, ўнеслі дадзеныя ў рэестр. Зараз можна сціскаць мноства JPEG файлаў з дапамогай кантэкстнага меню, проста складаеце патрэбныя малюнкі ў адну тэчку, ПКМ і «Run jpegoptim on Folder».

Як сціскаць JPG з дапамогай jpegoptim

Калі хочаце выдаліць jpegoptim з рэестра і кантэкстнага меню, запісваеце jpegoptim.reg

Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ jpegoptim] [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ jpegoptim \ command]

Захоўваеце, запускаеце, ўносіце змены ў рэестр.

Наколькі якасна jpegtran і jpegoptim сціскаюць jpg, jpeg

Пяройдзем да выпрабаванняў. Возьмем, да прыкладу, файл caching.jpg. У арыгінале ён важыць 29,5 Кб

JPEG у арыгінале

Выпрабаванні jpegtran на якасць сціску JPG, JPEG

jpegtran -copy none -optimize -progressive caching.jpg caching.jpg

Аптымізацыя JPG з дапамогай jpegtran

На выхадзе атрымалася 29,1 Кб, сціск зэканоміла 1,36%

Выпрабаванні jpegoptim на якасць сціску JPG, JPEG

jpegoptim caching.jpg --strip-all

Аптымізацыя JPG з дапамогай jpegoptim

У правадыру Windows гэтага не відаць, сціск склала некалькі соцень байтаў.

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

Як наладзіць сціск png і jpg, jpeg на аўтамаце

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

Неабходна папярэдне ўсталяваць jpegtran, jpegoptim, optipng, pngout ю
Інструкцыя па ўстаноўцы ёсць вышэй.

Такім чынам, для гэтага нам спатрэбіцца правільна сабраць архітэктуру тэчак. Дапусцім, у вас ёсць тэчка images са сваёй іерархіяй ўкладзеных у яе тэчак з PNG і JPG, якія вам трэба апрацаваць.
Ствараем тэчку optimus, у яе закіну тэчку images з усімі укладзенымі тэчкамі і файламі.
адкрываем Far Manager , У ім адкрываем optimus, ствараем там файл go.bat і запісваем туды

@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path =% ~ dp0 :: Назва тэчкі, у якой ляжаць неапрацаваныя выявы set folder = images echo Апрацоўка * .JPG файлаў праз jpegtran :: Создаём тэчку, у якой будуць захоўвацца сціснутыя jpg. У нашым выпадку, гэта jpeg_images xcopy / y / t / c / i "% folder%" "jpg_% folder%" :: Для кожнага .jpg праводзім аптымізацыю з дапамогай jpegtran. Выхадны .jpg будзе запісаны ў jpeg_images for / r% folder% %% a in (* .jpg) do (set fn = %% a & jpegtran -copy none -optimize -progressive -outfile% home_path% jpg_! Fn:% ~ dp0 =!% home_path%! fn:% ~ dp0 =!) echo Апрацоўка * .JPG файлаў праз jpegtran завершана :: Уводзім, што цяпер прагон трэба ажыццяўляць у новай тэчцы jpeg_images set folder = jpg_% folder% echo Апрацоўка * .JPG файлаў праз jpegoptim for / r% folder% %% a in (* .jpg) do (set fn = %% a & jpegoptim %% ~ a --strip-all) echo Апрацоўка * .JPG файлаў праз jpegoptim завершана echo Апрацоўка * .PNG файлаў праз optipng xcopy / y / t / c / i "% folder%" "png_% folder%" for / r% folder% %% a in (* .png) do (set fn = %% a & optipng -o7 %% ~ a -out% home_path% png_! fn:% ~ dp0 =!) echo Апрацоўка * .PNG файлаў праз optipng завершана set folder = png_% folder% echo Зварот отка * .PNG файлаў праз pngout for / r% folder% %% a in (* .png) do (set fn = %% a & pngout %% ~ a) echo Апрацоўка * .PNG файлаў праз pngout завершана pause

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

Цяпер захоўваем go.bat і запускаем яго.

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

Сціск праходзіць з падзелам файлаў асобна JPG, якія цяпер размяшчаюцца ў jpg_images, і PNG асобна, якія размяшчаюцца ў png_images.

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

Як аптымізаваць і сціснуць GIF

карыстайцеся File Optimizer . Але памятайце, GIF актуальна выкарыстоўваць толькі для анімаваных малюнкаў. Выкарыстоўвайце замест яго PNG. PNG сжиматся лепш GIF, в PNG магчыма выкарыстоўваць празрыстую падкладку, няма абмежавання ў 256 кветак у палітры.

У заключэнне

У гэтым артыкуле я пастараўся максімальна разгорнута ахапіць спосабы аптымізацыі PNG і JPG. Калі ёсць нейкія пытанні, дапаўненні, пішыце ў каментарах, абмяркуем