Podobné kanály na youtube co. Jak se dostat do podobných videí na YouTube. Jak se tedy k podobným videím dostat?

Od autora: každý vývojář to ví, pokud jde o výkon webu a uživatelská zkušenost Na každém obrázku záleží. Obrázky jsou nulovým ovocem optimalizace výkonu. Komprese bez vizuální ztráty kvality může být přínosem pro organizace tím, že sníží váhu stránek, aniž by to ohrozilo uživatelské prostředí, zlepšilo produktivitu a oslovilo více uživatelů. Existuje mnoho technik, jak určit, který obrázek nahrát, ale ty „správné obrázky“ je stále třeba vytvořit. Cílem webových vývojářů a výkonnostních služeb by mělo být poskytování optimálních obrázků všem uživatelům, na všech typech zařízení a ve všech prohlížečích. (Dalším cílem by měla být dostupnost, ale to je téma na jiný článek!).

Určení obrázků, které potřebujete

Existuje několik front-end metod pro poskytování správných obrázků, mezi které patří dotazy na média pro obrázky na pozadí a značky s atributem srcset pro obrázky popředí.

Pomocí @media queries můžete určit, který obrázek pozadí se má použít pro konkrétní rozlišení obrazovky a hustotu obrazovky. Můžete například poslat obrázek lowers.jpg do starého notebooku a do iPad Pro– najímá.jpeg:

