Obrázky pro web - optimální formáty, velikosti a programy pro úpravy

Napsal(a) Napsáno úterý, 21 říjen 2014 Zveřejněno v Rady a návody Přečteno 20034 krát
Ohodnotit tuto položku
(4 hlasů)

Na internetu se používají především dva formáty obrázků s koncovkou .jpg a .png. Občas se setkáme ještě s formátem s koncovkou .gif a to především v podobě krátké animace, protože jako statického obrázku ho překonal PNG. Výše zmíněné formáty mají své specifické využití a je dobré znát jejich možnosti. Zvolením správného formátu lze snížit velikost datového objemu a zároveň zachovat kvalitu obrázku.



JPG (JPEG)

Jedná se o nejčastější obrázkový formát na internetu, který používá ztrátovou kompresy (JPEG) a obrázky ukládá ve fotorealistické kvalitě. Je to výborný formát právě pro úpravu digitálních fotografií, protože dokáže výrazně snížit datový objem při zachování kvality obrazu. Nehodí se však pro obrázky tvořené jasnými velkými plochami, nebo ostrými liniemi (obrázky tvořené uměle), zobrazení textu nebo ikon, protože komprese vytváří v obrazu viditelné a rušivé artefakty. Tento formát neumožňuje průhlednost (alfa kanál).

Ukázka použití obrázku JPG

Obrázek ukazuje vhodné užití formátu JPG (levá část) a nevhodné použití (pravá část). V horní části jsou obrázky bez komprese, ve spodní pak můžete vidět artefakty které jsou patrnější, čím je komprese větší. Se zvyšující se kompresí se snižuje datová velikost. Cílem je vždy co nejméně datově objemný obrázek, který bude ale i koukatelný a nebude ho příliš degradovat komprese. Pro obrázek autobusu zde jasně vyplývá, že bude pro něj lepší zvolit formát PNG-8.

Po kliknutí se zobrazí zvětšený náhled stejného rozměru obrázku (jakoby pod lupou).

jpg-nahled

JPG jasná volba při úpravách digitálních fotografií pro web.

PNG (Portable Network Graphics)

Je formát s bezstrátovou kompresí a byl vytvořen jako náhrada za starší formát gif. Jeho velkou výhodou je osmibitová průhlednost (alfa kanál), která zaručuje jemný přechod okraje objektu na obrázku do průhledného pozadí. Tento formát ocení především tvůrci webových stránek, právě kvůli alfa kanálu. Hodí se pro obrázky obsahující jednobarevné oblasti, plynulé přechody a ostré hrany (umělé obrázky). Pro tento formát existují i návrhy pro jednoduché animace podobně jako u GIFu, ale do praxe se zatím neprosadily.

S PNG formátem se můžeme setkat nejčastěji ve dvou formách a to PNG-8 a PNG-24

  • PNG-8 (hodně podobný GIF)
    • zvládne 256 barev
    • zvládne alfa kanál (jen s jednobitovou průhledností) - pixel je buď průhledný, nebo není, obrázek tedy má zubaté okraje
  • PNG-24
    • dokáže pracovat s cca 17 milióny barev
    • má osmibitovou průhlednost - pixel může mít 8 úrovní průhlednosti, výsledkem je jemný přechod do pozadí

Ukázka průhlednosti PNG

Na obrázku je vidět, že PNG-8 dělá při použití průhlednosti zubaté okraje (úplně stejně se chová i formát GIF). PNG-24 je ale jiné kafe - průhlednost do pozadí je perfektní, vč. přechodu.

png-nahled

PNG jasná volba při vytváření "umělých obrázků" pro web, nebo nutnosti použít alfa kanál.

GIF (Graphics Interchange Format)

Je také formát s bezstrátovou kompresí, ovšem má jen 256 barev. GIF má také omezené možnosti alfa kanálu (neumožňuje přechod průhlednosti) - dělá tedy zubaté okraje.

Jediná výhoda, ktrerá drží tento formát ještě při životě, je možnost jednoduché animace.

Ukázka jednoduché animace GIF

animovaný gif

GIF použijte jen, pokud potřebujete rychle vytvořit krátkou animaci, nebo animovaný banner.

Optimální velikost obrázků pro web

Častým nešvarem na webových stránkách bývají vložené fotografie ve větším rozlišení, než se skutečně zobrazují. Například vložený obrázek přes redakční systém zmenšený jen nastavením šířky na 315px, ale skutečný rozměr je 1200px. Na první pohled rozdíl není vidět, ale poznáte jej při stahovaní dat prohlížečem. Pokud takto vložených obrázků je na stránce víc, výrazně to sníží rychlost načítaní.

