Správne formáty súborov a veľkosti obrázkov pre web design

Vyberte spr¡vny form¡t obrazu

Prv¡ ot¡zka, ktorº by ste sa mali p½taÅ¥, je, či je obraz, v skutočnosti potrebn½ na dosiahnutie efektu, ktor½ ste po. Dobr½ dizajn je jednoduch½ a vždy prinesie najlepÅ¡­ v½kon. Ak m´Å¾ete eliminovaÅ¥ zdroj obrazu, ktor½ často vyžaduje veľk½ počet bajtov v porovnan­ s HTML, CSS, Javascript a ďalÅ¡ie akt­va na str¡nke, potom je to vždy najlepÅ¡ia stratgia optimaliz¡cie. To povedal, dobre umiestnen½ obraz m´Å¾e tiež komunikovaÅ¥ viac inform¡ci­ ako tis­c slov, takže je na v¡s, aby ste naÅ¡li tºto rovnov¡hu.

Ak ste niekedy zist­te, že k³dovanie textu v obraze akt­v, zastaviÅ¥ a prehodnotiÅ¥. Veľk¡ typografia je rozhodujºca pre dobr½ dizajn, branding a čitateľnosÅ¥, ale text-in-Images prin¡Å¡a chudobn½ už­vateľsk½ z¡Å¾itok: text nie je voliteľn½, nie prehľad¡vateľn½, nie zvčšiteľn½, nie je pr­stupn½, a nie je priateľsk½ pre zariadenia s vysokou DPI. Použitie webov½ch fondov vyžaduje vlastnº sadu optimaliz¡ci­, ale rieÅ¡i vÅ¡etky tieto obavy a je vždy lepÅ¡ou voľbou pre zobrazenie textu.

Vyberte prav½ form¡t obrazu #

Naopak, vektorov obrazy sº vyroben z riadkov, tvarov a miest cesty. Inform¡cie pre vektory nie sº uložen v pixeloch. Sk´r sº uložen v matematick½ch pokynoch Å¥ahania, ktor sº ºplne nez¡visl od pixelu. Alex Walker to d¡va veľmi dobre, ako sa vzÅ¥ahuje na SVG, najobľºbenejÅ¡­ vektorov½ form¡t pre web, nasledovne:

Nie ste schopn­ pristupovaÅ¥ k strednici

T¡to webov¡ str¡nka použ­va bezpečnostnº službu na ochranu pred online ºtokmi. Akcia, ktorº ste pr¡ve vykonali, spustili bezpečnostn rieÅ¡enie. Existuje niekoľko akci­, ktor by mohli spustiÅ¥ tento blok vr¡tane odoslania určitho slova alebo fr¡zy, pr­kazu SQL alebo chybn½ch ºdajov.

ÄŒo m´Å¾em urobiÅ¥, aby som to vyrieÅ¡il?

Ide¡lne form¡ty obrazov½ch sºborov z¡visia od toho, ako sa použijº online. Snaž­te sa uÅ¡etriÅ¥ priestor a zlepÅ¡iÅ¥ čas nač­tania? Potrebujete vysokº kvalitu, upraviteľn½ obr¡zok? Chcete anim¡ciu?

jpg / jpeg

Existujº tri form¡ty sºborov pre grafiku použ­vanº na webe: JPG, GIF a PNG. Každ½ z t½chto form¡tov sºborov je navrhnut½ so Å¡pecifick½m ºÄelom na mysli, takže je d´ležit pochopiÅ¥ rozdiely, keď ich použ­vame na naÅ¡ich webov½ch str¡nkach.

jpg

Form¡t obrazu JPG bol navrhnut½ tak, aby efekt­vne skladujte a komprimoval realistick obr¡zky a umeleck diela (vo farbe aj odtierke). Form¡t JPG rob­ veľmi dobrº pr¡cu komprimovania obr¡zkov s množstvom farieb a grad¡ci­ vo farb¡ch. MyslieÅ¥ na jpg ako vysoko stlačenº fotografiu.

Pri ukladan­ obr¡zkov vo form¡te JPG m´Å¾ete vybraÅ¥ ºroveň kompresie na vyrovnanie veľkosti sºboru a kvalitu obrazu. VeľkosÅ¥ sºboru priamo sºvis­ so skutočnou veľkosÅ¥ou (v pixeloch) obr¡zka. Včšia veľkosÅ¥ pixlov bude vždy viesÅ¥ k včšej veľkosti sºboru.

gif a png