header ( background-image: url(img/hires_header.jpg); ) @media only screen and (min-device-pixel-ratio: 2) and (min-width: 1024px) ( header ( background-image: url(img) /hires_header.jpg);

záhlaví( @media only screen a (min - zařízení - pixel - poměr: 2) a (min - šířka: 1024px) ( záhlaví( obrázek na pozadí : url (img / hlavička_najme . jpg ) ;

A co obrázky v popředí?

Technika klaunského auta z roku 2013 pracovala na skutečnosti, že SVG v mediálních dotazech používalo jako rozměry okna spíše šířku a výšku kontejneru než prohlížeč. Naštěstí současná podpora prohlížeče pro obrázkovou značku a atribut srcset činí tento trik a polyfill picturefill zastaralými.

Hlavním problémem obrázků v popředí je, že prohlížeč má přístup k rozměrům okna a hustotě obrazovky, ale dokud se samotná stránka nenačte, prohlížeč nezná rozměry obrázku vzhledem k oknu ani rozměry zdrojových souborů. Vývojář je však zná a může je povolit.

Práce s obrázkem, zdrojem a atributem srcset je podobná mediálním dotazům. Určíte, který obrázek v popředí se má použít pro konkrétní velikost okna a hustotu obrazovky:

< picture > < source srcset = "small_lowres.jpg, small_highres.jpg 2x" media = "(max-width: 768px)" > < source srcset = "default.jpg, default_highres.jpg 2x"> < source srcset = "large_lowres.jpg, large_highres.jpg 2x" media = "(min-width: 1024px)" > < img src = "default.jpg" alt = "popisovač obrázku" > < / picture >

Poznámka: Vždy zahrňte do obrázku standardní img tag, včetně atribut alt s popisem obrázku.

Můžete to udělat tak, že jednoduchý tag vyzvednout nejlepší obrázek bez rodičovská značka obrázek a sousední zdrojový tag. Chcete-li to provést, musíte použít atributy srcset a size.

< img src = "default.jpg" srcset = "large.jpg 1024w, Medium.jpg 768w, Default.jpg 420w" size = "(min. šířka: 1024px) 1024px, (min. šířka: 768px) 90vw, 100vw" alt = "(!JAZYK: deskriptor obrázku" / > !}

S pomocí atribut typu Obrázky můžete nahrávat v různých formátech:

< picture > < source srcset = "photo.jxr" type = "image/vnd.ms-photo" > < source srcset = "photo.jp2" type = "image/jp2" > < source srcset = "photo.webp" type = "image/webp" > < img srcset = "photo.jpg" alt = "Můj krásný obličej" > < / picture >

Pokud je pro vás výše uvedený kód nový, používá se JPEG-XR a starý typ MIME image/vnd.ms-photo pro Windows Media Photo, proprietární formát Obrázky společnosti Microsoft. Podporováno v IE8+ a Microsoft Edge. JPEG 2000 je jp2, zobrazí se v Prohlížeče Safari při použití výše uvedeného označení. WebP je obrazový formát s kompresí bez ztráty kvality, funguje v Opeře a Chrome. Firefox zvolí výchozí formát, PNG-A, SVG, GIF nebo JPEG.

Ve Firefoxu a IE8 musíte zadat záložní soubor JPEG nebo PNG. Firefox a Safari experimentují s podporou obrázků WebP, ale podle CanIUse.com nic nenasvědčuje okamžité podpoře.

Pokud chcete porozumět těmto novým, ale dobře podporovaným funkcím a naučit se je používat, existuje několik skvělých návodů na dotazy na média, obrázek a sadu srcset.

Téměř neomezené přizpůsobení

Jedním z hlavních problémů s kódem ve výše uvedené sekci je, že jsme zahrnuli pouze malou část možné obrázky, vhodné pro typ média, velikost a hustotu pixelů. Je možné, ale obtížné, zaregistrovat všechny body přerušení, rozlišení a typy médií pro všechny obrázky. Nechtěl bych všechno psát ručně. Naštěstí je úkolem vytvořit všechny potřebné obrázky ke všemu možné případy lze automatizovat.

Nejlepší možnost– napište požadavek na straně serveru pro většinu optimální obraz na základě tří ze čtyř kritérií: velikost okna, hustota pixelů na zařízení, podporovaný typ média v prohlížeči a velikost obrázku vzhledem k oknu. Proč na základě tří ze čtyř? Protože můžete použít to, co již prohlížeč rozumí zdrojovému kódu, nemusíte zahrnout vše možné kombinace, jen pár.

Pokud je DOM zapsán do prohlížeče výhradně prostřednictvím JS na straně klienta, jak je tomu ve většině aplikací React, lze prohlížeči odeslat požadavek na správný obrázek, nicméně během analýzy kódu může uživatel pozorovat částečně načtenou neinteraktivní obrazovku (snímek obrazovky). V obecnějším scénáři, když web má serverová část, přepsání požadavku na obrázek v JS není optimální možností: prohlížeč nejprve načte originál při analýze DOM, poté načte druhý, již optimalizovaný obrázek po aktualizaci DOM.

Pokud používáte techniku ​​progresivního vylepšování a měli byste, musíte jasně pochopit, že jakmile je analyzován HTML kód obrázku, načte se originál.

Specifikace Client Hints, která do polí hlavičky HTTP požadavku přidává informace o poměru pixelů na zařízení a šířce okna, je bohužel implementována pouze v prohlížečích Blink (Chrome a Opera). Díky znalosti prohlížeče uživatele, rozlišení a velikosti okna lze zautomatizovat aktualizaci všech požadavků na obrázky, a tím využít techniky progresivního vylepšování požadavků na straně serveru. Pomocí Client Hints můžete potvrdit podporu pro formát webP (Chrome a Opera podporují klientské tipy i webP), rozlišení a velikost okna. Na webu Instart Logic je skript Nanovisor, který dělá to samé pro Klientské rady. Umožňuje posílat optimalizované obrázky v optimalizovaných formátech, i když nejsou podporovány Klientské rady.

Techniky detekce prohlížeče nejsou tak chytré, takže můžete vzít řetězec prohlížeče ze záhlaví HTTP a vyhledávací tabulky a použít je k určení vráceného typu média na základě těchto záhlaví. Rozšíření obrázků můžete přepsat nebo můžete vrátit „správný“ typ obrázku pro všechny prohlížeče, ale s „nesprávným“ rozšířením pro každé volání obrázku. Pokud je například požadovaný obrázek foo.jpg, vraťte se nejlepší média zadejte pro prohlížeč, ale volejte foo.jpg, typ média není důležitý. V Instart Logic přinášíme zpět formát webP pro prohlížeče Chrome a Opera, JPEG-XR pro Edge atd…. cestu obrázku nepřepisujeme. V názvu souboru jednoduše použijeme původní příponu, pro nás je to jpg. Využíváme toho, že prohlížeče vykreslují obrázky typů médií, které rozpoznávají, a nehledí na přípony (nebo jejich nedostatek) v názvu souboru. V tomto případě nemůžete změnit označení a DOM v JS a také načíst pouze jeden obrázek na požadavek.

Pokud se chystáte vrátit různé typy médií na základě podpory prohlížeče, ale se stejným rozlišením v názvu souboru, budete muset uložit správný obrázek na straně serveru do databáze, protože budete muset zpracovávat různé verze obrázek se stejným názvem. Na straně klienta by bylo nutné požádat správné prodloužení(pokud znáte lepší způsob nebo jen jiný, dejte mi vědět).

Automatizace procesu vytváření souborů

Nejlepší je poskytnout uživatelům přizpůsobené obrázky pro přizpůsobené grafické reklamy, které prohlížeč podporuje. V předchozí části jsme se naučili, jak sdělit prohlížeči, aby použil obrázek určitou velikost a typ na základě jeho funkcí. Stále však musíme vytvářet obrázky všech velikostí pro všechny typy médií nejlepší úroveň komprese pro každého samostatný obrázek. Otázkou je, jak vytvořit všechny obrázky?

Potřebujeme automatizovat kompresi obrázků a změnu velikosti do více formátů podporovaných různými prohlížeči, zařízeními a operačními systémy. Nejlepší je určit nejlepší stupeň a úroveň komprese pro každý obrázek jednotlivě.

Optimalizace obrázků může trvat dlouho na nestatických webech, kde mohou být tisíce, desetitisíce nebo dokonce miliony obrázků. různé velikosti, rozlišení a typy médií. ImageMagick umí převádět obrázky do PNG, JPEG, JPEG-2000, GIF, WebP a téměř jakéhokoli formátu pomocí příkazového řádku:

K určení na celém internetu nejlepší kvalita Všechny obrázky vyžadují armádu lidí. Většina převaděčů a služeb snižuje velikost souboru snížením kvality obrázků při stejném kompresním poměru nebo úrovni. Například, když moje stránky měly málo obrázků, mohl jsem je ručně komprimovat. Kvalita se pohybovala od nízkých 35 % do vysokých 88 %. U galerií a dalších obrazově náročných projektů jsem použil Adobe Fireworks k automatizaci komprese a exportu, vše jsem uložil jako JPEG v 78% kvalitě. jako já, většina z nástroje pro automatizaci komprese používají stejné nastavení kvality, obvykle kolem 80 %. Vybral jsem 78% čistě náhodou (trochu na základě zkušeností). Neexistuje žádná magická hodnota kvality, která by vyhovovala všem snímkům. Neexistuje žádná magická úroveň komprese, která komprimuje všechny obrázky bez ztráty kvality.

"Správná" míra komprese závisí na obsahu a způsobu použití obrázku. Úroveň kvality exportu obvykle závisí na detailech v obrázku. Vybírá se v závislosti na obsahu různé úrovně pro každý obrázek. Často platí, že čím více detailů v obrázku, tím nižší kvalita: krajina vyžaduje Vysoká kvalita pod 90 a snímek se spoustou detailů bude vypadat dobře i na úrovni pod 50.

Stále je možné automatizovat nastavení kvality pro každý snímek. Web Instart Logic využívá počítačové vidění, strojové učení a konvertor k optimalizaci obrázků na základě obsahu, k automatizaci procesu vytváření obrázků optimalizovaných pro rozlišení zařízení, prohlížeče a webu a k výpočtu optimálního kompresního poměru bez ohrožení uživatelského zážitku. SmartVision je algoritmický přístup, který využívá strojové učení k automatizaci adaptivních nastavení pro každý snímek, přičemž obraz komprimuje na maximum bez ztráty kvality (jedinou výjimkou je několik prvních snímků, na kterých je algoritmus kalibrován. strojové učení). Pokročilé algoritmy počítačového vidění nahlížejí do obsahu obrazu a maximalizují úroveň komprese, aniž by ohrozily inteligenci uživatele. Parviz Ahammad vysvětlil své algoritmy pro SmartVision mnohem lépe než já v roce 2014.

Prohlížeče ušly za posledních 6 let velký kus cesty a zvýšila se i průměrná váha webových stránek. Obrázky jsou hlavním viníkem pomalého načítání a moderní obrazy- pouze část řešení. Čas strávený optimalizací obrázků je dobře strávený.

V tomto věku mobilní technologie optimalizace obrazu v formáty PNG a JPG, JPEG se stal znovu relevantním, jako byl aktuální v těch dnech, kdy internet právě vstupoval do našich životů a byl všeobecně pomalý a vytáčený. Mobilní internet samozřejmě není úplně správné srovnávat s vytáčeným připojením, ale v místech, kde je připojení špatné, je rychlost přístupu poměrně nízká. A ani v těch dobách neměl uživatel kam jít a musel čekat, až se stránka načte. Nyní se internet rozrostl, existuje velký výběr stránek. Uživatel se stal vrtošivým a netrpělivým a průměrná doba načítání stránky se výrazně snížila. Pro uživatele je snazší najít jiný rychlejší web.
Ano a hledat obry jako Google nebo Yandex začaly věnovat pozornost tomu, jak rychle se stránky načítají, a ve výsledcích vyhledávání upřednostňovaly ty, které jsou rychlejší. Důležitou roli v tom hraje i váha stránky, která zase silně závisí na váze obrázků na ní umístěných. Je zcela zřejmé, že mít kompaktní komprimované obrázky prospívá všem. Proto zde chci mluvit o tom, jak připravit soubory PNG a JPG, JPEG pro nahrání na hosting.

Základní optimalizace obrazu

To zahrnuje oříznutí nepotřebných polí, snížení barevné hloubky, odstranění komentářů a uložení obrázku ve vhodném formátu. K tomu můžete použít Adobe Photoshop, nebo pokud jej nemáte, MS Paint nebo GIMP.
I základní oříznutí obrázku docela dobře sníží jeho váhu.

Jak zmenšit obrázek v MS Paint

Na příkladu programu MS Paint vám ukážu, jak zmenšit obrázek na požadovanou velikost.
Vezměme si například logo NGINX a jeho obrázek nginx.png o rozměrech 2000x417 pixelů, který je potřeba oříznout na šířku 1024, protože Toto je šířka rozvržení stránky a nemá smysl dělat víc.

Výstupem je obrázek, který prošel minimální základní optimalizací. Je čas přejít ke stlačování její váhy.

Optimalizátor souborů pro kompresi PNG a JPG, JPEG

Nejjednodušší a nejrychlejší způsob, jak toho dosáhnout optimální komprese obrázky bez ztráty kvality - použití Souborový program Optimalizátor

Oficiální web a popis programu :

Stáhněte si File Optimizer můžete s

Popis . Je to efektivní optimalizátor nejen pro obrázky, ale také pro .pdf, .docx, txt a další textové, zvukové a video soubory a také archivy. Úplný seznam podporovaná rozšíření naleznete na oficiální stránka projekt.
Zde jsou některé z utilit používaných v práci: AdvanceCOMP, APNG Optimizer, CSTidy, DeflOpt, defluff, Gifsicle, Ghostcript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pnghtml5comwolf, ZngdybPwrite, pngre. Myslím, že i tento částečný seznam je docela působivý.

Instalace a používání nástroje File Optimizer

První stažení Nejnovější verze programy buď ve formě instalátoru nebo archivu se soubory. Mimochodem, archiv má verzi pro 32bitovou a 64bitovou verzi Windows.

Rozhraní je poměrně jednoduché a intuitivní.
Nepotřebuje žádná nastavení, ale některé formáty si můžete upravit sami pomocí tlačítka Možnosti...
Používání . Požadované soubory a dokonce i složky (adresáře) buď přetáhnete do okna programu, nebo požadované soubory vyberete pomocí nabídky Přidat soubory....
Chcete-li optimalizovat soubory, klikněte na Optimalizovat všechny soubory

Optimalizované soubory nahradí zdrojové soubory a zachová se také hierarchie kategorií. Naproti každému souboru se zobrazí statistika v procentech původní velikost Optimalizovaná verze souboru váží.
Po dokončení práce se níže ve stavovém řádku zobrazí statistika počtu zpracovaných souborů a také kolik bylo ušetřeno.

Podle mého názoru dělá File Optimizer svou práci velmi dobře.
Jediným negativem je, že pokud je seznam souborů velký, můžete na výsledky čekat dlouho, ale stojí to za to.

Pokud vás zajímají podrobnosti o optimalizačních metodách, které lze konfigurovat vlastním způsobem, pak budeme hovořit o nastavení a použití utilit pro kompresi obrazu

Komprimujte PNG bez ztráty kvality

Podívejme se na 3 programy pro optimalizaci PNG:

• Adobe Photoshop
• OptiPNG
• PNGOUT

Pojďme je porovnat z hlediska kvality komprese obrazu. Zkomprimujeme nginx.png z předchozí části. Původní váha je 27,5 kB.

Komprimujte PNG pomocí Adobe Photoshopu

První na seznamu je všem dobře známý Photoshop. Multifunkční procesor pro designéra, který umí téměř vše, včetně komprese obrázků.
Otevřít ve Photoshopu Soubor-Uložit pro web nebo použijte kombinaci Alt+Shift+Ctrl+S

Ve výsledku získáme 22,7 KB, tzn. klesl o 17,5 %

Bohužel většina grafické programy nejsou schopni využít plný potenciál algoritmů používaných ke kompresi PNG. hlavní důvod je to, aby určili optimální strategii komprese, kterou používají heuristické algoritmy, které nám umožňují odhadnout účinnost určitých parametrů bez komprese, což ve výsledku dává velké procento chyby. Ke kompresi PNG proto používáme nástroje speciálně vytvořené pro tento účel, konkrétně OptiPNG a PNGOUT.

Použití OptiPNG ke kompresi PNG

Jak nainstalovat a používat OptiPNG

Stáhnul .exe, nahrál ho do C:\Windows, vzal požadovaný soubor PNG a vložil ho do nějaké složky. Nyní pomocí FAR Manager nebo jiného správce souborů s podporou konzoly přejděte do této složky a zadejte příkaz do konzoly

Optipng -o7 nginx.png

Příkaz vás přinutí komprimovat PNG ve složce. Později se podíváme na jednoduchou možnost, jak provést kompresi jedním kliknutím.
Nejprve se ale podívejme na výsledek.

18,8 kB, tzn. se snížil o 31,6 %, tedy téměř o třetinu. Není to vůbec špatné, že? Photoshop dopadl mnohem hůř.

Použití PNGOUT ke kompresi PNG

Jak nainstalovat a používat PNGOUT

Vše je úplně stejné jako u OptiPNG. Stáhněte si PNGOUT.exe, vložte jej do C:\Windows, otevřete v správce souborů, Například, Dálný manažer složka s PNG a v příkazový řádek napsat

Pngout nginx.png

Výsledek je níže

Výsledkem je 23,4 KB, tzn. podařilo stlačit o 15 %. Velmi dobře.

Obecně hned řeknu, že jsem měl různé výsledky s různými soubory, někde fungoval PNGOUT efektivněji, jinde OptiPNG, takže vám doporučuji spouštět obrázky jeden po druhém přes oba nástroje.

Jak rychle komprimovat PNG v OptiPNG a PNGOUT

Vytvořte soubor png.reg a zapište tam data registru

Okna Editor registru Verze 5.00 @="Spustit OptiPNG ve složce" @="cmd.exe /c \"TITLE Spuštění OptiPNG na %1 && FOR /r \"%1\" %%f IN (*.png) PROVEĎTE optipng -o7 \ "%%f\" \"" @="Spustit PNGOUT ve složce" @="cmd.exe /c \"TITLE Spuštěn PNGOUT na %1 && FOR /r \"%1\" %%f IN (*. png) DO pngout \"%%f\" \""

Poté spustíte tento soubor a zapíšete data do registru Windows.
Nyní, když kliknete na složku se soubory PNG, které je třeba zkomprimovat, vyberte příkazy, které potřebujete, komprimace proběhne automaticky pro všechny obrázky najednou.

K odstranění všeho z kontextová nabídka, napište následující kód do png.reg a spusťte jej

Editor registru Windows verze 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG\command] [-HKEY_LOCAL_MACHINE\COUTlassesll[SOFTWARE] -HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT\command]

Komprese JPG, JPEG bez ztráty kvality

Pro optimalizaci JPG, JPEG, analogicky s PNG, existují nástroje: jpegtran a jpegoptim. Samozřejmě můžete použít Photoshop, ale pro komprese JPG, JPEG, vřele je doporučuji používat.

Jak nainstalovat, nakonfigurovat a používat jpegtran

jpegtran - výkonný nástroj, který umožňuje provádět jak jednoduchou kompresi JPG bez ztráty kvality, tak kompresi s určitou úroveň anti-aliasing a dokonce i převod do progresivního JPEG.
Jpegtran si můžete stáhnout zde http://jpegclub.org/jpegtran/ (vyhledejte a stáhněte si jpegtran.exe).

Jak komprimovat JPG, JPEG pomocí jpegtran

Nahrajte jpegtran.exe do C:\Windows
Poté jej otevřete ve Far složka správce s požadovaným JPEG a zadejte jej do konzoly

Jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg # Základní optimalizace 1.jpg # -copy none odstraní metadata z JPG # -optimize optimalizuje obrázek

Progresivní JPG, JPEG

Jedná se o typ JPG, který při načtení stránky nejprve zobrazí obecný obrys, poté se načte a zvýší kvalitu obrazu na maximum. Velmi vhodné pro pomalé mobilní internet, a proto je nutné jej použít.

Jpegtran -progressive -outfile 1.jpg 1.jpg # Transformuje formát 1.jpg na progresivní

Jak zkontrolovat, zda je obrázek progresivní JPEG

Pokročilé funkce jpegtranu

Všechny jsou zde pokryty možné možnosti pomocí jpegtranu

Jpegtran --help použití: jpegtran inputfile outputfile Přepínače (názvy mohou být zkrácené): -copy none Kopírovat žádné extra značky ze zdrojového souboru -cos komentovat Kopírovat pouze značky komentářů (výchozí) -copy all Kopírovat všechny extra značky -optimalizace Optimalizace Huffmanova tabulka (menší soubor, ale pomalá komprese) -progresivní Vytvořit progresivní soubor JPEG Přepínače pro úpravu obrázku: -oříznout ŠxV+X+Y Oříznout na obdélníkovou podoblast -převrátit Zrcadlový obraz (vlevo-vpravo nebo nahoře-dole) -Stupně šedi Zmenšit do stupňů šedi (vynechat barevná data) -perfektní Selhání, pokud existují netransformovatelné okrajové bloky -otočení Otočit obrázek (ve stupních ve směru hodinových ručiček) -měřítko M/N Měřítko výstupního obrázku o zlomek M/N, např. 1/8 -transponovat Transponovat obrázek - transverse Příčná transpozice obrazu -trim Vypustit netransformovatelné okrajové bloky -wipe ŠxV+X+Y Otřít (zašednout) obdélníkovou podoblast Přepínače pro pokročilé uživatele: -aritmetické Použít aritmetické kódování -restartovat N Nastavit interval restartu v řadách nebo blocích s B -maxmemory N Maximální paměť k použití (v kilobajtech) -název výstupního souboru Specifikujte název výstupního souboru -verbose nebo -debug Vysílat výstup ladění Přepínače pro průvodce: -skenuje soubor Vytvoří soubor JPEG s vícenásobným skenováním na soubor skriptu

Jak rychle automaticky komprimovat JPEG pomocí jpegtran ve Windows

Kvůli způsobu fungování nástroje nebudete moci komprimovat prostřednictvím kontextové nabídky, můžete však automaticky nastavit kompresi více JPEGů najednou.
K tomu musíme vytvořit soubor s příponou .bat (to help) a zapsat jej tam

Cd/d. pro %%j v (*.jpg) zavolejte:sheensay "%%~nxj" "%%~nj.jpg" goto:eof:sheensay jpegtran -kopírovat žádné -optimize -progresivní "%~1" "%~2 "

Jak nainstalovat, nakonfigurovat a používat jpegoptim

Jak komprimovat JPG, JPEG pomocí jpegoptim

Nahrajte jpegoptim.exe do C:\Windows. Poté složku otevřete pomocí obrázky JPG S pomocí Far Manager a vstupte do konzole

Jpegoptim *.jpg --strip-all --all-progressive

Jak optimalizovat několik JPG, JPEG najednou pomocí jpegoptim

Na rozdíl od jpegtranu vám utilita jpegoptim umožňuje s ním docela dobře pracovat z kontextové nabídky.
Vytvořme si soubor jpegoptim.reg např. pomocí Far Manageru a zapišme tam

Editor registru Windows verze 5.00 @="Spustit jpegoptim ve složce" @="cmd.exe /c \"TITLE Spuštění jpegoptim na %1 && FOR /r \"%1\" %%f IN (*.jpg) PROVEĎTE jpegoptim *.jpg --strip-all --all-progressive \"%%f\" \""

Spustili jsme to a zadali údaje do registru. Nyní můžete komprimovat sadu soubory JPEG pomocí kontextové nabídky stačí přidat požadované obrázky do jedné složky, RMB a „Spustit jpegoptim ve složce“.

Pokud chcete odstranit jpegoptim z registru a kontextové nabídky, napište jpegoptim.reg

Editor registru Windows verze 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim\command]

Uložit, spustit, provést změny v registru.

Jak dobře jpegtran a jpegoptim komprimují jpg, jpeg

Pojďme k testům. Vezměte si například soubor caching.jpg. V originále váží 29,5 KB

Jpegtran testuje JPG, kvalitu komprese JPEG

jpegtran -kopírovat žádné -optimalizovat -progresivní ukládání do mezipaměti.jpg ukládání do mezipaměti.jpg

Výstup byl 29,1 KB, komprese ušetřena 1,36 %

Jpegoptim testuje kvalitu komprese JPG, JPEG

jpegoptim caching.jpg --strip-all

V Průzkumník Windows to není vidět; komprese byla několik set bajtů.

Studna, původní soubor byl dobře připraven, takže komprese neměla žádný znatelný efekt, ale když zpracováváte své neoptimalizované obrázky, budete někdy překvapeni, jak moc lze ušetřit na velikosti.

Jak nastavit automatickou kompresi png a jpg, jpeg

Pokud jste dočetli až tuto sekci, ale stále nejste spokojeni s nabízenými možnostmi, navrhuji, abyste si sami sestavili přenosný harvestor - službu pro kompresi obrázků, fotografií, obrázků, která bude fungovat tak, jak potřebujete přímo na ploše.

Musí být předem nainstalováno jpegtran, jpegoptim, optipng, pngout Yu
Pokyny k instalaci jsou výše.

Za tímto účelem musíme správně sestavit architekturu složek. Řekněme, že máte složku obrázků s vlastní hierarchií podsložek s PNG a JPG, které potřebujete zpracovat.
Vytvořte složku optimus, vložte do ní složku obrázků se všemi jejími podsložkami a soubory.
Otevři , otevři v něm optimus, tam vytvoř soubor go.bat a zapiš ho tam

@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path=%~dp0:: Název složky, ve které jsou umístěny nezpracované obrázky set folder=images echo Zpracování souborů *.JPG přes jpegtran:: Vytvořte složku, ve které budou nezpracované obrázky uloženy komprimovaný jpg. V našem případě je to jpeg_images xcopy /y /t /c /i "%folder%" "jpg_%folder%" :: Pro každý .jpg optimalizujeme pomocí jpegtran. Output.jpg bude zapsán do jpeg_images pro /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 Zpracování souborů *.JPG přes jpegtran je dokončeno:: Označujeme, že spuštění by nyní mělo být provedeno v nové složce jpeg_images set folder = jpg_%folder% echo Zpracování souborů *.JPG přes jpegoptim pro /r %složka% %%a v (*.jpg) do (set fn=%%a& jpegoptim %%~a --strip-all) echo Zpracování souborů *.JPG přes jpegoptim dokončeno echo Zpracování souborů *.PNG přes optipng xcopy /y /t /c /i "%folder%" "png_%folder%" pro /r %folder% %%a v (*.png) do (set fn=%%a& optipng -o7 %% ~a -out %home_path%png_!fn:%~dp0=!) echo Zpracování souborů *.PNG přes optipng dokončeno nastavení složky=png_%folder% echo Zpracování souborů *.PNG přes pngout for /r %folder% %%a in (*.png) do (set fn=%%a& pngout %%~a) echo Zpracování souborů *.PNG přes pngout dokončeno pauza

Kód je v důležitých částech komentován. Ve skutečnosti to není nic složitého, pokud to potřebujete, můžete na to přijít.

Nyní uložte go.bat a spusťte jej.

Pokud je souborů mnoho, bude komprese obrazu nějakou dobu trvat. Počkejte, dokud vás konzola neoznámí, že proces byl dokončen.

Komprese probíhá odděleně oddělenými soubory JPG, které jsou nyní umístěny v jpg_images, a odděleně soubory PNG, které jsou umístěny v png_images.

Pokud potřebujete změnit kvalitu nebo jiné parametry, podívejte se na popis utilit výše a změňte kód tak, aby vyhovoval vašim potřebám.

Jak optimalizovat a komprimovat GIF

Konečně

V tomto článku jsem se snažil co nejúplněji pokrýt metody optimalizace PNG a JPG. Pokud máte nějaké dotazy nebo doplňky, napište do komentářů, prodiskutujeme