Progresívny JPEG: nový osvedčený postup. Ukladanie obrázkov vo Photoshope

Súbor PSD je možné archivovať a uložiť na externé médium na neskoršie úpravy. Ak ste vykonali nejaké úpravy fotografií, ale stále máte malú šancu vrátiť sa k úprave tohto obrázka neskôr, určite sa oplatí uložiť obrázok ako PSD. Vďaka tomu, bez ohľadu na to, koľkokrát otvoríte, zatvoríte a znova uložíte súbor PSD, nedôjde k strate kvality obrazu ani k strate všetkých vašich vrstiev, masiek vrstiev, vrstiev úprav atď. sa uloží ako súčasť súboru, čo vám umožní kedykoľvek sa vrátiť k obrázku a pokračovať v úpravách.

Jednou z nových výhod práce so súbormi PSD je, že ich teraz možno importovať priamo do programu Adobe InDesign, vďaka čomu získate úplný prístup k jednotlivým vrstvám v súbore pri navrhovaní rozložení strán. Môžete dokonca znova otvoriť súbor PSD vo Photoshope priamo z InDesignu, vykonať zmeny v súbore, uložiť ho a zmeny sa okamžite aktualizujú v rozložení!

Jedinou skutočnou nevýhodou súboru PSD je, že môže byť veľmi veľký, najmä ak pracujete s obrázkom so stovkami alebo dokonca tisíckami vrstiev.

Stručne povedané, súbor PSD je najdôležitejším súborom pri práci vo Photoshope.

JPEG

Formát JPEG (Joint Photographic Expert Group) sa používa už takmer 20 rokov a je najpopulárnejším a najrozšírenejším formátom súborov na prezeranie a používanie digitálnych fotografií. Podporuje 24-bitové farby, čo znamená, že dokáže reprodukovať približne 16,7 milióna farieb a dokonca aj tie najlacnejšie digitálne fotoaparáty dokážu ukladať obrázky ako súbory JPEG. Najsofistikovanejšie digitálne zrkadlovky vám dávajú možnosť snímať obrázky vo formáte JPEG alebo RAW.

Dôležité je však nezamieňať si pojmy „populárny“ a „veľmi využívaný“ s pojmom „odborné kvality“. JPEG je kompresný formát a akákoľvek kompresia je spojená so stratou kvality obrazu. Kompresia zmenšuje veľkosť súboru, ale čím viac kompresiu používate, tým viac sa znižuje kvalita obrázka. Veľkosť kompresie pri ukladaní súboru vo Photoshope môžete ovládať pomocou príslušných nastavení. Pri voľbe vysokej kvality sa prirodzene zvyšuje veľkosť súboru a naopak.

Najväčšou výhodou formátu JPEG je jeho pohodlie. Tieto súbory sú zvyčajne také malé, že sa dajú ľahko stiahnuť a zobraziť na webových stránkach, vo fotobankách sociálnych médií a tiež poslať e-mailom. Pri úprave obrázkov online si zvyčajne musíte stiahnuť aj formát JPG.

Nevýhodou JPEG je, že zníženie kvality spôsobené kompresiou obrázkov znamená, že nie sú dobrou voľbou pre tlač, keď je prvoradá kvalita obrázka a veľkosť súboru ustupuje do úzadia.
Tento formát sa navyše pri archivácii prakticky nekomprimuje.

Ak váš fotoaparát pri fotografovaní ukladá fotografie vo formáte JPEG, uistite sa, že ste vybrali najvyššiu možnú kvalitu obrázka.

A ďalším dôležitým nedostatkom je zhoršenie kvality pri opätovnom ukladaní.
Zakaždým, keď súbor otvoríte na úpravu a znova uložíte, vytvoríte ešte väčšiu kompresiu obrázka, čo znižuje kvalitu a zanecháva artefakty.
Z toho vyplýva, že ukladanie obrázkov vo formáte JPEG sa neoplatí, ak existuje možnosť neskoršej opätovnej úpravy.

gif

GIF (Graphics Interchange Format) je ešte starší ako JPEG. Tento formát bol vytvorený pre webovú grafiku. Všimnite si, že pre web grafy a nie web Fotografia.

GIF dokáže zobraziť iba 256 farieb, čo je oveľa menej, ako je potrebné na uspokojivú reprodukciu obrázka (a oveľa menej ako milióny farieb podporovaných formátmi JPEG).

Ale napriek malému počtu podporovaných farieb, pokiaľ ide o webový dizajn, je formát GIF nevyhnutný. Obrázky GIF sú vhodné pre rozloženie webových stránok, bannery a tlačidlá, pretože vo všeobecnosti tieto prvky webového dizajnu obsahujú veľké plochy jednej farby.

GIF navyše umožňuje webovým dizajnérom vytvárať jednoduché animácie.

Jednou z hlavných výhod GIF oproti JPEG, najmä pre webových dizajnérov, je to, že GIF podporuje priehľadnosť, ale treba poznamenať, že podporuje iba jednu úroveň priehľadnosti, t. j. pixel je buď priehľadný, alebo nie. To môže mať za následok zubaté okraje okolo obrázka, ak sa farba okraja obrázka líši od farby pozadia pod ním. Ak chcete zlepšiť kvalitu efektov priehľadnosti, najlepšou možnosťou je vybrať formát PNG.

PNG

