Ahojte všetci, ktorí teraz čítate. Dnes vám poviem o svojich niekoľkých spôsoboch, ako zmenšiť veľkosť (hmotnosť) obrázku, snímky obrazovky, fotografie, animácie GIF bez straty kvality pri vkladaní na web.
Zmenšenie veľkosti obrázku rôznymi spôsobmi
Každý obrázok alebo obrázok, nazvite ho, ako sa vám páči;), má svoju vlastnú veľkosť, ktorá je súčtom niekoľkých bodov, je to vertikálna výška, horizontálna šírka (px) a hmotnosť - kilobajt (KB), megabajt (MB).
Zníženie veľkosti (hmotnosti) obrázku bude mať pozitívny vplyv na rýchlosť načítania stránky - výkon webu a tiež pomôže ušetriť miesto na hostingu, počítači, flash disku.
Súhlasíte s tým, že obrázky nasnímané profesionálnymi fotoaparátmi (DSLR) môžu mať niekedy hmotnosť viac ako 2 megabajty a šírku 2 500 px. Ak je takýto obrázok vložený na web bez kompresie, výrazne to zvýši čas načítania, pre ktorý je dnes PS uložený filter, najmä pre Google PS.
Prvým spôsobom je optimalizácia obrázka pred odoslaním na web vo Photoshope
Musím povedať, že toto je najobľúbenejší spôsob zmeny veľkosti a kompresie fotografií medzi majiteľmi stránok. Je vhodný aj na bežných užívateľov Internet. Akcie vykonávané týmto programom sú zároveň minimálne, čo je dôležité aj pre začínajúcich bloggerov.
- 1. Otvorte nový súbor vo Photoshope a potom kliknite na „Uložiť pre web“.
- 2. Otvorí sa nové okno, kde nastavíme potrebné parametre: kvalitu, formát a veľkosť obrázku.
Stačí teda zmeniť kvalitu z vysokých čísel zo 60 na priemerné hodnoty z 30-50, aby sa výrazne znížila hmotnosť. Požadovaná kvalita môže slúžiť ako meradlo. V okne ukážky môžete ovládať, ako veľmi sa obrázok zmení.
Pokiaľ ide o formát obrázku, potom zvolím uloženie ako Jpeg, ak ide o farebnú fotografiu, a ak je potrebné zachovať priehľadnosť vrstvy alebo čiernobielu snímku obrazovky, potom je to spravidla Png formát, aby bol text a čísla na ňom čitateľné. Prečítajte si tému Photoshopu: používanie tohto programu.
V tom istom okne mením veľkosť obrázku (v pixeloch), čo je výhodné. Kliknem na „Uložiť“ a potom napíšem názov súboru v latinčine.
Druhý spôsob kompresie obrázkov pomocou online služieb
Ak mám byť úprimný, túto metódu používam len zriedka. Tieto služby však pomáhajú komprimovať niekoľko (dávkových) obrázkov naraz bez straty kvality, čo ovplyvňuje produktivitu. Ide o známe služby krakin.io, TinyPNG; Compresspng a ďalšie.
Poviem vám ešte jednu - toto je Optimizilla, ktorú som testoval a výsledky sa mi veľmi páčili. Skúste to sami.
Snímka obrazovky ukazuje, že do systému bola nahraná fotografia JPEG s veľkosťou 60 kB. Služba ho automaticky komprimovala o 39% na 37 KB, ale vizuálna kvalita nebola prakticky ovplyvnená.
Pohrajte sa s kvalitou obrazu pomocou praktického posúvača alebo znakov [+ -]; priblížte fotografiu a pred kompresiou ešte raz skontrolujte všetky detaily po kompresii. Toto je veľmi relevantná funkcia ukážky fotografií pre weby s portfóliom fotografov, cestovanie, zdroje pre ženy, internetové obchody, kde sú dôležité obrázky tovaru vo vysokej kvalite.
Zmena veľkosti a šírky obrázku
Proces zmeny veľkosti šírky a výšky obrázku si myslím, že dnes už nikomu nespôsobuje ťažkosti. To sa dá urobiť online aj štandardne grafický editor Maľovať alebo pohodlnejšie Paint.NET.
Otvorte v programe nový súbor, kliknite na „Zmeniť veľkosť“ a všimnite si, že v pixeloch pri zachovaní proporcií. OK.
Zmeňte hmotnosť obrázku vo formáte GIF online
V tejto časti článku vám ukážem, ako rýchlo komprimovať nielen obrázky JPEG, PNG, SVG, ale aj Gify. Gify vážia veľa, preto existuje veľa požiadaviek na to, ako znížiť hmotnosť obrázku vo formáte gif bez straty animácie a ďalšej námahy).
- Využime prvú online službu Compressor.io .
Compressor.io je účinný online nástroj na výrazné zmenšenie veľkosti vašich digitálnych fotografií a animácií vo formáte GIF. Umožňuje vám uložiť vysoká kvalita obrázky, používa dva typy kompresie, kde je rozdiel a nie je rozdiel pred a po kompresii. Takto charakterizujú svoju službu a podobne domovská stránka to sa dá overiť.
Príklad komprimácie animácie GIF nájdete na snímke obrazovky. Optimalizovaný obrázok si môžete stiahnuť spôsobom, ktorý vám vyhovuje: do počítača, uložiť do Dropboxu, na Disk Google (drive.google.com).
- Druhá služba Online optimalizátor obrazu.
Názov služby hovorí sám za seba. Online Image Optimizer ľahko optimalizuje rôzne formáty obrázkov vrátane animácií Gif. Stačí nahrať obrázok a kliknúť na „Optimalizovať“. Služba Online Image Optimizer navyše pomáha rýchlo vytvoriť nielen favicon pre webovú stránku, ale má vo svojom arzenáli aj mnoho užitočných online nástrojov.
- Tretí spôsob je aplikačný program SuperGIF pre macOS a Windows.
V prípade malých funkčných obmedzení si môžete kúpiť platenú verziu SuperGIF alebo si zadarmo stiahnuť demo.
Odporúčame vám použiť online editor s názvom „ Ezgif.com”, Kde môžete nielen zmeniť veľkosť animovaných obrázkov, ale ich aj optimalizovať, tj. Znížiť ich hmotnosť.
Aj s pomocou tohto online editora môžete podľa vlastného uváženia prerobiť mnoho bannerov z internetu a nemusíte pracovať na dizajne. Stačí napísať text a banner je pripravený.
Ideme sem
Nástroje online editora „Ezgif.com“
Na rýchlu úpravu obrázkov GIF je lepšie použiť online editor ako Photoshop. Koniec koncov, veľa ľudí nevie, ako pracovať s Photoshopom, ale tu môžete upraviť ľubovoľný obrázok GIF v priebehu niekoľkých minút.
Online editor vyzerá takto:
Editor „Ezgif.com“ na úpravu animovaných obrázkov GIF
Samozrejme, že nedosahuje funkcionalitu Photoshopu, ale má všetky potrebné nástroje na úpravu obrázkov GIF.
Funkcie online editora:
Orezanie obrázku
Zmena veľkosti
Optimalizácia obrazu
Pridanie efektov
Zmeňte rýchlosť animácie
Demontáž animácie na snímky (fragmenty)
Pridávanie textu
Prekryť ďalší obrázok
Zdá sa, že to vyzerá ako jednoduchý editor, ale aký je účinný.
Teraz sa pozrime na všetky uvedené nástroje samostatne.
Plodina: jednoduchý online nástroj na orezávanie animovaných obrázkov.
Odošlite obrázok a potom pomocou myši vyberte požadovanú časť obrázka, ktorú chcete orezať. Kliknite potom " Orežte to„A ty si skončil.
Po nahraní obrázka sa pod týmto obrázkom zobrazia informácie o ňom: veľkosť v kB, rozmery obrázka a počet rámcov, ktoré obsahuje.
Pri orezávaní obrázka môžete veľkosť nastaviť ručne. Ak to chcete urobiť, pod obrázkom, ktorý potrebujete v poliach " Vľavo», « Top», « Šírka"a" Výška»Zadajte požadované hodnoty.
Zmena veľkosti: pomocou tohto nástroja môžete zmeniť veľkosť obrázka alebo ho orezať. Po oddialení zostane obrázok v rovnakej kvalite a rýchlosť animácie sa nezmení.
V poliach " Nová šírka"a" Nová výška"Musíte nastaviť novú veľkosť obrázka alebo môžete jednoducho zadať percento a potom kliknúť na" Zmeňte veľkosť!“. Obrázok sa zníži o percento, ktoré ste zadali
S týmto nástrojom môžete rýchlo a jednoducho meniť veľkosť obrázkov GIF. Keď zväčšíte veľkosť obrázku, kvalita sa stratí.
Ak je obrázok po zmene pri zobrazovaní animácie nejako zlý, môžete skúsiť nastaviť inú veľkosť
Optimalizácia: a pomocou tohto nástroja môžete zmeniť veľkosť (hmotnosť) súboru GIF. Váha obrázku sa zmenší znížením počtu farieb v každom ráme. Každý rámček GIF obsahuje až 256 jedinečných farieb, ale ak znížite množstvo farieb, môžete dosiahnuť menšiu veľkosť súboru.
Optimalizácia má mnoho spôsobov, ale môžete si vybrať najlepšiu možnosť, aby bola kvalita obrazu dobrá. Prečítajte si viac o optimalizácii na webe.
Efekty (efekty, zmena farby obrázka): pomocou tohto nástroja môžete obrázok prevrátiť horizontálne aj vertikálne.
Obrázok môžete tiež otočiť pod určitým uhlom, ak zadáte stupeň v „ Točiť sa“. K obrázku môžete priradiť inú farbu, urobiť ho čiernobielym alebo mu dať iný odtieň.
Rýchlosť (zmena rýchlosti animácie GIF): tento nástroj slúži na zmenu rýchlosti animácie.
Ak chcete zmeniť rýchlosť animácie v pomere k aktuálnej, použite percento “ % aktuálnej rýchlosti", A na nastavenie oneskorenia medzi snímkami musíte použiť„ “. Parameter " stotiny sekundy medzi snímkami"Nastaví čas oneskorenia medzi snímkami na stotiny sekundy (1/100)
Rozdeliť (analyzovať obrázok GIF na rámčeky): eh Tento nástroj je navrhnutý tak, aby konvertoval animované obrázky GIF do samostatných rámcov, po ktorých je možné každý rámec upravovať samostatne.
Všetky snímky animovaného obrázku je možné stiahnuť do počítača. Ak to chcete urobiť, kliknite pravým tlačidlom myši na rám a potom zvoľte „ uložiť obrázok ako... “. Všetky snímky je tiež možné stiahnuť do jedného archívu zip kliknutím na „ Stiahnite si rámčeky ako ZIP»
Napíšte (pridajte text): hm Tento nástroj vám umožňuje pridať text do animácie GIF. Text môžete pridať k celému obrázku GIF alebo k jeho jednotlivým rámcom. Text na obrázku je možné posúvať myšou.
Prekrytie (prekrytie iného obrázku): tento nástroj vám umožňuje prekryť iný obrázok na obrázku GIF a je žiaduce, aby bol vo formáte PNG alebo GIF.
Budeme pracovať s online službou EZGIF.COM.
Je to podľa mňa jednoduchšie.
Krok 1. Vyberte video pre GIF na YouTube
Ukážem vám, ako si z takého videa vytvoriť vlastný gif:
EZGIF bohužiaľ nefunguje priamo s YouTube, a preto je potrebné video najskôr stiahnuť.
Krok 2. Stiahnite si videá z YouTube do počítača
K tomu využívame služby GetVideo.Org alebo SaveFrom.Net.
Okamžite vyberáme najnižšiu kvalitu:
Bol stiahnutý súbor 35 MB.
Krok 3. Odovzdajte video do EZGIF
Prejdite na službu EZGIF v časti Prevodník videa na GIF.
Čakáme 20 sekúnd (to je to, ako dlho trvá nahranie môjho súboru).
Krok 4. Nastavenie časového obdobia
Chcem vytvoriť GIF na niekoľko sekúnd, takže z celého videa musím uviesť, kde sa nachádza požadovaný segment.
V mojom prípade je to: 5,2 - 8,5 sekundy.
Je dôležité zvoliť starú (starú) metódu. Veľkosť výsledného gifu bude o niečo väčšia, ale potom je lepšie s ním pracovať (žiadne zvlnenie sa neobjaví).
Všetko je v poriadku, ale veľkosť výsledného gifu - 2,26 MB - je príliš veľa ...
Ako zmenším veľkosť súboru GIF?
Existujú tri hlavné faktory:
- konečná veľkosť v pixeloch,
- trvanie animácie,
- kvalita pôvodného videa,
- počet snímok za sekundu (snímky).
Čím menší je každý z týchto faktorov, tým jednoduchšie bude výsledný GIF.
Teraz vám ukážem, ako postupne zmenšíme veľkosť nášho GIFu na prijateľnú veľkosť.
Krok 5. Znížte počet snímok
Ak chcete začať pracovať na GIF, kliknite na Optimalizovať:
Pokúsme sa odstrániť každý druhý rámec (aj keď nemôžete pôsobiť tak tvrdo, ale odstrániť iba každý tretí alebo štvrtý):
Výsledky sú pôsobivé. GIF sa stal dvakrát ľahším:
Existuje však jedna nevýhoda - je to oveľa rýchlejšie. Rýchlosť prehrávania filmov sa zdvojnásobila.
Preto…
Krok 6. Spomaľte GIF
Všetko OK. Rýchlosť sa vracia k normálu!
Krok 7. Znížte kvalitu, zmenšite veľkosť
To nie je všetko. GIF môžete ešte viac skomprimovať!
Ak to chcete urobiť, znova kliknite na položku Optimalizovať.
A zvoľte stratový GIF úroveň 140:
V InVision animácie GIF neslúžia na rozmaznávanie - hrajú dôležitú úlohu z hľadiska marketingu a školenia. Dokonca sme sa ich pokúsili použiť na našej domovskej stránke namiesto animácií vytvorených s kódom.
Nakoniec sa nás ľudia začali pýtať: „Ako vytvoríte animácie vo formáte GIF?“ Je čas odhaliť tajomstvo.
GIF obrazový dizajn
1. Tajná prísada
Tu je moje malé tajomstvo: všetky moje animácie GIF boli pôvodne video súbory. Obvykle používam ScreenFlow, ktorý mimochodom používam aj na vytváranie videí o našich produktoch. to jednoduchý program ktorý zároveň obsahuje mnoho užitočných animačných nástrojov.Potom, čo uložím animáciu ako súbor videa, importujem ju do Photoshopu prostredníctvom Súbor> Importovať> Video rámce ako vrstvy.
Rada: Ak ScreenFlow alebo After Effects Ak si to nemôžete dovoliť, vytvorte v Keynote animáciu a exportujte ju ako video. Konečne aspoň nejaká aplikácia tejto funkcie v Keynote.
2. Menej farieb = viac zábavy
Ak chcete vytvárať skvelé animácie GIF, musíte k výberu farby pristupovať so zvláštnym úžasom. To ovplyvní nielen veľkosť súboru, ale umožní vám to aj vytváranie dlhších animácií s malou veľkosťou súboru. (Pre mňa je malý menej ako 1 MB)3. Ak je to možné, použite rozostrenie pohybu
Programy ako ScreenFlow a After Effects vám umožňujú exportovať video s použitím rozmazania pohybom. Vďaka tomu bude mať vaša animácia nielen profesionálny vzhľad, ale tiež uľahčí zmenšenie veľkosti súboru vo Photoshope.
4. Buďte (druh) leniví
Predstavte si, aké ďalšie prvky by som mohol pridať do animácie GIF na začiatku tohto príspevku. Malé popisky s používateľskými menami, kliknutím kurzora na tlačidlo plus atď. Ľudia nemusia toto všetko vidieť, aby získali všeobecnú predstavu o tom, čo vidia, a tak ukážte iba to, čo potrebujete - máte obmedzený čas a veľkosť súboru.Exportovať animácie GIF
Predtým, ako sa budete zaoberať nižšie uvedenými tipmi, skúste exportovať svoju animáciu GIF. Ak má správnu veľkosť, skvelá práca! Pokračujte v rovnakom duchu. Ak nie, vyskúšajte nasledujúce metódy.5. Odstráňte duplicitné snímky
S najväčšou pravdepodobnosťou sa vaša animácia na chvíľu zastaví alebo zostane nehybná. Pri bližšom pohľade vidíte, že tento okamih pozostáva z niekoľkých identických rámcov. Ak existuje 10 takýchto snímok, odstráňte 9 z nich a nastavte trvanie zostávajúceho rámca napríklad na 1 sekundu.
Ak to nefunguje, skúste importovať video znova, ale tentokrát vyberte možnosť Limit na každé 2 snímky. To by malo výrazne znížiť veľkosť súboru.
Rada: Ak je vaša animácia dlhšia ako 150 snímok, budete mať problémy so znížením veľkosti súboru.
6. Menej farieb
Keď uložíte svoju animáciu GIF do Photoshopu, vedľa parametra Farby sa zobrazí rozbaľovacia ponuka. Experimentujte s hodnotami, vyskúšajte čo najmenej farieb, ktoré nespôsobia odpad celého súboru.
7. Zmeňte parameter Lossy *
Ak mám byť úprimný, ani neviem, čo tento parameter znamená. Ale ja presne tak Viem, že ak ho dáte medzi 1 a 10, zbavíte sa ďalších kilobajtov bez straty kvality.
* „Stratový“ - prípustná úroveň straty grafických informácií vo formáte rastrový súbor na zmenšenie veľkosti súboru s obrázkom
Nič sa nezmenilo! Pomoc!
Ak ste vyskúšali všetko, čo bolo uvedené vyššie, ale stále ste nemohli zmenšiť veľkosť animácie GIF, musíte urobiť krok späť. Chcete nemožné? Existuje nejaký iný spôsob, ako získať to, čo chcete? Môžem rozdeliť súbor na dve animácie GIF? Najlepšie je, ak sa vaša animácia GIF zameriava na jeden aspekt.Od prekladateľa. V prípade akýchkoľvek želaní a pripomienok k prekladu ma prosím kontaktujte osobne. Vďaka!