Form¡ty obrazu GIF a PNG použ­vajº to, čo sa naz½va "index-farba". Uchov¡vajº minimalizovanº paletu farieb v obrazovom sºbore a tlačidl¡ch, kde tieto farby by mali byÅ¥ umiestnen v obraze. VeľkosÅ¥ sºboru pre obr¡zky GIF a PNG sa vo vÅ¡eobecnosti t½kajº počtu použit½ch farieb. Commons počet farieb sº: 2, 4, 8, 16, 32, 64, 128, 256.

Form¡ty obrazov½ch obr¡zkov GIF a PNG sº ide¡lne pre obr¡zky s ploch½mi farbami (žiadne gradienty) a pevn hrany. Bežn pr­klady t½chto typov obr¡zkov sº log¡, logotypy a ilustr¡cie bez gradientov.

Ako pr­klad použite dobr logo potrav­n. To mus­ byÅ¥ obrazov½ sºbor, pretože použ­vame fantastick½ typ a tiež grafiku jablka namiesto a. Chceme, aby sa naÅ¡e logo sedel na svetlom zelenej farbe pozadia. Tu je naÅ¡a farba pozadia, ktorº uklad¡me logo.

Zstraňovacie webP podporuje transparentnosÅ¥ (tiež zn¡my ako alfa kan¡l) za cenu len 22% ďalÅ¡­ch bajtov. V pr­pade pr­padov, keď je pr­pustn¡ stratov¡ kompresia RGB prijateľn¡, stratov½ WebP tiež podporuje transparentnosÅ¥, zvyčajne poskytuje 3 — menÅ¡ie veľkosti sºborov v porovnan­ s PNG.

Obr¡zky na webe prich¡dzajº v mnoh½ch form¡toch, ako sº JPEG, GIFS, PNGS a ďalÅ¡ie. V skutočnosti existuje toľko akronymov, ktor ich sledujº, m´Å¾u byÅ¥ komplikovan - nikdy nevad­ zistiÅ¥, čo je najlepÅ¡­ form¡t obrazu na použitie na vaÅ¡ich webov½ch str¡nkach. T¡to pr­ručka preskºma v½hody JPEG vs PNG vs GIF.

Je d´ležit, aby sa do tejto veci dali určitº, pretože form¡ty, ktor použ­vate pre obr¡zky vaÅ¡ej str¡nky, majº vplyv. Niektor typy grafiky vyzerajº lepÅ¡ie a nezaberajº toľko ºložnho priestoru, ktor½ preklad¡ na lepÅ¡­ v½kon bez straty v kvalite.

Ak je obsah kr¡Ä¾om, obrazy sº rovnako silnou kr¡Ä¾ovnou na marketingovom tr³ne. VedieÅ¥, ktor½ form¡t obrazu na v½ber na webe je nevyhnutnou sºÄasÅ¥ou rozvoja a udržiavania dobr½ch postupov dizajnu. Hoci včšina form¡tov obrazu sa zobraz­ v poriadku na webe, pochopenie z¡kladn½ch siln½ch a slab½ch str¡nok t½chto obrazov½ch form¡tov zv½Å¡i vaÅ¡u d´veru v schopn­ rozhodnºÅ¥, čo je najlepÅ¡ie v každej situ¡cii. Pozrime sa na Å¡tyri z najbežnejÅ¡­ch form¡tov obrazu a ako si vybraÅ¥ spr¡vny form¡t obrazu zakažd½m.

JPG je sn¡Ä najbežnejÅ¡­ form¡t obrazu použ­van½ na webe. Je to veľmi kompatibiln a m´Å¾e sa pochv¡liÅ¥ mal½m množstvom sºboru s veľmi m¡lo v½raznou stratou kvality. JPG sº komprimovan pomocou toho, čo sa naz½va "stratov¡" kompresia, čo znamen¡, že vždy existuje strata kvality, keď uÅ¡etr­te. T¡to strata je obzvl¡Å¡Å¥ viditeľn¡ na texte a mal½ch detailoch. Zn¡my ako "artefakty", t¡to strata v kvalite sa jav­ ako mal, blokov prvky. Pozrite sa na rozdiel v nasledujºcom porovnan­, najm okolo podrobn½ch hr¡n kvetinov½ch l­stkov.

Kompresia JPG je st¡le optimalizovan¡ pre fotografie, takže artefakty prakticky neviditeľn do voľnho oka. Ale nezabudnite: Zakažd½m, keď je fotografia znovu uložen¡, počet artefaktov sa zv½Å¡i. Je to vždy dobr½ n¡pad, aby ste si ponechali k³piu p´vodnej fotografie je "bezstratov½" kompresn½ form¡t.

