Jak ušetřit pro web ve Photoshopu. Jak správně uložit obrázek pro web ve Photoshopu. Optimalizace kvality komprese fotografií
Vytvořili jste své malé mistrovské dílo ve Photoshopu a chcete se s ním pochlubit svým přátelům. Chcete-li to provést, musíte jej uložit pro zveřejnění na internetu.
Z nabídky Soubor vyberte Uložit pro web a zařízení. Otevře se velké dialogové okno určené k optimalizaci uložených obrázků, tedy k nalezení optimálního poměru kvality obrázku a výsledné velikosti souboru.
· 1. Panel nástrojů.
· 2. Možnosti zobrazení
· 3. Oblast komentářů
· 4. Měřítko
· 5. Informace o barvách
· 6. Zobrazit v prohlížeči
· 7. Paleta optimalizace
· 8. Metadata
· 9. Vzorník barev
· 10. Velikost obrázku
· 11. Ovládání animace
· 12. Tlačítka pro potvrzení zrušení operace
· 13. Oblast náhled
Oblast náhledu
Pokud se vám zdá, že obrázek je pro umístění na webovou stránku příliš velký, otevřete záložku „Velikost obrázku“ - (č. 10 v popisu dialogového okna) - a zmenšete jeho šířku a výšku.
Nastavení a optimalizace pro formát GIF
1. Nabídka "Optimalizovat"
2. Nabídka "Formát souboru"
3. Algoritmus redukce barvy
4. Ditheringový algoritmus
Poznámka:Ukládání obrázků pomocí dialogového okna „Uložit pro web a zařízení“ (často nazývané „export“) zahrnuje vytvoření „lehčí“ a poněkud „degradované“ kopie, určené speciálně pro publikování na webu. Nikdy neukládejte optimalizovanou kopii přes původní obrázek!
Modul Uložit pro Web a zařízení(Save for Web & Devices), což výrazně zjednodušuje vaši práci, poskytuje větší flexibilitu a nejlepší kvalita Převeďte obrázky do formátů GIF, JPEG a PNG. Hlavní okno modulu je znázorněno na Obr. 15.10. Otevře se stejným příkazem z nabídky Soubor(Soubor). Tento příkaz proveďte pro soubor BAS-RELIEF1_ON_SINGER_HOUSE.jpg.
Rýže. 15.10. Dialogové okno Uložit Pro Web& Zařízení(tab 4-nahoru)
Hlavní část okna zabírá oblast náhledu. Může být v jednom ze čtyř režimů, které lze nastavit pomocí karet:
± Originál(Originál). Původní obrázek.
± Optimalizováno(Optimalizováno). Pohled na obrázek po optimalizaci. Přesně tak to bude vypadat v prohlížeči.
± 2-Up(Dva). Současné prohlížení původního a optimalizovaného vynálezu. Obě okna v oblasti zobrazení však mohou zobrazit optimalizovaný obraz, ale s různé parametry optimalizace.
± 4-nahoru(Čtyři). V tomto režimu je oblast zobrazení rozdělena do čtyř oken, ve kterých si můžete objednat ukázku originálních a optimalizovaných snímků z různé parametry optimalizace. Tento režim je vhodný k výběru nejlepší parametry. Umožňuje vizuálně vyhodnotit vliv komprese nebo zmenšení palety na kvalitu a velikost obrazu.
Ovládání měřítka zobrazení v oblasti zobrazení je organizováno stejným způsobem jako v samotném Photoshopu: pomocí seznamu měřítek v levém dolním rohu okna a nástrojů Přiblížení(Měřítko) a Ruka(Ruka).
Pod každým oknem oblasti zobrazení je uveden formát souboru obrázku (GIF, JPEG nebo PNG), parametry optimalizace, velikost souboru a doba, za kterou se soubor stáhne do prohlížeče při dané rychlosti modemu. Vyberte jej v nabídce zobrazení, která se otevře stisknutím kulaté tlačítko s trojúhelníkovou šipkou. Zde také najdete možnosti barevného zobrazení:
± Rozostření prohlížeče(Plynulý přechod barev v prohlížeči). Pokud obrázek obsahuje více barev, než dokáže monitor zobrazit, budou v prohlížeči aproximovány, pokud zaškrtávací políčko povolíte.
± Skrýt Auto Slice(Skrýt rozdělení na fragmenty). Používá se pro obrázky, které jsou „rozřezány“ na fragmenty.
± Nekompenzovaná barva(Žádné úpravy). Barvy se zobrazují v oblasti zobrazení „tak, jak jsou“, bez oprav.
± Standardní barva Windows(Norma Barvy Windows). Takto se barvy odrážejí na monitorech počítačů se systémem Windows.
± Standardní barva Macintosh(Standardní barvy Macintosh). Obrazy se na počítačích Macintosh jeví o něco světlejší, protože Mac OS používá jinou hodnotu gama (1,8) než Windows (2,2). Výběrem této možnosti získáte představu o tom, jak bude obrázek vypadat pro uživatele počítačů Macintosh.
± Použít barevný profil dokumentu(Použijte profil dokumentu). Vzhled vynálezu je upraven v souladu s nastavením systému správy barev provedeným ve Photoshopu.
Ve stejné zobrazovací oblasti můžete zadat parametry modemu, který používáte.
Vyzkoušíme si tento příkaz v akci na basreliéfním obrázku ze souboru BAS-RELIEF2_AT_HOME_ZINGER.jpg.
1. Otevřete soubor BAS-RELIEF2_AT_SINGER_HOUSE.jpg.
2. Vyberte tým Uložit pro web a zařízení(Uložit pro web a zařízení) z nabídky Soubor(Soubor).
3. Vyberte režim 2-Up(Dva) přechodem na příslušnou záložku (obr. 15.11).
Rýže. 15.11. Dialogové okno Uložit pro web a zařízení(tab 2-Up)
4. Na pravé straně okna jsou ovládací prvky pro parametry exportu. Na seznamu Přednastaveno(Doporučená nastavení) vyberte formát uložení JPEG střední(obr. 15.12).
5. Seznam Přednastaveno(Suggested Settings) nabízí několik typických hodnot kvality obrazu: JPEG vysoká(Vysoký) Nízký JPEG(Nízký), JPEG střední(Průměrný). Jemné úpravy se provádějí pomocí posuvníku Kvalitní(Kvalita), umístěný vpravo. Nejprve jej nainstalujte pomocí něj maximální kvalitu, 100 %. S takovými vysoká hodnota obraz na pravé straně zobrazovací plochy (optimalizovaný) je prakticky k nerozeznání od originálu na levé straně. Snižte kvalitu obrazu pomocí
posuvník Kvalitní(Kvalita) až 15-18%. Podívat se na informační pole v příslušných částech pozorovacího prostoru. Původní, nekomprimovaný obrázek zabírá 3,21 MB a komprimovaný obrázek zabírá 109 KB. I tak nízký koeficient komprese poskytuje téměř čtyřnásobný nárůst velikosti souboru.
6. Podívejte se na odhad doby načítání komprimovaný obrázek. Bude to 40 sekund při rychlosti modemu 28,8 KB/s. Nyní si představte sami sebe jako čtenáře webové stránky obsahující pět takových obrázků. Budete čekat, až se načte celá stránka? S největší pravděpodobností ne. Abyste si zachovali čtečku, musíte udělat obrázky co nejkompaktnější. V případě formátu JPEG stačí snížit kvalitu zvýšením kompresního poměru. Nastavte posuvník Kvalitní(Kvalita) je blíže k levému okraji. Je zřejmé, že kvalita se zhoršila a objevila se charakteristická „špína“. Ale je to opravdu tak špatné?
7. Nyní si zahrajeme ještě několik sekund pro čtenáře webové stránky. Kompresní poměr lze zvýšit předběžným rozmazáním obrazu. Posuvník Rozmazat(Rozostření) v oblasti Přednastaveno(Doporučená nastavení) odstraní nutnost opustit okno exportního filtru. Mezera by samozřejmě neměla být příliš výrazná, aby neutrpěla kvalita obrazu. Hodnota 0,2 tomuto požadavku plně vyhovuje.
8. Zaškrtávací políčko Progresivní(Postupně) nastaví obrázek tak, aby byl při načtení do prohlížeče prokládaný. Mírně zvětšuje velikost souboru, ale také umožňuje čtenáři stránky, aby si sám určil, zda se vyplatí čekat na její načtení. Nainstalujte jej.
9. Zaškrtávací políčko Profil ICC(ICC profil) umožňuje vložit obrázek do souboru barevný profil. Toto políčko zaškrtněte, pouze pokud k tomu máte dostatek zdrojů. dobré důvody, protože vložený profil zvětšuje velikost souboru o 3-4 kB.
10. Zaškrtávací políčko Optimalizováno(Optimalizováno) zahrnuje další optimalizace vnitřní struktura JPEG, který někdy ještě více zmenší velikost souboru. Vedlejší efekt optimalizace může nastat pouze při používání velmi starých verzí prohlížečů. Všechny nové prohlížeče zpracovávají takové soubory normálně.
11. Správnost provedených nastavení lze snadno zkontrolovat načtením hotového vynálezu do prohlížeče. K tomu nemusíte ani opouštět okno eskortního modulu. Klepněte na tlačítko Device Central(Centrum zařízení) a modul otevře prohlížeč radiotelefonu s načteným obrázkem (obr. 15.13). Barvu pozadí stránky lze přednastavit pomocí seznamu Matný(Barva pozadí stránky).
Rýže. 15.13. Náhled optimalizovaného obrázku v okně prohlížeče
Pro mnoho webmasterů optimalizace obrázků pro WEB prostředí je zpracování obrázků a jejich ukládání různé formáty: gif (1-256 barev), png-8 (1-256 barev), png, jpeg. Po optimalizaci snímků by měla být jejich hmotnost minimální. Obvykle by webová stránka obsahující obrázky neměla mít více než 600 kB. Velikost obrázků přímo závisí na jeho kvalitě. Čím menší je hmotnost obrazu, tím horší je jeho kvalita a naopak. Pokud obrázek obsahuje 2-3 barvy, lze jej uložit v následujících formátech: gif, png-8. Pokud web obsahuje mnoho neoptimalizovaných obrázků, pak těžký náklad na server a uživatele s pomalý internet Nemusí nikdy čekat, až se stránka načte. V takových případech uživatel přejde na jiný web s „odlehčenými“ stránkami. Jedním z hlavních cílů každého webmastera je udržet návštěvníky na svých stránkách.
Můžete upravit kvalitu obrazu a počet barev. Čím méně barev, tím menší je hmotnost obrázku. Ale nenechte se unést. Fotografie by se neměly ukládat ve formátech gif a png-8. Pro ně jsou vhodné jpeg s kompresními algoritmy a png-24 s podporou průhledných oblastí. Uložme obrázek pro webové prostředí. Na liště nabídek vyberte " Uložit pro web a zařízení“ nebo „uložit pro web“.
Z rozevíracího seznamu vyberte „jpeg“. Zaškrtneme políčko vedle režimu „Progresivní“. V poli kvality nastavte hodnotu na 80 %. Tento druh optimalizace je vhodný pro webové stránky. Algoritmy komprese jpeg zkazit kvalitu obrazu, ale právě ty umožňují snížit váhu obrazu. Při optimalizaci se pečlivě podívejte, jak bude váš obrázek vypadat s kompresními algoritmy. Chcete-li to provést, vyhledejte v okně kartu „2 možnosti“. Pokud obrázek neobsahuje fotografie, lze jej uložit v různých formátech a výsledné možnosti mezi sebou porovnávat z hlediska kvality a hmotnosti.
Zde budete muset hledat zlatá střední cesta mezi kvalitou a hmotností obrazu. formáty gif, png-8, png-24 umožňují používat průhlednost. Formát jpeg nepodporuje průhlednost. Pokud se pokoušíte uložit obrázek s průhledností formátu jpeg, pak Photoshop automaticky uloží obrázek s bílým pozadím. V místě, kde jste naplánovali průhlednou oblast, se objeví bílé pole. Všechny obrázky, které plánujete nahrát na web, musí mít rozlišení 72 dpi. Přesně takové rozlišení by obrázky měly mít.
Společnost Adobe provedla několik drobných změn v oblíbené a oblíbené funkci. Uložit pro web ve Photoshopu CC 2015. Tato funkce se používá pro mnoho úkolů – od přípravy podkladů pro zveřejnění na webu až po optimalizaci fotografií vysoké rozlišení vytvářet animované GIFy. Protože příkaz Uložit pro web je založen na dříve vydaném produktu ImageReady (konec životnosti), jeho kód je technicky příliš zastaralý pro pokračující údržbu a vývoj nových prvků.
Byl z aplikace Photoshop CC 2015 odstraněn příkaz Uložit pro web?
Příkaz Uložit pro web používám každý den. Zpomalí můj pracovní postup změny v systému nabídek?
Lze úplně přeskočit toto menu pomocí existující klávesové zkratky:
(Windows) Ctrl + Alt + Shift + S
(Mac) Cmd + Opt + Shift + S
V případě potřeby si můžete přizpůsobit klávesové zkratky. Chcete-li to provést, vyberte Upravit > Klávesové zkratky.
Byly odebrány některé funkce příkazu Uložit pro web?
Znamená značka "Zastaralé" to, že příkaz Uložit pro web bude v budoucnu odstraněn?
Možná. Ujišťujeme vás však, že společnost Adobe neodstraní příkaz Uložit pro web, aniž by poskytla odpovídající funkce v novém a vylepšeném formátu pracovního postupu. Víme například, že mnoho uživatelů vyžaduje funkce, jako je zobrazení 2up, velikost cílového souboru, převod sRGB, možnosti metadat a animované soubory GIF. Příkaz Uložit pro web nebude odebrán bez poskytnutí příslušných funkcí v novém, vylepšeném formátu pracovního postupu.
Proč optimalizovat fotky pro internet – protože přijdeme o kvalitu? Často takové otázky vyvstávají od začínajícího fotografa, když zmíní komprimaci fotografií pro zveřejnění na internetu. Je skvělé, pokud máte vysokorychlostní internet! A pokud máte také vysokorychlostní mobilní internet- pak máte velké štěstí!
Nezapomeňte však, že ne každý má takovou možnost. Většina Obyvatelstvo Ruska (a mnoha dalších zemí východní Evropy a Asie) si zatím rychlé a hlavně stabilní připojení k internetu nemůže dovolit. Zvláště pokud je možné používat pouze mobilní internet. Při nízké rychlosti připojení k internetu může stahování 1 MB informací trvat déle než 2 minuty a průměrná velikost fotografie z 10MP fotoaparátu je přibližně 6–8 MB.
Nyní si představte, že na vaší internetové stránce není jedna fotografie, ale několik... Zveřejňujete své fotografie, aby je viděli ostatní uživatelé internetu? Budete čekat tak dlouho, než se na stránce načtou fotografie? S největší pravděpodobností ne! Co když je nestabilní i připojení k internetu?
Ano a podle e-mail posílat takové množství informací příteli s „pomalým“ internetovým připojením je prostě neuctivé! A pokud vezmete v úvahu, že počet pixelů v digitální fotoaparáty roste stejným tempem jako internetové technologie, je nepravděpodobné, že se v budoucnu budeme moci vyhnout přemýšlení o tomto problému. Existuje pouze jedna cesta ven - komprimovat fotografie před jejich odesláním do celosvětové elektronické sítě.
Již jsme tedy zjistili cíl optimalizace fotografií pro internet a na základě cíle jsme si stanovili úkol: změnit velikost fotografie na přijatelnou velikost na internetu 800 × 600 pixelů a mírně zmenšit velikost souboru, přičemž ovládání kvality obrazu.
Jedna z nejkvalitnějších a docela rychlé způsoby optimalizace komprese fotografií pro internet je použití vhodné Funkce Adobe Photoshop - Uložit pro web.
Optimalizace komprese fotografií pro zveřejňování na internetu
Pokyny krok za krokem pro Photoshop
1. Nahrání fotografie do okna Sawe For Web & Devices
Otevřete tedy naši fotografii ve Photoshopu a spusťte příkaz Soubor>Uložit pro web a zařízení... nebo jednoduše stiskněte „ošidnou“ kombinaci kláves: Alt+Shift+Ctrl+S a před námi se otevře na první pohled „děsivé“ okno s názvem Uložit pro web a zařízení, což v překladu znamená Uložit pro internet a další zařízení.
Není třeba se bát velkého množství tlačítek a nastavení – využijeme jen některé z navržených funkcí – oblasti, které potřebujeme, jsem zvýraznil červeně. Ale ani v těchto zónách nebudeme potřebovat všechna nastavení.
V jakékoli fázi optimalizace vaší fotografie pro internet můžete spustit prohlížeč přímo z okna Uložit pro web a zařízení a v jeho okně uvidíte, jak bude vaše práce vypadat – ikona Internet Explorer ve spodní části okna optimalizace fotografií pro internet.
Save For Web & Devices - nástroje pro kompresi obrázků |
Pokud se vám již podařilo prostudovat, co je v okně, které se otevře (stačí najet myší na obrázek výše, najíždět na místo, kde se objeví otazník), pak začneme s optimalizací fotografií pro zveřejnění na internetu.
2. Zmenšete velikost obrázku - Image Size
Dejte klíště Omezit proporce.
V poli S (šířka) pole Nová velikost ( Nová velikost)
nastavte 800 pro horizontální záběr nebo 600 pro vertikální záběr. Šířka obrázku (výška) a procento snížení (Procento) se automaticky změní.
3. Optimalizujte kvalitu komprese fotografií
Aby se velikost souboru fotografie „vešla“ do požadovaného objemu 80-100 KB a fotografie se příliš nelišila od nekomprimovaného originálu, proveďte následující:
Pozor!
Neukládejte místo toho snímek optimalizovaný pro web
původní soubor - nemůžete jej vylepšit zpět!
Toto je nejjednodušší způsob, jak optimalizovat fotografie pro internet pomocí Photoshopu. Existují některá další nastavení a funkce, které jsou zvláště užitečné, když potřebujete optimalizovat velký počet fotografie, třeba pro online galerii... Ale to je samostatné téma. Mezitím si stáhněte bezplatný video tutoriál a přesvědčte se sami, jak snadné je snížit objem fotografie pomocí Photoshopu!