Ukázka nesprávně vloženého obrázku s větším rozlišením vlevo. Vpravo správně vložený obrázek ve skutečné velikosti 315px. (Skutečné velikosti obrázků si můžete ověřit kliknutím na obrázek pravým tlačítkem myši a zobrazením vlastností.)

obrazek-1200x685obrazek-315x178

 

Obrázky by tedy měly mít stejné rozměry v pixelech jak na stránce, tak ve skutečném zobrazení. Rozlišení by mělo být 72 obrazových bodů na palec (to je v podstatě hustota informací). Vyšší rozlišení je užitečné hlavně pro tisk, pro elektronické použití je ideální rozlišení 72 DPI (Dots Per Inch, tedy počet bodů na palec).
Pokud vytváříte i náhledové obrázky (zvětšené náhledy po kliknutí na obrázek), měly by mít rozměry v pixelech ideálně 800x600 a maximálně 1200x800. Pokud by byly náhledy větší, nemusely by se některým uživatelům zobrazit celé. Někteří uživatelé by mohli mít problém zavřít náhledového okno.

Programy pro úpravu a ukládání obrázků

Teď už víte, kdy a jaký formát obrázku použít a v jakém rozlišení je pro web ukládat. Nyní potřebujete grafický program, který umí upravovat a hlavně ukládat JPG, PNG, případně GIF. Takových programů jsou stovky - od profesionálních jako je Photoshop až po jednoduché a zdarma, např. Easy Thumbnails. Většina prohlížečů obrázků (IrfanView, Picasa, FastStone Image Viewer) nabízí alespoň ořez a zmenšení obrázků, příp. jednodušší práci se světlem, efektem červených očí atd. Toto je postačující pro většinu uživatelů, kteří chtějí na web umístit vlastní fotky z digitálního fotoaparátu. Jsou tu samozřejmě i programy určené primárně na úpravu fotografií, jako například Zoner Photo Studio apod.

Osobně používam program Photoshop a pro rychlé hromadné zmenšení obřích fotek z digitálního fotoaparátu pak Easy Thumbnails. Pro klasického uživatele bych mimo Easy Thumbnails doporučil FastStone Image Viewer. Je to perfektní prohlížeč obrázků, který nabízí i úpravy jasu, kontrastu, použití barev a několik dalších praktických grafických filtrů, je zdarma a podporuje i češtinu.
Pro pokročilé uživatele je dobrá volba program Gimb, což je free alternativa za profesionální Adobe Photoshop.

 



Naposledy změněno úterý, 31 březen 2015 06:23

Zaujal Vás tento článek? Sdílejte ho a šiřte dál...

Martin Vinš

Pracuji jako grafik a kodér pro firmu WebPrezent.



Komentáře   

 
Marek
+4 # Marek 2015-03-30 23:58
Skvělej článek, hezky napsaný a spoustu cenných informací, díky :-)
Odpovědět | Odpovědět citací | Citovat
 
 
Boris
+3 # Boris 2016-11-26 14:47
Moc děkuju za užitečné informace.
Odpovědět | Odpovědět citací | Citovat
 
 
orphan
+1 # orphan 2017-10-27 13:40
Pro pokročilé uživatele je dobrá volba program Gimb, což je free alternativa za profesionální Adobe Photoshop.