PNG (Portable Network Graphics) bol pôvodne vytvorený, aby nahradil formát GIF (skratka PNG tiež žartom znamená „PNG nie GIF“). PNG však nikdy nedokázal nahradiť GIF a GIF sú v súčasnosti stále široko používané, ale , formát PNG má oproti GIF výhodu takmer v každom smere.

Okrem toho má PNG niektoré výhody aj oproti JPEG. Zatiaľ čo súbory JPEG podporujú 24-bitové farby (až 16,7 milióna farieb), súbory PNG podporujú 48-bitové farby, čo nám dáva viac ako 1 miliardu možných farieb! Môže sa to zdať pôsobivé, ale aj JPEG podporujú viac farieb, ako ľudské oko dokáže vidieť, takže akékoľvek skutočné rozdiely medzi 24 a 48-bitovými farbami sú prinajlepšom minimálne.

Najväčšou výhodou oproti JPEG je, že PNG šetrí bezstratové obrázky. To znamená, že hoci stále komprimuje obrázok, aby sa zmenšila veľkosť súboru, použitá metóda kompresie nespôsobí žiadnu stratu kvality obrázka. Rovnaký súbor PNG môžete uložiť viackrát bez zníženia jeho kvality, zatiaľ čo kvalita súborov JPEG sa zníži pri každom opätovnom uložení. S viac ako miliardou možných farieb a bezstratovou kompresiou je PNG vynikajúcou voľbou formátu na ukladanie vysokokvalitných digitálnych fotografií.

Nevýhodou PNG je, že nepodporuje farebný priestor CMYK, čo znamená, že ho komerčné tlačiarne nedokážu využiť.

Hlavnou výhodou PNG oproti súborom GIF, okrem skutočnosti, že počet farieb, ktoré PNG podporuje, ďaleko presahuje 256, je to, že dokáže vykresliť 256 úrovní priehľadnosti v porovnaní s jedinou úrovňou priehľadnosti GIF, čo nám dáva plynulé prechody na okrajoch, takže nemusíte sa obávať súladu.hrany s farbou pozadia.

Súbory PNG sú tiež zvyčajne menšie ako súbory GIF, takže sa vo webovom prehliadači načítajú rýchlejšie.

A ešte jedna nevýhoda. PNG na rozdiel od GIF nepodporuje animáciu.

TIFF

Podobne ako súbory PSD, aj formát TIFF (Tagged Image File Format) je jedným z mála typov súborov, ktorý podporuje všetky funkcie Photoshopu a je ďalšou možnosťou archivácie obrázkov s bezstratovou kompresiou, ktorá vám umožňuje ukladať fotografie s najvyššou možnou kvalitou obrázkov.
Kvalita má svoju cenu, súbory TIFF môžu byť veľmi veľké, najmä v porovnaní so súbormi JPEG. TIFF je všeobecne uznávaný štandard pre obrázky určené na komerčnú tlač a je kompatibilný s prakticky všetkým softvérom na publikovanie na počítači, ako sú QuarkXPress a InDesign.

Aj keď súbory TIFF dokážu uložiť všetky bežné vrstvy a vrstvy úprav a ďalšie prvky, ktoré sa nachádzajú v dokumente Photoshopu, stále sa vo všeobecnosti odporúča uložiť všetky tieto prvky do hlavného súboru PSD a použiť formát TIFF na uloženie plochej verzie. obrázok na tlač.. TIFF už nie je taký populárny ako kedysi, ale zostáva štandardným formátom pre polygrafický priemysel a teší sa širokej podpore.

EPS

EPS (Encapsulated PostScript) je ďalší priemyselný štandardný formát, ktorý sa používa už dlho, no jeho využitie v posledných rokoch klesá. EPS nie je štandardom ochrany obrazu v tradičnom zmysle. Namiesto toho obsahuje sériu pokynov, ako má tlačiareň vykresliť obrázok.
Možnosť náhľadu obrázka musí byť zabudovaná do súboru EPS, keď ho uložíte vo Photoshope, ak si ho chcete neskôr pozrieť na monitore, inak ho nebudete môcť vidieť, kým sa rozloženie nevytlačí.

PDF

PDF (Portable Document Format) sa používa hlavne na prezeranie, zdieľanie a tlač elektronických dokumentov, ale teraz si PDF získava na popularite ako dobrý spôsob ukladania obrázkov na tlač. Rovnako ako formáty PSD a TIFF, aj PDF podporuje a zachováva všetky funkcie Photoshopu, vrátane možnosti použiť ďalšie farby. PDF nám poskytuje niekoľko možností ukladania obrázkov: buď kompresiu JPEG s vlastnou kvalitou na vyváženie kvality obrázka a veľkosti súboru, alebo bezstratovú kompresiu alebo archiváciu ZIP.

Výhodou formátu PDF je, že každý používateľ si môže pomocou bezplatného programu Adobe Reader prezerať akýkoľvek typ obrázka uloženého v PDF.

Uložené v počítači a naučiť sa dokončiť - ako uložiť obrázok (obrázok, fotografiu) vo Photoshope.

Proces ukladania obrázka úzko súvisí s formátmi grafických súborov. Pretože veľa bude závisieť od toho, aký formát si vyberiete (podpora priehľadnosti, veľkosť súboru a počet zobrazených farieb). Nebudem sa opakovať a popisovať každý formát, pretože všetky tieto informácie sú už podrobne uvedené v článku o používaní Photoshopom.

Súbor - Uložiť (Ctrl+S)

