Pravilni formati datoteka i veličine slike za web dizajn

Odaberite pravi format slike

  • Odabir pravog formata slike
  • Implikacije zaslona visoke razlučivosti
  • Značajke različitih rasterskih formata slika
  • Prvo pitanje koje trebate zapitati je da li je slika, u stvari, potrebna za postizanje učinka koji ste poslije. Dobar dizajn je jednostavan i uvijek će donijeti najbolju izvedbu. Ako možete eliminirati resurs slike, koji često zahtijeva veliki broj bajtova u odnosu na HTML, CSS, JavaScript i drugu imovinu na stranici, onda je to uvijek najbolja strategija optimizacije. Rečeno je da dobro postavljena slika takoÄ‘er može komunicirati viÅ¡e informacija od tisuću riječi, pa je na vama da pronaÄ‘ete tu ravnotežu.

    Ako ikada nađete tekst u imovinu, zaustavite se i ponovno razmotrite. Velika tipografija je kritična za dobar dizajn, brendiranje i čitljivost, ali tekstualne-in-slike isporučuje loše korisničko iskustvo: Tekst se ne može odabrati, ne može se pretraživati, ne zoomible, a ne dostupan, a ne prijateljski za visoke DPI uređaje. Korištenje web fontova zahtijeva vlastiti skup optimizacije, ali se bavi svim ovim problemima i uvijek je bolji izbor za prikaz teksta.

    Odaberite pravi format slike #

    Nasuprot tome, vektorske slike su izrađene od linija, oblika i bodova putanja. Informacije za vektore nisu pohranjene u pikselima. Umjesto toga, oni su pohranjeni u matematičkim uputama za crtanje, koje su potpuno neovisne o pikselu. Alex Walker ga vrlo dobro stavlja kao i on se odnosi na SVG, najpopularniji vektorski format za web, kako slijedi:

    ne možete pristupiti srednjem

    Ova web stranica koristi se sigurnosnu uslugu kako bi se zaštitili od online napada. Akcija koju ste upravo izvršili pokrenuli su sigurnosno rješenje. Postoji nekoliko radnji koje bi mogle izazvati ovaj blok, uključujući slanje određene riječi ili fraze, SQL naredbe ili neformalne podatke.

    Što mogu učiniti da to riješimo?

    Vizualni sadržaj je "tajno oružje" kada pokušavate komunicirati s vašom publikom online, bilo da gradite prekrasnu web stranicu, edukaciju s infografskim ili pomoću videozapisa za prodaju svoje proizvode i usluge na internetu.

    Idealne formate slikovnih datoteka ovise o tome kako će se koristiti online. Pokušavate li uštedjeti prostor i poboljšati vrijeme učitavanja? Trebate li visoku kvalitetu, sliku koja se može uređivati? Želite li animaciju?

    jpg / jpeg

    Postoje tri formata datoteka za grafike koja se koristi na webu: JPG, GIF i PNG. Svaki od ovih formata datoteka osmišljen je s određenom svrhom na umu, tako da je važno razumjeti razlike kada ih koristimo na našim web stranicama.

    jpg

    JPG format slike osmišljen je za učinkovito pohranjivanje i komprimiranje realnih slika i umjetničkih djela (kako u boji i GreyScale). JPG format čini vrlo dobar posao komprimiranja slika s mnogo boja i gradacija u bojama. Razmislite o JPG kao vrlo komprimiranu fotografiju.

    Prilikom spremanja slika u JPG formatu možete odabrati razinu kompresije za uravnoteženje veličine datoteke i kvalitete slike. Veličina datoteke izravno je povezana s stvarnom veličinom (u pikselima) slike. Veća veličina piksela uvijek će rezultirati većom veličinom datoteke.

    gif i png

    GIF i PNG formata slike koriste ono što se zove "Index-Color". Oni pohranjuju minimiziranu paletu boja u slikovnoj datoteci i ključevima gdje bi te boje trebale biti smještene na slici. Veličina datoteke za GIF i PNG slike općenito se odnosi na broj korištenih boja. Broj boja je: 2, 4, 8, 16, 32, 64, 128, 256.

    GIF i PNG formata slike su idealni za slike s ravnim bojama (bez gradijanta) i tvrdih rubova. Uobičajeni primjeri ovih vrsta slika su logotipi, logotipi i ilustracije bez gradijenata.

    Upotrijebimo dobro logotip hrane kao primjer. Ovo mora biti slikovna datoteka jer koristimo fancy vrstu i grafiku jabuke umjesto a. Želimo da naš logotip sjedne na svijetlo zelenu boju pozadine. Evo naše pozadinske boje koju štedimo logotipom.

    Webp bez gubitaka podržava transparentnost (takoÄ‘er poznata kao Alpha kanal) po cijeni od samo 22% dodatnih bajtova. Za slučajeve kada je prihvatljiva kompresija RGB-a, Webp lossy takoÄ‘er podržava transparentnost, obično pruža 3 — manje veličine datoteka u usporedbi s PNG-om.

    Slike na webu dolaze u mnogim formatima, kao što su JPEGS, GIFS, PNG, i još mnogo toga. Zapravo, postoji toliko mnogo akronimi koji prate ih mogu biti komplicirani - nema veze shvatiti out koji je najbolji format slike koji će koristiti na vašoj web-lokaciji. Ovaj vodič će istražiti prednosti JPEG vs PNG vs gif.

    Važno je staviti neke misli u ovo pitanje, međutim, budući da formati koje koristite za slike vaše web-lokacije imaju utjecaj. Neke vrste grafike izgledaju bolje i ne zauzimaju onoliko prostora za pohranu, na primjer, što se prevodi na bolju izvedbu bez gubitka kvalitete.

    Ako je sadržaj kralj, slike su jednako moćnu kraljicu na marketinškom prijestolju. Znajući koji format slike odabrati na i izvan mreže bitan je dio razvoja i održavanja dobre prakse dizajna. Iako će većina slika formata biti u redu na webu, razumijevanje osnovnih snaga i slabosti ovih formata slika će potaknuti vaše povjerenje u biti u stanju odlučiti što je najbolje u svakoj situaciji. Istražite četiri od najčešćih formata slika i kako svaki put odabrati pravi format slike.

    jpg je možda najčešći format slike koji se koristi na webu. Vrlo je kompatibilan i može se pohvaliti malom veličinom datoteke s vrlo malo vidljivim gubitkom kvalitete. JPG se komprimiraju koristeći ono što se zove "gubitak" kompresija, što znači da uvijek postoji gubitak kvalitete kao što štedite. Ovaj gubitak je posebno vidljiv na tekstu i malim detaljima. Poznat kao "artefakti", ovaj gubitak kvalitete pojavljuje se kao mali, blokirani elementi. Pogledajte razliku u sljedećoj usporedbi, osobito oko detaljnih rubova latica cvijeća.

    JPG kompresija je još uvijek optimizirana za fotografije, što artefakti praktički nevidljivi golim okom. Ali ne zaboravite: svaki put kad je fotografija ponovno spremljena, broj artefakata će se povećati. Uvijek je dobra ideja da zadržite kopiju svoje izvorne fotografije je "gubitak" kompresijski format.

    JPG spremanje DPI (točkice po inču) informacije i još uvijek su uobičajeni format za korištenje ispisa. Međutim, oni ne podržavaju transparentne pozadine i ne mogu se lako slojevitati s drugim elementima. Prilikom spremanja fotografskih slika, JPG je definitivno vaš najbolji oklada u odnosu na format bez gubitaka, kao što je PNG. Primjer u nastavku ne prikazuje vizualni vizualni kontrast. Veličina datoteke, međutim, udvostručuje veličinu.

    PNG je još jedan vrlo uobičajen i svestrani format slike na webu danas. Hvalisanje kompresije "bez gubitaka", možete spremiti PNG i ne izgubiti nikakvu kvalitetu. Međutim, to će (u većini slučajeva) donijeti vrlo veliku veličinu datoteke. PNG nije opcija kada je u pitanju ispis, jer ne podržava postupak 4-boje (CMYK). PNG je najbolji format za snimke zaslona, ​​a većina računala će automatski spremiti screenshotove kao PNG. PNG kompresija je optimizirana za grafičke slike i slike koje koriste manje od 16 boja. Ako nas pratite na Facebooku, upoznati ste s našim nastupama u tjednu. Ove grafike se spremaju kao PNG-ove. Primijetite razliku između PNG verzije i JPG verzije.

    GIF je rastuća sila na webu sada. Ovaj format je odličan izbor za ograničene slike u boji koje moraju biti male veličine. Fotografije i slike u boji spremljene u GIF formatu dat će visoku razinu kompresije uz vidljivog gubitka kvalitete.

    Jedinstvena značajka GIF formata je njegova sposobnost da bude animirana. Iako se ova funkcionalnost smanjila posljednjih godina, suptilna i svrhoviti animacija s GIF slike može donijeti pravu pozornost na poziv na akciju ili drugi događaj na vašoj web-lokaciji.

    Acodez je multi-međunarodna nagrađivana digitalna agencija, s uredima u Gurgaon, Mumbaiju, Bangaloreu i Calicutu u Indiji. Započeo u 2011., Acodez ima više od 600 zadovoljnih kupaca koji se šire preko 70 zemalja.

    Acodez je osvojio više od 12 međunarodnih nagrada, natječući se s najboljim agencijama na svijetu. Ove priznanja koje su predstavili vodeće udruge industrije u svijetu svjedoče o našoj kreativnosti, tehničkim vještinama i standardima kvalitete.

    Nudimo široku lepezu usluga za snabdjevanje u bilo kojem od vaših web, mobilnih ili digitalnih marketinških zahtjeva. Budite kroz kreativnost naših dizajna, korištenje najnovije tehnologije ili pridržavanje najboljih industrije najboljih praksi, uvijek napredujemo rješenja svjetske klase našim klijentima.

    u Acodez, opsjednuti smo kvalitetom. I vjerujemo da je isti razlog učinio idealnim izborom za stotine zadovoljnih kupaca diljem svijeta - 70 zemalja od sada, protezajući se na sve 6 kontinenata.

    Stvarno razumijete kako vaše poslovne korisnike kupuju?

    B2B nabave odluke sve više prati složene putovanja, izazivajući dugogodišnje prakse mnogih prodajnih organizacija.

    Stvarno razumijete kako vaše poslovne korisnike kupuju?
    Koristimo kolačiće
    Koristimo kolačiće kako bismo osigurali da vam dajemo najbolje iskustvo na našoj web stranici. Korištenjem web stranice pristajete na naše korištenje kolačića.
    Dopustite kolačiće.