Chyba v texte: Gimb namiesto Gimp
Inak velmi pekny a uzitocny clanok.
Odpovědět | Odpovědět citací | Citovat
 
 
baton de police
0 # baton de police 2018-01-29 09:38
Tonfas, matraque et bâton de Police en vente
sur https://www.matraque-telescopique.com Spécialiste
dans la vente d'armes de défense sur Internet. Acheter des armes utilisé par la Police en vente
libre livré chez vous en 48 heures.
Odpovědět | Odpovědět citací | Citovat
 
 
money lender
0 # money lender 2018-02-13 04:48
Hey! This post couldn't be written any better! Reading this post reminds me of my previous room mate!
He always kept chatting about this. I will forward
this post to him. Fairly certain he will have a good read.
Many thanks for sharing!
Odpovědět | Odpovědět citací | Citovat
 
 
power blender
0 # power blender 2018-03-25 21:43
I have been exploring for a little bit for any high-quality articles or weblog posts in this kind of space .
Exploring in Yahoo I ultimately stumbled upon this web site.
Reading this info So i'm happy to express that I have a very
excellent uncanny feeling I came upon exactly what
I needed. I so much surely will make sure to don?t forget this
website and give it a glance on a relentless basis.
Odpovědět | Odpovědět citací | Citovat
 
 
shocker Taser
0 # shocker Taser 2018-03-28 16:24
Matraque-telesc opique.com c'est une boutique d'armurerie en ligne avec un large choix de
Taser, Shocker électrique, paralyseur en vente libre 100% légal en France.
Livraison en 48 heures.
Odpovědět | Odpovědět citací | Citovat
 
 
VictorinaChief
0 # VictorinaChief 2018-03-29 18:58
I have checked your blog and i've found some duplicate content,
that's why you don't rank high in google, but there is
a tool that can help you to create 100% unique articles, search for:
boorfe's tips unlimited content
Odpovědět | Odpovědět citací | Citovat
 
 
matraque police
0 # matraque police 2018-04-01 17:18
Achetez bâtons et matraques de police sur la
boutique : https://www.securite-defense.fr/ principalement utilisée par la police partout dans le
monde les armes sont de qualités professionels.
Odpovědět | Odpovědět citací | Citovat
 
 
parapluie
0 # parapluie 2018-04-06 21:48
Parapluie matraque: Le parapluie arme est l'arme discrète pour faire
fuir des agresseurs en cas de conflit. Vous pouvez le retrouver sur https://www.securite-defense.fr/arme-de-defense/matraque-telescopique/parapluie-de-defense-incassable.html l'envoi est garantie en Europe.
Odpovědět | Odpovědět citací | Citovat
 
 
matraque police
0 # matraque police 2018-04-13 14:31
La matraque, arme traditionnelle des policiers, est un bâton généralement moins
long qu'un bras, fait de bois, caoutchouc, métal ou de plastique.
Vous pouvez acheter vos matraques sur https://www.matraque-telescopique.com/ Matraque télescopique acier ou nylon, tonfa, matraque électrique.
Vous pouvez choisir parmis un grand nombre de produits.
Odpovědět | Odpovědět citací | Citovat
 
 
acheter compte gmail
0 # acheter compte gmail 2018-05-15 02:39
Vous avez besoin de nombreuses comptes email
? Vous avez la possibilité d'acheter des comptes gmail
, Yahoo et Hotmail sur la boutique grey hat seo tools :
https://www.ghstools.fr/shop/3-comptes-e-mail Les comptes sont
pva . Le protocole POP et IMAP sont actifs . Tous les comptes sont
testés avant d’être vendu . vous allez
recevoir vos comptes par mail en pas plus de 24h . Pour commander venez sur
le magasin ghstool https://www.ghstools.fr/shop/
Odpovědět | Odpovědět citací | Citovat
 
 
apprendre La bourse
0 # apprendre La bourse 2018-05-17 05:23
Apprenez à être rentier avec la bourse en suivant des formations simple à comprendre sans connaissances particulières .
Formation Gratuite . Une nouvelle vidéo ( 30 minutes ) quotidiennement ( proposés en replay illimité
jusqu'à la fin de l'évènement sur 7 jours ) . Le plan exact , à
chaque étape , pour vivre la vie dont vous rêviez avec la bourse
. Vivre de la spéculation en Bourse est un fantasme partagé par pas mal de
personnes . grâce aux formations en bourse c'est possible
pour tous sur : https://formation.millionnaire-boursier.com/bienvenue/?aff=5a4fa7&cpg=5a915d
Odpovědět | Odpovědět citací | Citovat
 
 
permis de construire
0 # permis de construire 2018-05-31 05:52
Demandez votre devis pour le permis de construire de votre maison ou piscine, véranda,
garage etc.... Obtenez votre réponse sous 24 heures. Vous payez une fois
votre permis de construire approuvé par vos soins.
Odpovědět | Odpovědět citací | Citovat
 
 
devis plombier
0 # devis plombier 2018-06-17 18:12
Entreprise de Plomberie, l'équipe A.M.B intervient très
vite pour vos installations, travaux de plomberie, chauffage, sanitaire.