Tento príkaz sa zvyčajne používa, keď používateľ otvoril existujúci obrázok a upravuje ho. Vykonaním tohto príkazu Photoshop aktualizuje tento súbor v rovnakom formáte ako predtým. Dá sa povedať, že toto rýchle uloženie, ktorý nevyžaduje úpravu žiadnych parametrov obrazu.

Ak ste vytvorili obrázok od začiatku, tento príkaz bude fungovať ako Uložiť ako.

Súbor - Uložiť ako... (Shift+Ctrl+S)

Tento príkaz je hlavný a je obdarený mnohými „ťažkosťami“.

Výberom tohto príkazu musíte Photoshopu povedať, kde, s akým názvom a v akom formáte chcete fotografiu uložiť. Ak to chcete urobiť, zobrazí sa dialógové okno:

Zelené šípky označujú ovládacie tlačidlá navigácie (na označenie miesta uloženia súboru) a modrá šípka zobrazuje ponuku na výber formátu budúceho obrázka. Potom kliknite na tlačidlo Uložiť.

To však nie je všetko. Photoshop zobrazí ďalšie okno − možnosti. Obsah tohto okna bude priamo závisieť od formátu súboru, ktorý ste vybrali.

Najdôležitejšia vec, ktorú tu možno konfigurovať, je kvalita obrazu. Do poľa s číslami môžete zadať hodnotu kvality od 1 do 10, prípadne vybrať jej textové označenie v rozbaľovacom zozname, prípadne posunutím posúvača. Výsledná veľkosť súboru sa zobrazí v pravej polovici okna.

Kvalita obrázka priamo ovplyvňuje jeho veľkosť, a teda rýchlosť sťahovania na internete a otvárania na počítači.

K dispozícii sú tiež tri rôzne formáty:

• Základné („štandardné“) je zobrazovanie obrázkov na obrazovke riadok po riadku. Toto je najbežnejší spôsob zobrazenia obsahu súboru JPG.
• Base Optimized je obrázok s optimalizovaným Huffmanovým kódovaním.
• Progresívny je formát, ktorý postupne zlepšuje kvalitu obrázkov pri ich sťahovaní.

Na proces konzervácie sa možno pozerať aj z druhej strany – konzervácie medzistupňov práce. Na toto existujú formát PSD, formát vytvorený špeciálne pre Photoshop.

Vyberte ho z rozbaľovacieho zoznamu formátu okna Uložiť ako, aby ste mohli fotografiu opäť vrátiť do úprav, pretože sa uloží celá paleta vrstiev, všetky filtre a efekty, ktoré ste aplikovali. To všetko je možné prestavovať a dopĺňať. .

Tretí spôsob uloženia vo Photoshope

Kliknite na krížik tohto obrázku (červená šípka), ak chcete obrázok zavrieť, ale zostať vo Photoshope, alebo na krížik samotného Photoshopu (modrá šípka), ak chcete svoju prácu úplne dokončiť. Ďakujeme!

• Preklad

Pokiaľ ide o šírku pásma, obrázky sú žrúti. V priemere zaberajú najväčšiu (62 %) priemernú návštevnosť stránok a sú najčastejšou prekážkou pri prenose. Pri načítavaní obrázky trhajú stránku, otláčajú ostatné prvky a spôsobujú nemotorné prekreslenie ( približne. preklad.: Samozrejme, môžete sa toho zbaviť určitým rozložením, ale potom musíte napevno kódovať alebo obmedziť veľkosť obrázkov). Načítanie obrázka na stránku je buď vnímané ako „tik, tik, tik, tik, tik, hotovo“, alebo najprv nie je vôbec nič a potom zrazu „bum!“ a prichádza z ničoho nič. Každý chápe, čo sa myslí pod pojmom „tik, tik, hotovo“ a „bum“ a všetci sme trochu naštvaní, pretože cítime, koľko času z našich krásnych a krátkych životov sa stráca čakaním na načítanie obrázkov.

premárnená príležitosť

Hlavným vinníkom pomalého vykresľovania sú fotografie. Sú najčastejšie žiadaným typom obrazu a v priemere vážia najviac. Majú milióny farieb a počet bitov na pixel sa neustále zvyšuje. Sú nádherné a nechceme robiť kompromisy v kvalite.

Fotografie optimalizované pre web sú jpeg a jpeg sa delí na dva typy: základné sekvenčné (základné) a progresívne (progresívne). Sekvenčný jpeg je jedno skenovanie obrázka zhora nadol v plnom rozlíšení, zatiaľ čo progresívny jpeg je séria skenov so zvyšujúcou sa kvalitou. Takto sa vykresľujú – sekvenčný jpeg sa kreslí zhora nadol („tick, tick, tick, ...“) a progresívny jpeg si rýchlo označí svoje územie a potom sa vylepší (aspoň tak je to poňaté).

Progresívny jpeg je lepší, pretože je rýchlejší. Vyzerať rýchlejšie znamená byť rýchlejší a vnímaná rýchlosť je dôležitejšia ako skutočná rýchlosť. Aj keď šetríme na obsahu, ktorý poskytujeme, progresívny jpeg poskytuje čo najviac a čo najskôr. Pomáha nám v neľahkej úlohe poskytovať veľké a krásne fotografie.