UložiÅ¥ DPI (DOTS PER INCH) a sº st¡le bežn½m form¡tom pre použitie tlače. AvÅ¡ak, oni nepodporujº transparentn pozadie a nem´Å¾u byÅ¥ ľahko vrstven s in½mi prvkami. Pri ukladan­ fotografick½ch obr¡zkov je JPG určite vaÅ¡a najlepÅ¡ia st¡vka versus bezstratov¡ form¡t, ako napr­klad PNG. Nižšie uveden½ pr­klad zn¡zorňuje žiadny viditeľn½ vizu¡lny kontrast. VeľkosÅ¥ sºboru vÅ¡ak zdvojn¡sobuje veľkosÅ¥.

PNG je ďalÅ¡­m veľmi čast½m a vÅ¡estrann½m obrazov½m form¡tom nach¡dzajºcim sa na webe dnes. Ch½baÅ¥ sa "bezstratov½" kompresiu, m´Å¾ete uložiÅ¥ pNG a nestr¡cajte žiadnu kvalitu. AvÅ¡ak, t¡to v´Ä¾a (vo včšine pr­padov) prin¡Å¡a veľmi veľkº veľkosÅ¥ sºboru. PNG nie je možnosÅ¥, keď pr­de na tlač, pretože nepodporuje 4-farebn½ (CMYK) proces. PNG je najlepÅ¡­ form¡t pre screenshoty a včšina poč­tačov uÅ¡etr­ screenshoty automaticky ako pNG. Kompresia PNG je optimalizovan¡ pre grafick obr¡zky a obr¡zky, ktor použ­vajº menej ako 16 farieb. Ak n¡s sledujete na Facebooku, ste obozn¡men­ s naÅ¡imi typmi t½Å¾dňa. T¡to grafika sa uložia ako PNG. VÅ¡imnite si rozdiel medzi verziou PNG a verziou JPG.

GIF je teraz rastºca sila na webe. Tento form¡t je vynikajºcou voľbou pre obmedzen farebn obr¡zky, ktor musia byÅ¥ mal. Fotografie a plnofarebn obr¡zky uložen vo form¡te GIF budº prin¡Å¡aÅ¥ vysok ºrovne kompresie s v½raznou stratou v kvalite.

Jedinečn¡ vlastnosÅ¥ form¡tu GIF je jeho schopnosÅ¥ byÅ¥ animovan½. Aj keď t¡to funkcia sa v posledn½ch rokoch zn­Å¾ila, jemn¡ a ºÄeln¡ anim¡cia s obrazom GIF m´Å¾e priniesÅ¥ len spr¡vne množstvo pozornosti na v½zvu na akciu alebo inº udalosÅ¥ na vaÅ¡ej str¡nke.

Acodez je multi-medzin¡rodnej ocenenej digit¡lnej agentºry, s kancel¡riami v Gurgaon, Bombaji, Bangalore a Calicut v Indii. Začal v roku 2011, Acodez m¡ viac ako 600 spokojn½ch z¡kazn­kov, ktor­ sa Å¡­ria v 70+ krajin¡ch.

Acodez z­skal viac ako 12 medzin¡rodn½ch ocenen­, sºÅ¥ažiacich s najlepÅ¡­mi agentºrami na svete. Tieto uznania, ktor predložili popredn odvetvov združenia vo svetovom st¡nku na naÅ¡ej tvorivosti, technick zručnosti a normy kvality.

Ponºkame Å¡irokº Å¡k¡lu služieb na uspokojenie niektorho z vaÅ¡ich webov½ch, mobiln½ch alebo digit¡lnych marketingov½ch požiadaviek. Buďte to prostredn­ctvom tvorivosti naÅ¡ich n¡vrhov, použ­vania najnovÅ¡­ch technol³gi­ alebo dodržiavania najlepÅ¡­ch postupov priemyslu, vždy im prosperujeme dodaÅ¥ rieÅ¡enia svetovej triedy naÅ¡im klientom.

Na Acodez, sme posadnut½ kvalitnou. A ver­me, že rovnak½ d´vod n¡m urobil ide¡lnu voľbu pre stovky spokojn½ch z¡kazn­kov na celom svete - 70+ kraj­n, ako teraz, rozptie cez vÅ¡etk½ch 6 kontinentov.