- 1. Vrste formata slika u Photoshopu
- 2. Kako komprimirati sliku u Photoshopu
- 3. Promijenite profil boje Photoshopa
- 4. Komprimirajte sliku bez gubitka kvalitete Photoshopa
- 5. Komprimirajte PNG slike u Photoshopu
- 6. Spremite JPG.webp slike za web Photoshop
- 7. Spremite PNG slike za web Photoshop
- 8. Spremite slike za web Photoshop
Posjedovanje web stranice ne temelji se samo na nekontroliranom prenošenju sadržaja, morate se pobrinuti za strukturu weba, uključujući svaki element koji u njemu hostiramo. Mora se uzeti u obzir da mu se pristupa putem internetskih veza i da, iako na mnogim mjestima postoje velike brzine, na drugima su ipak donekle zaostale. Sve to ne uzimajući u obzir važnost mobilne teme i trošak megabajta. Zato je stiskanje slika bez gubitka kvalitete Photoshopa vrlo tražen zadatak stvaratelja koji razmišljaju u interesu korisnika.
Ono što ne bismo trebali učiniti je pretvoriti našu web stranicu u spori prostor u koji ljudi ne žele ponovno ulaziti, nešto što možemo izbjeći ako uzmemo u obzir različite elemente i naučimo komprimirati slike u Photoshopu. Jedan od njih i vrlo važan je postavljanje slika. Ako imate web mjesto s puno vizualnog sadržaja, morate se pobrinuti za to iznutra i izvana komprimiranjem Photoshop slika i ubrzanjem stranice.
Brzina naše web stranice bitna je za korisničko iskustvo jer nije isto unijeti brzu stranicu koja ne utječe na našu vezu s web lokacijom gdje se svi objekti koje vidimo učitavaju vrlo sporo. Osim toga, da bi vidjeli slike, moraju se preuzeti na poslužitelj, pa što je veća glasnoća, to će opterećenje dulje potrajati i korisnik će vjerojatno očajavati i otići. Otuda važnost uređivanja slika u Photoshopu i poboljšanja naše web stranice ili jednostavno našeg prostora znajući kako komprimirati slike u Photoshopu.
Ako učitate vrlo teške slike, vaša će stranica biti spora, a korisnici će se umoriti i otići. Ako želite izbjeći gubitak posjeta, pobrinite se za sve što prenesete i naučite kako komprimirati sliku u Photosho -u smanjujući njezinu veličinu.
1. Vrste formata slika u Photoshopu
Da bismo mogli govoriti o optimizaciji slike, moramo razlikovati koju vrstu formata slike imamo i koji je za nas najbolji.
JPEG.webp formatuZa opću uporabu fotografije, to je standardni format koji se koristi s dobrim rezultatima. Podržava 24-bitne boje.
PNG-8 formatAlternativa je GIF.webp -u, ali bez animacija i može prikazati do 256 boja. Njegova kompresija za web jedna je od najprikladnijih koja omogućuje dobru kvalitetu sa smanjenim veličinama.
PNG-24 formatTo je dobra opcija za izvoz kvalitetnih slika, baš kao i JPEG.webp. Ova vrsta proširenja prikladna je kada imamo sliku koja sadrži transparentnost. Također prikazuje do 16 milijuna boja jer podržava 24-bitne boje.
GIF.webp formatuTo je format za animacije par excellence. Predstavlja do 256 boja u obliku velikih količina jednobojnih boja, linija ili teksta.
Za ovaj vodič odabrat ćemo dva najkorisnija i najkorištenija formata za postavljanje slika na web: JPEG.webp i PNG-8.
2. Kako komprimirati sliku u Photoshopu
Kad radimo u radnom prostoru u Photoshopu, radimo to prema određenim parametrima ovisno o slici ili općenite prirode. Jedan od njih je veličina, proporcije slike s kojom radimo. Veličina slike odgovara broju piksela koje sadrži okomito i vodoravno, što dovodi do veličine slike.
Ono što nazivamo razlučivošću znači broj informacija u određenom prostoru koji se naziva pikseli po inču ili dpi. To znači da što je veći broj piksela po inču, naša rezolucija će biti veća.
Nakon što se razlikuju oba aspekta, valja napomenuti da dvije slike mogu imati istu veličinu, ali različitu razlučivost i proporcije. Ako se radi o slikama za web, preporučuje se da se veličine tretiraju u veličini piksela. Da biste mu pristupili, idite na Slika / Veličina slike ili pritisnite sljedeću kombinaciju.
Ctrl + Alt + I
BilješkaOpcija Resample image omogućuje nam promjenu veličine bez promjene rezolucije. Odaberite najprikladniju opciju za ono što vam je potrebno.
3. Promijenite profil boje Photoshopa
Prostor boja u kojem radimo također će utjecati na konačnu datoteku. Treba spomenuti razliku između sRGB i RGB prostora. Adobe RGB sustav predstavila je tvrtka 1998. godine i sastoji se od mnogo šireg spektra boja od sRGB prostora. To ne znači da je gore, već da su posvećeni različitim ciljevima.
RGB sustav je svojim spektrom bliži spektru CMYK -a, koji je orijentiran na svijet tiska. Unatoč tome što ima više boja, standard sRGB distribuira se digitalno u uređajima, bilo da se radi o mobilnim telefonima, monitorima ili bilo kojem digitalnom uređaju. Kad jedan od ovih uređaja naiđe na RGB, pokušava komprimirati višak boja i stvara lažni sRGB s lošijim rezultatima.
Korak 1
Stoga se preporučuje snimanje fotografija, radnog prostora u Photoshopu ili njihovo optimiziranje ovim sustavom radi poboljšanja kompatibilnosti boja. Da biste promijenili profil radne boje, idite na izbornik Uredi i odaberite Pretvori u profil.
Korak 2
U sljedećem prozoru morat ćete odabrati samo profil koji vam je potreban, u ovom slučaju sRGB.
4. Komprimirajte sliku bez gubitka kvalitete Photoshopa
JPG.webp format je najčešće korišteni standard i iako dopušta kompresiju, ne nudi toliko parametara za uređivanje kao PNG. Konačnu težinu slike možemo mijenjati promjenom veličine fotografije ili pri izvozu.
Korak 1
Prilikom spremanja kao JPEG.webp vidimo da imamo dvije mogućnosti, s jedne strane, konfigurirati opcije slike (kvaliteta), a s druge opcije formata. Da biste to učinili, idite na izbornik Datoteka / Spremi kao ili u sljedeću kombinaciju i odaberite format JPEG.webp.
Shift + Ctrl + S
Korak 2
Ovi konfiguracijski parametri pojavljuju se u sljedećem prozoru. Pogledajmo što svaki od njih znači.
Opcije slikeOvdje moramo odabrati konačnu kvalitetu slike, evidentno je da što je veća kvaliteta, veća je veličina datoteke, budući da možemo vidjeti što će konačno zauzeti ako kliknemo na Pregled. Pomaknite traku da biste mogli promijeniti te vrijednosti.
Ako želimo da fotografija ispisuje veličinu plakata, moramo odabrati mnogo veću kvalitetu nego ako želimo sliku za web, imajte na umu da što je veća veličina slike, bit će potrebno više resursa za učitavanje putem weba.
Opcije formataOvdje unutra nalazimo različite alternative koje daju konačan format našoj slici. Najviše se preporučuje standardna osnovna linija jer je obično najkompatibilnija.
- Polazna osnova ("Standard"). Upotrebljava format koji je prepoznatljiv po velikoj većini web preglednika i programa. Trenutno najnoviji programi obično ne daju nekompatibilnosti.
- Optimizirana osnovna linija. Ovaj format će stvoriti slikovnu datoteku koja sadrži optimizirane boje, čime ćete dobiti manju veličinu.
- Progresivno. S ovom opcijom prikazat će se različite inačice koje će biti sve detaljnije tijekom preuzimanja. Korisnik je taj koji odlučuje koliko će ih biti stvoreno. To je format koji se koristio i često se koristi kada idemo na spore veze koje zahtijevaju učitavanje zamaha.
BilješkaTreba napomenuti da svi preglednici ne prepoznaju niti podržavaju JPEG.webp slike koje su progresivne ili optimizirane.
5. Komprimirajte PNG slike u Photoshopu
Korak 1
Za izvoz kao PNG moramo učiniti isti prvi korak kao i kod ostalih formata, idite na Izbornik datoteka / Spremi kao i odaberite u ovom slučaju PNG.
Korak 2
Sada ćete u prozoru za spremanje vidjeti različite opcije.
KompresijaMožemo odabrati vrstu kompresije koju želimo ili reći ništa ako ne želimo da se primijeni. Ovisno o izboru, brzina utovara će se povećati ili smanjiti.
TkatiOva je opcija važna, pogotovo ako govorimo o web platformama. Pogledajmo razliku:
- Ni. Ova opcija omogućuje prikaz slike samo kad je potpuno učitana, odnosno ako imamo sporu ili problematičnu vezu, slika se neće pojaviti sve dok se ne učita u internetski prijenos.
- Isprepleteno. Ova se opcija više preporučuje za web usluge jer prikazuje smanjene verzije slike dok se učitava. To pomaže da proces preuzimanja bude manji, a korisnik će znati da se slika preuzima.
6. Spremite JPG.webp slike za web Photoshop
Korak 1
Jedna od najpovoljnijih opcija koju imamo u Photoshopu za optimizaciju slike je Spremljeno kao web, što nam omogućuje ručno podešavanje različitih parametara. Ovo spremanje je vrlo korisno za slike posvećene postavljanju na web, dopuštajući kvalitetne slike, ali smanjene veličine. Za to idemo Datoteka / Spremi za web ili radimo sljedeću kombinaciju.
Alt + Shift + Ctrl + S
Korak 2
Ako želimo odabrati JPEG.webp, imat ćemo te postavke.
Kvaliteta slikeOdaberite željenu kvalitetu slike od Niske do Maksimalne ili s vrijednostima s desne strane. Varijaciju veličine možete vidjeti ispod slike s lijeve strane.
ProgresivnoSlika će se učitavati malo po malo, odnosno preći ćemo sa gledanja u niskoj rezoluciji na pravu.
IsprepletenoPrikazuje sliku samo kad je potpuno učitana.
HaloAko je slika prozirna, odaberite boju oreol ekvivalentnu pozadini stranice na koju će biti ugrađena.
Ugradi profil u bojiOdaberite ovu opciju za očuvanje ICC profila slike, neki web preglednici koriste je za ispravljanje boje.
Pretvori u sRGBKoristite ovaj profil za poboljšanje kompatibilnosti boja na uređajima i monitorima.
Imate i druge mogućnosti, poput načina pregleda, metapodataka ili promjene veličine sa ili bez ograničenja.
7. Spremite PNG slike za web Photoshop
Korak 1
Kao što već znamo da bismo mogli pristupiti Spremljenom za web u PNG -u, moramo otići na Datoteka / Spremi za web. Upamtite da je ovaj format vrlo dobar za slike s web odredištem jer njegov rezultat daje vrlo dobar odnos između kvalitete i težine datoteke.
Korak 2
Za izvoz kao PNG odaberite ga s padajućeg izbornika. Upamtite da PNG 24 nudi veću količinu boja pa su veličine mnogo veće od onih PNG-8. Ovo drugo preporučujemo za standardne web slike. Prozor koji se pojavi sličan je onom u JPEG.webp -u, a osim opcija koje smo već vidjeli u prethodnom odjeljku, možemo odabrati i:
TransparentnostOvdje možete odabrati vrstu prozirnosti koja najbolje odgovara vašoj slici ili je ukloniti i odabrati određenu boju pomoću Halo.
Prikladno za webOvaj parametar omogućuje dodatno komprimiranje slike, što je veći postotak prilagodbe, veća je kompresija, niža je kvaliteta i manja je veličina.
8. Spremite slike za web Photoshop
Korak 1
Kako bismo mogli izvesti automatsko sažimanje za PNG i JPEG.webp, otvorili smo spremanje za web u Datoteka / Spremi za web ili sljedeću kombinaciju tipki.
Alt + Shift + Ctrl + S
Korak 2
Desno od opcije Unaprijed postavljene postavke kliknite karticu izbornika koja se pojavi i odaberite Optimiziraj prema veličini datoteke.
Korak 3
Sada morate samo odabrati veličinu slike koju želite imati i program će automatski izvršiti kompresiju umjesto vas. Možete mijenjati vrijednosti kako biste dobili različite rezultate.
Korak 4
Također možete otići do prozora koji se zove 4 kopije i odabrati jednu od verzija koje vam se odatle pružaju te je spremiti.
Korak 5
Ako želite promijeniti veličinu i brzinu prijenosa, kliknite na vrijednosti ispod slike i odaberite ih automatski.
Kao što vidite, postoje različiti načini za smanjenje veličine slika ovisno o njihovoj namjeni. Mnogo je parametara koje morate uzeti u obzir, ali ovisno o razini koja vam je potrebna, jedan ili drugi bit će korisniji za znati komprimirati Photoshop sliku. U sljedećem videu grafički ćemo vam pokazati kako optimizirati i komprimirati slike na osnovni i cjelovit način. Ako želite brzo sažimanje, prva metoda bit će vam dobra, a ako tražite nešto složenije gdje možete urediti sve parametre, vaša je metoda druga.