V miestnom experimente – ilustrácia na začiatku príspevku – na uškrtenom kanáli sa na stránke objaví progresívny jpeg s veľkosťou 80 kb predtým než 5K po sebe idúci jpeg (rovnaký obrázok zmenšený) vo Firefoxe na Windows, čo by malo zapôsobiť. Samozrejme, progresívny jpeg má nízke rozlíšenie pri prvom prechode, ale obsahuje toľko informácií ako malý obrázok, alebo dokonca viac. A ak sa mierka stránky zmenší napríklad na mobilnom zariadení, tak nízke rozlíšenie ani nie je poznať. Responzívne obrázky nám práve teraz fungujú približne. preklad.: odkaz na responzívny webový dizajn)!

Progresívny jpeg je v podstate lepší. Aký je teda najbežnejší typ jpeg na webe? Uhádnuté: konzistentné a s veľmi veľkým náskokom. Vo vzorke tisícok obrázkov je 92,6 % konzistentných.

Nebojte sa, musíme len oznámiť, že progresívny jpeg je najlepším postupom a zapojiť zvyšok sveta. Ale na takéto oznámenie si musíte byť istý. A preto musíte najprv pochopiť, ako sa veci majú dnes s podporou progresívnych prehliadačov jpeg.

Kontrola reality #1

Progresívne jpegs sa vykresľuje vo všetkých prehliadačoch, takže si s tým nemusíte robiť starosti. Sme znepokojení ako sú nakreslené.

Správanie progresívnych jpegov v prehliadačoch

Prehliadač (konkrétna verzia)	Vykresľovanie progresívnych jpegov v popredí (v popredí)	Kreslenie progresívnych jpegov na pozadí (pozadie)
Chrome (v 25.0.1323.1 dev Mac, 23.0.1271.97 m Win)	postupne (veľmi rýchlo!)	postupne (veľmi rýchlo!)
Firefox (v 15.0.1 Mac, 12.0 Win)	postupne (veľmi rýchlo!)
Internet Explorer 8	okamžite po nahraní súboru (pomalé)	okamžite po nahraní súboru (pomalé)
Internet Explorer 9	postupne (veľmi rýchlo!)	okamžite po nahraní súboru (pomalé)
Safari (v. 6.0 Desktop, v. 6.0 Mobile)	okamžite po nahraní súboru (pomalé)	okamžite po nahraní súboru (pomalé)
Opera (v11.60)	UPD: postupne (veľmi rýchlo!)(dôkaz)	okamžite po nahraní súboru (pomalé)

Výsledky sú sklamaním, ale celkovo trhový podiel prehliadačov s progresívnym vykresľovaním progresívnych jpegov stúpa. Podpora je zatiaľ okolo 65 % (Chrome + Firefox + IE9).

Bohužiaľ, prehliadače, ktoré nerenderujú progresívne jpegs, ich po dokončení načítania obrazu postupne vykresľujú celé, čo ich v podstate robí menej progresívnymi. Sú pomalšie ako následné jpegs. Aj keď sekvenčné vykresľovanie nie je také rýchle a plynulé ako progresívne vykresľovanie, na počkanie aspoň niečo dáva a tick tick je akýmsi indikátorom načítania (dobrá vec). Nepodceňujte dôveru, ktorú používatelia cítia, keď vidia, že sa niečo deje.

Výberom progresívneho formátu jpeg poskytujeme väčšine používateľov skvelý zážitok a menšine – veľmi významnej menšine – horší zážitok. Ale vybrať si konzistentný jpeg, pretože je vhodnejší pre menšinu názorov, je hrozný kompromis. Je potrebné ponúknuť používateľom to najlepšie a pozerať sa do budúcnosti.

Kontrola reality #2

Možno sa pýtate: „Nebudú progresívne jpegy vážiť viac ako bežné jpegy?“ Neplatíme za „vrstvy“? Pri niektorých iných typoch vrstvených obrázkov platíme, ale nie pri jpeg. Progresívny jpeg je zvyčajne o niekoľko kilobajtov menší ako jeho progresívna verzia. Stoyan Stefanov v procese vytvárania grafu konverzie 10 000 náhodných po sebe idúcich jpegov na progresívne objavil cenné pravidlo: súbory väčšie ako 10 Kb budú v progresívnej verzii najčastejšie vážiť menej.

Presviedčanie by bolo jednoduchšie, keby ste mohli povedať, že progresívne jpegy vždy vážia menej, takže by sa mali vždy používať. Stoyan nám v tom pomáha. Hovorí: „Ďalším postrehom o pravidle 10 kB je, že v prípadoch, keď je váha sekvenčného jpegu menšia, je menšia o malý rozdiel. A keď je menej progresívny, zvyčajne je oveľa menej. Takže povedať, že by ste mali vždy používať progresívne a bude to lepšie, je v poriadku.“

Presne to, čo som chcel počuť! Pre každý sekvenčný jpeg, ktorý sme rozdali, sa premeškali príležitosti vo veľkosti súboru a vnímanej rýchlosti sťahovania. Výber progresívnej možnosti je bezpečný a mal by byť vždy predvolenou voľbou. A už keď sú všetky jpegy progresívne, ak chcete ďalej optimalizovať, môžete ušetriť pár bajtov a iba na najmenších obrázkoch.

Dôvodom, prečo sú sekvenčné jpegy na webe najbežnejšie, je nepochybne to, že nástroje na optimalizáciu obrázkov ich vytvárajú štandardne. Všetko, čo som pozeral – Photoshop, Fireworks, ImageMagick, jpegtran – má však možnosť uložiť v progresívnej verzii. Ak teda chcete vykresliť progresívne súbory jpeg, musíte vedome upraviť proces optimalizácie obrázkov.