https://www.depannage-plombier-amb.fr/
Odpovědět | Odpovědět citací | Citovat
 
 
magasin d arme
0 # magasin d arme 2018-06-18 06:48
Vous cherchez sur le Net une arme mais vous n'arrivez pas à savoir bien choisir
parmi les différentes armes proposées sur le web. Visitez https://www.arme-de-defense.fr/ pour
faire le bon choix
Odpovědět | Odpovědět citací | Citovat
 
 
Plombier Paris
0 # Plombier Paris 2018-07-13 03:01
Confiez tous vos pannes, restauration et aussi l'installation sur
des opérations de plomberie, sanitaire ou plomberie chez la société dépannage artisan plombier amb.
Des plombiers experts s’occupent de vos problèmes
en quelques cliques.
Odpovědět | Odpovědět citací | Citovat
 
 
Plombiers Paris
0 # Plombiers Paris 2018-07-24 18:10
Dépannage dépanneur plombier amb est un expert leader en Ile-de-France et Paris
dans la pose et réparation de tous les travaux de plomberie.
Profitez-y de ses services précisément adapté pour vos pannes,
installation précis et efficace !
Odpovědět | Odpovědět citací | Citovat
 
 
Plomberie Paris
0 # Plomberie Paris 2018-08-30 19:43
Dépannage Plombier amb est une société qui propose
des travaux de plomberie, chaudière mais également le dégorgement à un tarif avantageux en Ile-de
France et ses environs. Une équipe qualifiée vous attend
de 24h24 et 7j7, appelez rapidement le 01 40 19 02 29.
Odpovědět | Odpovědět citací | Citovat
 
 
TeriJuicy
0 # TeriJuicy 2018-09-04 08:57
Hi. I see that you don't update your blog too often. I know that writing articles is
boring and time consuming. But did you know that there is a
tool that allows you to create new articles using existing content (from article directories or other blogs from your niche)?
And it does it very well. The new posts are unique and
pass the copyscape test. Search in google and try:
miftolo's tools
Odpovědět | Odpovědět citací | Citovat
 
 
Générateur de texte
0 # Générateur de texte 2018-09-26 17:00
Découvrez le logiciel de génération de contenu automatique en langue française.
Ce software de réécriture de texte vous fabrique des textes de blog, mais aussi des textes pour publier des commentaires ou faire de la création de site.
Les outils de recherches aprécierons que vous leur fournissez du
contenu unique sans essence dupliqué alors n'attendez plus à réaliser du contenu avec un programme bâti pour
faire accélerer les choses aux créateurs. Rendez vous sur http://www.content-spinning.fr
Odpovědět | Odpovědět citací | Citovat
 
 
BestDoreen
0 # BestDoreen 2018-10-17 05:48
I have noticed you don't monetize your site, don't waste
your traffic, you can earn additional cash every month. You can use the best adsense alternative for any
type of website (they approve all websites), for more info simply search in gooogle: boorfe's tips monetize your website
Odpovědět | Odpovědět citací | Citovat
 
 
BestIvey
0 # BestIvey 2018-10-24 20:07
I see you don't monetize your website, don't waste your traffic, you can earn additional cash
every month. You can use the best adsense alternative for any type of website
(they approve all websites), for more details simply search
in gooogle: boorfe's tips monetize your website
Odpovědět | Odpovědět citací | Citovat
 
 
BestIrish
0 # BestIrish 2018-10-28 13:44
I have noticed you don't monetize your site, don't waste your traffic, you can earn extra cash every month.
You can use the best adsense alternative for any type
of website (they approve all websites), for more details simply search in gooogle:
boorfe's tips monetize your website
Odpovědět | Odpovědět citací | Citovat
 
 
BestIvory
0 # BestIvory 2018-10-31 07:23
I have noticed you don't monetize your site, don't waste your traffic,
you can earn extra cash every month. You can use the
best adsense alternative for any type of website (they approve all websites), for more info simply search in gooogle:
boorfe's tips monetize your website
Odpovědět | Odpovědět citací | Citovat
 
 
profile7886
0 # profile7886 2018-11-02 16:06
Need cheap hosting? Try webhosting1st, just $10 for an year.

http://www.sports3.log.wasatia.info/images/photos/401/21/6288c261df2327d98de3b674.jpg
Odpovědět | Odpovědět citací | Citovat
 
 
BestRobert
0 # BestRobert 2018-11-16 13:29
I see you don't monetize your blog, don't waste your traffic, you can earn extra bucks every month.
You can use the best adsense alternative for any type of website (they approve all websites),
for more info simply search in gooogle: boorfe's tips monetize your website
Odpovědět | Odpovědět citací | Citovat
 

Přidat komentář

Bezpečnostní kód Obnovit