Napríklad Smushit dokáže previesť sekvenčné jpegy na progresívne. Smushit, mimochodom, možno spustiť z príkazového riadku a integrovať do procesu optimalizácie obrazu.

Ako viete, či sú vaše jpegy progresívne? Tu je niekoľko spôsobov, ako identifikovať typ jpeg:

1. ImageMagick- spustite z príkazového riadku: identifikácia -verbose mystery.jpg | grep Interlace Výstup bude buď „Interlace: JPEG“ alebo „Interlace: None“.
2. photoshop- Otvorte súbor. Vyberte Súbor -> Uložiť pre web a zariadenia. Ak je to progresívny jpeg, potom bude začiarknuté políčko Progresívne.
3. Akýkoľvek prehliadač- Sekvenčné jpegy sa budú načítavať zhora nadol, zatiaľ čo progresívne sa budú správať inak. Ak sa súbor sťahuje príliš rýchlo, možno budete musieť obmedziť šírku pásma kanála. Používam ipfw na mac.

Kontrola reality #3

Podľa tohto FAQ o kompresii jpeg je každý prechod progresívneho vykresľovania približne taký náročný na CPU ako vykresľovanie celého sekvenčného súboru jpeg. Nezáleží na stolných počítačoch, ale na mobilných zariadeniach to môže byť dôležité.

Dodatočné výpočty sú nevýhodou, ale nie kameňom úrazu. Poskytovanie fotografií na slabom hardvéri je bez ohľadu na to náročná úloha. Viem o tom, pretože píšem aplikáciu galérie fotografií s nekonečným rolovaním a na iPade spadne. Pri spracovaní veľkého množstva obrázkov na mobilných platformách v každom prípade vzniknú zložité úlohy.

Ako môžete vidieť v tabuľke, mobilné Safari nevykresľuje progresívne jpegs progresívne, pravdepodobne preto, že sú náročné na procesor. progresívny jpeg nie je Nový obrazový formát. Preto vedome a bezdôvodne nepodporovať progresívny jpeg nie je voľbou pre prehliadače, dokonca ani tie mobilné. Dúfajme, že mobilné prehliadače čoskoro zvládnu progresívne vykresľovanie, ale dôvody súčasnej nedostatočnej podpory dávajú zmysel. Je to škoda, pretože práve na mobilných zariadeniach by prišlo vhod zvýšenie rýchlosti a úspora veľkosti súborov, ktoré poskytuje progresívny jpeg. Vyššie bolo spomenuté, že momentálne sa zdá byť riešením pre responzívne obrázky. V skutočnosti by mohol byť, ale ešte neprišiel ten čas.

Pohľad do budúcnosti

Pred mesiacom Google skočil na palubu so svojou službou Mod_Pagespeed, vďaka čomu sa convert_jpeg_to_progressive stal hlavným filtrom. Ani SPDY nezaostáva, štandardne konvertuje jpegy nad 10 kb na progresívne, podľa Stoyanovho pravidla. Prehliadače, ktoré podporujú prírastkové zobrazenie, sa vďaka tomu budú cítiť oveľa rýchlejšie. Ako vidíte z tabuľky vyššie, ktorá zahŕňa prehliadač Google Chrome, takéto akcie spoločnosti Google majú zmysel. Nebudem tvrdiť, že ak si „nerob-nerob-web-rýchlejšie“ Google zvolil progresívny jpeg, tak by sme to mali aj my. Ale toto je zbytočné potvrdenie. A čo je najdôležitejšie, ukazuje to, že progresívny jpeg – formát, ktorý je už desaťročie v mrazničke – sa vracia.

Nie všetky súčasné prehliadače implementujú progresívne vykresľovanie progresívnych jpegov. Napriek tomu tí, ktorí implementujú, z toho skutočne profitujú. A okrem toho získame úspory vo veľkostiach súborov. Dnes je to najlepšia možnosť a oplatí sa ju využiť. Progresívny jpeg je budúcnosť, nie minulosť.

Štítky: Pridajte štítky

Príprava akéhokoľvek digitálneho obrázka čitateľného grafickým editorom Adobe Photoshop, či už ide o súbor PSD, obrázok TIF alebo „veľký“ obrázok JPEG, na uverejnenie na webovej stránke, na fóre alebo v sociálnych sieťach, ako aj na odoslanie e-mailom . Inými slovami, jpeg pre internet. Vyšlo to v rýmoch.

Samozrejme, obrazové formáty, ktoré Photoshop dokáže čítať, sa takmer neobmedzujú na tieto tri. A čo je fajn, väčšina sa dá previesť do JPEG. Bez ohľadu na pôvodný formát existujú dva spôsoby, ako „japegizovať“ vo Photoshope. Možnosť výberu je dvojnásobne príjemná. Obe cesty sú odlišné. Vonkajšie rozdiely sú odhalené voľným okom, rozdiely v účele („Ktorý spôsob nasledovať?“) zvýrazním konkrétne.

V tomto návode predstavím dva podrobné pokyny s potrebnými teoretickými „škvrnami“. Je navrhnutý tak, aby vám ukázal, ako najlepšie uložiť virtuálnu kresbu, koláž alebo fotografiu v široko používanom formáte JPEG. Posledná možnosť je najúčinnejšia pre obrázky s plynulými prechodmi farieb.

Na upevnenie a rozšírenie získaných vedomostí, ako aj na rozvoj zručnosti som pripravil príslušné cvičenia. Navrhujem, aby ste ich dokončili a potom zverejnili svoje výsledky v komentároch k tejto lekcii. Vyskúšajte svoju zručnosť v „poľných podmienkach“!

Prvý spôsob

1 krok

Pôvodný obrázok otvorím vo Photoshope. V mojom prípade ide o súbor s názvom „Example.psd“ obsahujúci vyžrebovanú loptičku.

Na klávesnici stlačím kombináciu klávesov „Ctrl“, „Shift“ a kláves označený latinkou „S“ alebo vyberiem „Súbor“ („Súbor“)> „Uložiť ako...“ („Uložiť ako . ..“) v hlavnom menu. Zobrazí sa dialógové okno s názvom „Uložiť ako“.

2 krok

Vyberám umiestnenie budúceho obrázku JPEG. Do poľa „Názov súboru“ zadajte v prípade potreby nový názov obrázka. V rozbaľovacom zozname "Typ súboru" vyberiem formát "JPEG (*.JPG, *.JPEG, *.JPE)".

Nižšie uvedené parametre ponechávam nezmenené, pričom sa uistím, že je špecifikovaný a vybraný „štandardný“ sRGB ako farebný profil vložený do budúceho obrázka JPEG. Ak áno, prejdite na 4. krok.

Ak je namiesto sRGB zadaný iný farebný profil, napríklad ProPhotoRGB alebo AdobeRGB, potom pred začatím postupu uvedeného v lekcii skonvertujem pôvodný obrázok do farebného priestoru sRGB, aby sa farby zobrazovali konzistentne na väčšine zariadení. Urobím to nasledujúcim spôsobom.

3 krok

Stlačením klávesu Esc na klávesnici zatvorím okno Uložiť ako.

Vyberiem v hlavnom menu „Obrázok“ („Obrázok“)> „Režim“ („Režim“). Ak je „zaškrtnutie“ nastavené oproti „8 bits\channel“ („8bits\Channel“), potom vyberiem „16 bits\channel“ („16bits\Channel“). Je žiaduce zvýšiť farebnú hĺbku, aby prevod z jedného farebného profilu na druhý prebehol hladko. Vizuálne zmena farebnej hĺbky sotva ovplyvní pôvodné a konečné obrázky.

Potom z hlavného menu vyberiem „Upraviť“ > „Previesť na profil“. Zobrazí sa dialógové okno s názvom „Konvertovať na profil“.

V mojom prípade sa zdrojový farebný profil ("Source Space"), ktorý popisuje farby na výkrese, nazýva "Adobe RGB (1998)". V rozbaľovacom zozname "Cieľový priestor" vyberiem hodnotu "sRGB IEC61966-2.1". Skontrolujem parametre prevodu - sú umiestnené nižšie: parameter "Nástroj" ("Engine") je nastavený na "Adobe (ACE)", "Metóda (vykresľovanie)" ("Zámer") - "Relatívna kolorimetrická" ("Relatívna Kolorimetrické"), nastavte Nie je začiarknuté políčko vedľa možnosti „Použiť kompenzáciu čierneho bodu“, ani možnosť „Vyrovnať obrázok na zachovanie vzhľadu“.

Ak ste zvýšili farebnú hĺbku (urobil som to trochu skôr), možnosť „Použiť rozklad“ bude neaktívna. Ak je na otvorenom obrázku iba jedna vrstva (ak otvárate JPEG alebo „jednoduché“ TIFy, zvyčajne to tak je), potom je tiež vypnutá možnosť Flatten Image to Preserve View.

Kliknem na tlačidlo „Dokončiť“ („OK“). Okno Konvertovať na profil zmizne.

4 krok

V hlavnom okne programu sa zobrazí nové dialógové okno s názvom „Možnosti JPEG“. Parameter "Kvalita" umožňuje nastaviť pomer kvality výstupného obrazu a objemu, ktorý bude obraz zaberať v pamäti počítača. Odplatou za zmenšenie hlasitosti je teda degradácia kvality pôvodného obrazu. Čím nižšie je nastavenie kvality, tým menšia je veľkosť obrázka JPEG.

V tomto príklade sa zastavím na hodnote 6.

Na vyhodnotenie kvality obrázka pred uložením začiarknem políčko vedľa parametra „Náhľad“.

5 krok

Nastavte hodnotu druhého parametra - "Možnosti formátu" - rovnú "Štandardne optimalizované" ("Optimalizované základne"). Hlasitosť budúceho obrázka JPEG sa znížila, ale kvalita obrázka zostáva rovnaká.

6 krok

Kliknem na tlačidlo OK v okne Možnosti JPEG a skontrolujem výsledok.

Porovnávam objemy pôvodnej kresby PSD (~ 3000 Kb) a konečného obrázka JPEG (82 Kb). Ukázalo sa teda, že súbor JPEG je približne 36-krát menší ako pôvodný obrázok s vizuálne rovnakou kvalitou. Pohodlné!

Upozorňujem na skutočnosť, že veľkosť výsledného obrázku JPEG zostáva rovnaká, ako v pôvodnom obrázku PSD, je to 2480 pixelov × 2480 pixelov.

Druhý spôsob

1 krok

Pôvodný obrázok otvorím vo Photoshope.

Na klávesnici stlačím kombináciu kláves „Ctrl“, „Alt“, „Shift“ a kláves označený latinkou „S“ alebo v hlavnom menu vyberiem „Súbor“ > „Uložiť pre web ...“.

Zobrazí sa nové dialógové okno s rovnakým názvom.

2 krok

3 krok

Hodnotu parametra „Kvalita“ („Kvalita“) som nastavil na maximum.

4 krok

Veľkosť obrázka zmenšujem pomocou parametra „Veľkosť obrázka“.

Ide o voliteľnú operáciu, ktorá však pomáha výrazne zmenšiť veľkosť budúceho obrázka JPEG, najčastejšie s minimálnou stratou kvality. Na jednej strane zmenšenie veľkosti povedie k prirodzenému zmenšeniu objemu a na druhej strane k zníženiu detailov. To druhé zase obmedzuje moju schopnosť vytlačiť výsledný obrázok JPEG. Ak neplánujem vytlačiť najnovšiu, tak na obmedzenia zabudnem.

V tomto príklade zadávam do poľa „Šírka“ hodnotu 600. Hodnota v poli „Výška“ sa automaticky zmení. Veľkosť výstupného obrázka sa tiež automaticky zmení vzhľadom na veľkosť pôvodného obrázka zadanú v poli „Percentá“. Zmeny sa vyskytnú automaticky a pole "Percentá" je v aktívnom stave, ak sú polia-parametre "Šírka" a "Výška" prepojené, čo dokazuje príslušná ikona umiestnená napravo od pomenovaných polí.

V náhľadovom okne vľavo zhodnotím veľkosť a kvalitu obrázku. A približný objem toho posledného zistím podľa uvedeného čísla, zvyčajne v kilobajtoch (Kb) alebo megabajtoch (Mb) pod ľavým rohom okna.

5 krok

Začiarknem políčko vedľa parametra „Optimalizované“.

6 krok

Ak chcem ďalej zmenšiť veľkosť výstupného obrazu, tak znížim hodnotu parametra „Kvalita“ („Kvalita“). Odporúčam držať sa hodnôt v rozmedzí 45-90.

V tomto prípade zvolím hodnotu 75.

Výsledkom je, že pri rýchlosti prístupu na internet jeden megabit (1 Mbit) bude priemerný čas sťahovania mojej kresby z internetu jedna sekunda. Je uvedená pod hodnotou hlasitosti budúceho obrázka JPEG.

Zároveň sa vizuálne ukázalo, že obraz má celkom prijateľnú kvalitu, prechody tónov sú celkom hladké.

7 krok

Začiarknem políčko vedľa možnosti „Previesť na sRGB“ a z nižšie uvedeného rozbaľovacieho zoznamu vyberiem hodnotu „Farba monitora“.

8 krok

Nakoniec zaškrtnem políčko vedľa možnosti „Vložiť farebný profil“.

Akcie v 7. a 8. kroku sú žiaduce, aby sa budúci obrázok JPEG zobrazoval na rôznych zariadeniach približne rovnako.

krok 9

V dialógovom okne, ktoré sa zobrazí s názvom „Uložiť optimalizované ako“ („Uložiť optimalizované ako“), vyberiem umiestnenie obrázka JPEG a v prípade potreby nastavím jeho názov. V aktívnom okne kliknem na tlačidlo „Uložiť“. Obe okná zmiznú. Teraz môžem zhodnotiť výsledok.

Zatvorte pôvodný obrázok. V zobrazenom dialógovom okne s výzvou na uloženie zmien vyberte možnosť „Nie“ („Nie“).

Obrázok získaný druhým spôsobom je vhodné použiť na publikovanie na internete. A obrázok získaný prvým spôsobom je možné okrem publikovania na internete aj vytlačiť. Vzhľadom na to, že sa veľkosť obrazu nezmenila, nebol podrobený interpolácii, čo znamená, že jeho kvalita je a priori vyššia ako kvalita obrazu získaného druhým spôsobom.

Viac o interpolácii a jej vplyve na zhoršenie kvality digitálneho obrazu vám poviem v lekcii „Čo je interpolácia?“

​

Na upevnenie získaných vedomostí vám navrhujem nielen uložiť niekoľko vlastných fotografií vo formáte JPEG, ale tiež dokončiť cvičenia pripojené k tejto lekcii. Tie posledné pokrývajú výzvy, ktorým môžete pri fotografovaní čeliť.

Pokračujeme v rozhovore o optimalizácii obrázkov. Dokážeme optimalizovať (komprimovať) nielen obrázky tretích strán, s ktorými sme niečo urobili, alebo tie obrázky, ktorých sme autormi, ale ich aj jednoducho otvárať vo Photoshope za jediným účelom optimalizácie.

Môžu to byť napríklad pamätné fotografie z dovolenky alebo dovolenky, ktoré chceme uložiť na disk samotného počítača alebo na vymeniteľné médiá (flash disky, externé pevné disky).

Hovoriť o optimalizácii nie je v žiadnom prípade apelom na to, aby ste sa po návrate z dovolenky či dovolenky ponáhľali s optimalizáciou (komprimáciou) fotografií (grafických dát). Ale možno má zmysel, aby sa tieto isté obrázky zúčastnili procesu optimalizácie. Je rozumné vytvárať a dopĺňať elektronický fotoalbum fotografiami, ktorých veľkosť sa po prepočte na fyzické dĺžkové miery počíta v metroch? Vo všeobecnosti o tom premýšľajme, keď sa objaví nálada.

Photoshop je program, ktorý uspokojuje potrebu spracovania a vytvárania obrázkov rôzneho stupňa zložitosti. Vo Photoshope, rovnako ako v mnohých iných programoch a vo všeobecnosti v počítačových programoch, sa mnohé procesy vyskytujú nezávisle. My ako používatelia však môžeme vykonať určité úpravy práve v týchto procesoch, čo je nepochybne pohodlné.

Takže obrázok vo Photoshope je pripravený na uloženie v inom formáte, ako je formát Photoshopu, teda optimalizácia. Ak vyberieme možnosť „Uložiť“ na karte „Súbor“ v hornom menu, potom, povedzme, že toto je náš výtvor, bude uložený vo formáte PSD, to znamená, že súbor bude „Photoshop“. Ale výberom inej možnosti, ktorá je prítomná v drvivej väčšine počítačových programov a nazýva sa „Uložiť ako“, potom v tomto prípade máme možnosť vybrať si, aký typ súboru by mal byť náš výtvor mimo Photoshopu:

Po výbere zo zoznamu typov ponúkaných editorom, formátu súboru s názvom JPG, máme možnosť upraviť úroveň kompresie (optimalizácie) v špeciálnom technickom okne, ktoré sa zobrazí v automatickom režime, stačí vybrať práve tento formát (typ) JPG:

Toto okno sa pred nami otvorí s nastaveniami, ktoré už nastavil samotný Photoshop. Bez toho, aby sme niečo urobili, môžeme s nimi súhlasiť stlačením tlačidla „OK“. A s takýmito našimi činmi môžeme „dobre spať“ (humor), proces optimalizácie bol úspešný. A môžeme sa podieľať na procese optimalizácie. Zvýšme mierku viditeľnosti na 200 % zatvorením predtým otvoreného okna na úpravu úrovne kompresie:

(Umiestnenie tlačidla na výber stupnice pre verzie CS4, CS5).

Teraz musíme opäť prejsť celú cestu, kým sa neobjaví okno na úpravu úrovne kompresie (optimalizáciu). Ak sa sami presvedčíme o užitočnosti optimalizácie obrázkov, pričom sa staneme hlavnými aktérmi procesu (sami si ho regulujeme), tak v budúcnosti budeme obrázky v prvom rade škálovať, aby sme sa vyhli opakovaným akciám.

Zmena mierky viditeľnosti bola vykonaná preto, aby sme lepšie videli, čo sa stane s obrázkom, keď zmeníme nastavenia. Percento stupnice môžeme zvýšiť ešte viac, alebo to nedokážeme urobiť vôbec.

Okno nastavení je teda pred našimi očami a môžeme pristúpiť k kompresii obrázka:

Aby sme videli, ako sa mení veľkosť súboru (obrázka), musíme kliknutím ľavého tlačidla myši zaškrtnúť prázdne políčko vedľa nápisu „Zobraziť“. Potom rovnakými kliknutiami myši striedavo vyberte jeden alebo druhý typ formátu (základný štandardný, základný optimalizovaný, progresívny) a navyše zmeňte počet krokov (3,4,5):

Pri všetkom, čo robíme, by sme nemali zabúdať na samotný obraz. Koniec koncov, tieto úpravy sú pre neho. Celú svoju pozornosť preto nesústredíme len na indikátor hlasitosti, ale pozrieme sa aj na zmeny, ku ktorým s obrazom dochádza.

Naše akcie na výber optimalizačného (kompresného) formátu je možné doplniť zmenou ďalších parametrov obrázka:

A opäť máme možnosť vybrať si jeden z niekoľkých parametrov: Môže to byť Nízky, Stredný alebo Vysoký, prípadne aj Najlepší. Stačí jedno kliknutie a možnosti sú k našim službám. Nemusíme otvoriť zoznam možností, ale jednoducho posuňte posúvač - bude to rovnaká voľba zo zoznamu možností parametrov:

Keď sledujeme zmeny vo veľkosti obrázka a súboru, keď meníme parametre obrázka a typ formátu, prestávame upravovať podľa vlastného uváženia. Teda vtedy, keď sa podľa nás dostatočne zmenšil objem súboru a nedošlo k viditeľnej strate kvality obrazu. Potom kliknite na tlačidlo "OK" v tom istom okne.

Ak sa v našich akciách vrátime späť a zastavíme sa v momente, keď sa práve otvorilo okno úpravy úrovne kompresie a pozrieme sa na vrstvy, uvidíme, že sú zlúčené do jednej spoločnej vrstvy, čo sa pri viacvrstvovom obrázku nestane, zostáva súborom PSD.

Všetky súbory majú svoje vlastné kódovanie (kód) a práve podľa kódu ich rozpoznávajú rôzne programy a operačné systémy. To znamená, že obrazové súbory majú svoj vlastný kód a textové súbory majú svoj vlastný atď. Tieto kódy sú rôznymi programami a operačnými systémami vnímané odlišne, práve z týchto dôvodov môžeme vidieť mierne odchýlky v zobrazení hodnôt parametrov.

Napríklad sme komprimovali (optimalizovali) obrázok a jeho objem vo Photoshope je nasledovný:

Optimalizovaný JPG súbor (obrázok) uložím na plochu počítača. Pri umiestnení kurzora myši na ikonu súboru Windows zobrazí mierne odlišnú hodnotu.