Optimalizace a velikost obrázků - třeba pro použití na webových stránkách

Obrázky jsou klíčovou součástí každé webové stránky, ale mohou také výrazně zpomalit její načítání. V tomto videu se podíváme na správné formáty obrázků a jak je optimalizovat ještě před nahráním na web. Správně optimalizované obrázky zlepší rychlost načítání vaší stránky, což je důležité jak pro uživatele, tak pro SEO.

Pokud nechcete číst, tento obsah jsem připravil i jako video. Textová podoba následuje hned pod ním.

Odebírat můj youtube

Pokud se vám web načítá pomalu, je to problém. Tím spíš dnes, protože čím dál tím více lidí chodí na web přes mobil, takže často přes mobilní data, kde každý kilobajt je znát. Uživatel může odejít a nebo minimálně to sníží konverzní poměr, protože než vůbec uživatel dostane k akci - třeba zakoupení zboží a služeb, může ho mezitím odradit to, že se mu vše dlouho načítá. Samozřejmě si toho všímá i google, který váš web hodnotí a rychlost načítání je jedním z parametrů. Podle toho hodnocení vás potom umístí ve výsledcích hledávání kde chcete být samozřejmě co nejvýše.

Nespočetněkrát jsem dokonce viděl, jak majitelé webu na něj nahrávají fotky třeba přímo ze zrcadlovky, které mají i několit desítek megabajtů a to fakt nikdo nechce stahovat. Oni často i samotní webaři se s tím moc nepářou a jsou schopní na web nahrát PNG o velikosti několika megabajtů. Naštěstí některé redakční systémy už mají limit pro vkládání obrázků, jako je třeba webflow, ale podle mě pořád povolujou celkem dost. No a proto vznkllo tohle video, jednak abych ho mohl přeposlat jako návod svým klientům a jednak samozřejmě pro všechny majitele webu, kteří chtějí vědět, jak s obrázky na webu správně pracovat, pokud vám to váš webař při předání webu neřekl.

FORMÁTY

Začnu formátem - ty běžné jsou jpg pro fotky, PNG pro obrázky s průhlednou pozadím a pak gif pro animace. Google ale vymyslel formát webp, a právě ten i doporučuji pro použití na webu, protože dokáže kombinovat vlastnosti všech tří zmíněných, ale až v o desítky procent datově úspornější verzi.

Pokud na web vkládáte cokoliv vektorového, co je vektor se mrkněte na tento článek, typicky logo, ideální formát je SVG. Ten zachovává přirozené vlastnosti vektoru, tedy možnost jeho roztahování bez ztráty kvality a zároveň je datově úsporný.

Ke konverzi mezi formáty, typicky JPG, PNG a GIF do Webp stačí do google zadat PNG to Webp a pak už vám vyběhne několik webových stránek, kam obrázek nahrajete a ono vám to vyhodí požadované.

VELIKOST

Velikost je jednak rozlišení. Jak to zjistíte? Dáte pravé tlačítko myši u obrázku a pak vlastnosti a hodnota je uvedená v pixelech - px. Aktuálně bych doporučil šířku 1500px až 2500px pro velké obrazovky které jsou třeba na pozadí webu. A abych to nekomplikoval, tak zjednodušeně pro většinu ostatního obsahu bude v pohodě šířka od 600 do 1200px.

Upravit to můžete buď pomoci grafických programů jako jsou Photoshop, Affinity Photo, Figma nebo třeba Pixelmator. Pokud ani jeden z nich nemáte, zase pomůže webová aplikace, zadáte do google resize image, nahrajete obrázek, u většiny z nich můžete nahrát i několik souběžně a ono to udělá na konkrétní rozměr a nebo to dáte procentuálně.

Druhou věcí z pohledu velikosti je velikost datová. K tomu můžete použít stejné aplikace, jen budete hledat kompres image. Díky nim pak zmenšíte fotku až o desítky procent, takže třeba ze 2MB na 150kb. Obecně bych doporučil, pokud používáte jpg a png, aby jste ideálně nepřekračili u obsahových obrázků 100kb a u titulních velkýh 100 až dejme tomu 300kb.

Mimochodem pokud používáte pro správu svého webu redakční systémy, jako je třeba Wordpress nebo Webflow, tak zmíněnou optimalizaci můžete udělat přímo v nich. Třeba zmíněné Webflow to má jako součást galerie, kdy si vyberete fotky, které chcete optimalizovat a dáte kompres a je to - respektive převede to do formátu Webp. Nezmenšuje to ale rozlišení, tudíž o to je potřeba se postarat ještě před nahráním.

Takže jak sami vidíte, není to nic složitého a to ani pokud neovládáte žádný grafický software.

Další podobný obsah

Rychlost vývoje: tvorba webů až o 50% levněji oproti Wordpress / Proč Webflow #1

Článek i video

Jaký je průběh tvorby webových stránek

Článek i video

5 chyb při tvorbě webu nebo eshopu, které nikdy nedělejte #1

Článek i video

Postavte jednoduše a rychle web na hotové šabloně / Proč Webflow #4

Článek i video

První místo ve vyhledavačích? Aneb SEO optimalizace / Proč Webflow #6

Článek i video

FRAMER: představení geniálního no-code nástroje pro tvorbu webů

Článek i video

Potřebujete pomoct s webdesignem, videem nebo tvorbou webu?

webový expert creativ design

shopify webflow framer

Vytvářím úspěšné weby, projekty a produkty se specializací na ux / kreativní design a no-code technologie, primárně webflow a framer, sekundárně shopify.

Rezervovat online schůzku
17+
let zkušeností
500+
projektů
200+
skvělých klientů
1300+
odběratelů na youtube

Navrhnu vám nádherný a neotřelý design, který vaši návštěvníci budou milovat a to jak pro web, aplikaci, tak i pro e-shop. Nebo vytvořím kompletní web, který vám přinese nové zákazníky. A nebojte, díky Webflow a Framer vás to nebude stát raketu. Mám přesah i do videa, printu, brandu, CRO a hlavně marketingu. Nejsem nejlevnější, protože nejsem zelenáč. Přesto budu vaše nejlepší investice.

Klienti

Klienti

Klienti

Klienti

Klienti

CubesDigital se stal za posledních 5 let naším výhradním partnerem pro tvorbu, správu a rozvoj webů. Za toto období se nám povedlo najít společnou řeč i náhled na prezentaci společnosti i služeb, které se snažíme stále rozvíjet. K tomu nám pomáhá klid, rozvaha a marketingové myšlení pana Švejdy s technologickou kvalitou jeho týmu, který se nebojí zkoušet nové věci. Spolupráce funguje výborně a nadále ji rozšiřujeme.

Lukáš Opat photo
Lukáš Opat
Hrdlička holding

Setkání s Pavlem Švejdou nad tvorbou webových stránek našeho improvizačního představení bylo neobyčejně inspirativní. S velikým klidem a trpělivostí jemu vlastní vyslechl naše zběsilé nápady a se svým týmem realizovatelné opravdu zrealizoval, nerealizovatelnému našel zcela jiný rozměr a výsledek tím ještě umocnil. Pouze díky jejich otevřenosti, sofistikovanému pohledu na požadavky zákazníka a veliké profesionalitě se nyní můžeme chlubit našim webem.

Martin Zbrožek photo
Martin Zbrožek
herec a muzikant

Jako advokát s dlouhou praxí jsem potkal řadu lidí. A pana Švejdu potkám rád kdykoliv znovu. Komunikativní, rychlý, kvalitní. Nic více jako advokát od lidí v businessu nechci. A málo kdy to dostanu. Zde jsem plně spokojen a děkuji za dobrý web.

Ronald Němec photo
Ronald němec
advokát

Pan Švejda má velmi profesionální přístup v designu a tvorbě webových prostředí. Jeho konstruktivní nápady a myšlenky výborně implementuje do fungujících webů, se kterými máme úspěch i v USA. Pokračujeme v dlouhodobé spolupráci a pana Švejdu rádi doporučujeme našim dalším zákazníkům. Těšíme se na další spolupráci!

Lunda photo
Radek Lunda
Ardyssey

CubesDigital jsme vybrali po doporučení pro jejich kreativu a kvalitu zpracování. Svého rozhodnutí nelituji. Postupně jsme našli společnou řeč a v maximální jednoduchosti sdělili srozumitelně vše podstatné. Výsledek je povedený a hlavně plní definované obchodní cíle. Pana Švejdu a jeho team tak mohu doporučit, ani pro nás spolupráce nekončí.

Michal Rozehnal photo
Michal Rozehnal
reporting.cz

S CubesDigital spolupracujeme již několik let na tvorbě webu naší asociace. Vážíme si vstřícnosti, flexibility a profesionálního přístupu pana Švejdy. Věříme, že i nadále bude naše spolupráce pokračovat a náš web budeme neustále udržovat funkční a atraktivní.

Lenka Vašková photo
Lenka vašková
APG a Čkz

Se společností CubesDigital jsme velmi spokojeni. Oceňujeme zejména strukturovanost postupu při realizaci celého projektu. V průběhu nám pan Švejda informovaně odpověděl na všechny dotazy, flexibilně a racionálně reagoval na veškeré naše požadavky. Těšíme se na další spolupráci.

Matěj Přibyl photo
Matěj přibyl
VICF

Díky spolupráci s Pavlem Švejdou a jeho teamem se podařilo vytvořit webové stránky s nadčasovým designem, který nechává vyniknout především šperky samotné. Baví mě, že Pavel vždy najde vhodné řešení všech mých požadavků, ať už jsou to drobné nebo náročnější změny. Považuji ho za odborníka na webdesign a cením si jeho odborných doporučení. Díky jeho profesionálnímu přístupu naše spoluprace zdaleka nekončí.

Michal Kadaník photo
Michal Kadaník
‍‍
přední šperkař

S CubesDigital spolupracujeme od začátku existence naší společnosti. Navrhli nám corporate identitu, vytvořili web a grafickou podobu web aplikace, kterou poskytujeme našim klientům. Kooperace s agenturami není jednoduchá. Dříve jsme spolupracovali se třemi organizacemi a museli jsme se rozloučit. S Pavlem a jeho teamem se nám to ale ustálilo a dobře si vyhovujeme, jsme velmi spokojený. A navíc naši klienti obdivují výsledek, který má mezinárodní kvalitu!

Jan Pavelka photo
Jan Pavelka
‍‍‍
Talterra
ROWAN LEGAL logoHRDLIČKA logoUNICREDIT  logoVICF logoIGNUM logoInstitut H21  logoManpower logoJettyRobots logoCKZ logoEM Fluids  logoKADANIK logoPMF logoDevinn  logoPEMA logoShopsys logoExpando logoMAWIS logoReporting.cz logoTalterra logoMilostný trojúhelník logoKurzyZpivani logo

S kým nejraději spolupracuji

Nerozlišuji, jestli pracuji na projektu za pár tisíc nebo za stovky tisíc. Pracuji jak pro malé živnostníky, tak i velké nadnárodní korporace nebo digitální agentury. Byť s rozdílným přístupem pro maximální přínosnost klienta. Vždy totiž hledám nejlepší poměr cena a výkon. Co je ale pro spolupráci pro mě podstatné, tak jednak jestli jsem ten správný, který je schopen pomoct dosáhnout vašeho cíle a jestli si společně lidsky sedneme.

Jaká je moje kapacita a dostupnost

Aktuálně dostupný

Svůj harmonogram mám rozdělený na dvě části - v jedné jsou naplánované projekty a dlouhodobé spolupráce. A v druhé, byť menší, si vyhrazuji čas na vše ostatní. Což mimo jiné znamená, že když se mi ozvete, jsem schopen hned váš projekt řešit a zatímco probíhá komunikace, zadání atp., tak v té druhé části mého harmonogramu si na pozadí vytvářím čas na projekt. Což je cesta jak být více a rychleji dostupný pro nové projekty a výzvy.

Jaká je moje cena a hodinová sazba

Svojí cenu a hodinovou sazbu mám nastavenou tak, aby byla dobře odůvodnitelná s ohledem na mé zkušenosti i rychlost práce - jsem totiž senior, vím co dělám a dělám to s jistotou a odpovídající rychlostí. A přestože je nejlepší si spolupráci vyzkoušet než psát nic málo říkající hodinovou sazbu, níže jsem to alespoň pro základní porovnání rozepsal:

Hodinová sazba pro Webflow, Framer, CRO - 980 Kč bez DPH / hodina

UX a UI Design práce - webu, eshopu, aplikace, brandu a video - 880 Kč bez DPH / hodina

Šablonové weby Webflow / Framer od 13.000 Kč bez DPH

Individuální webové stránky od 30.000 Kč bez DPH

kontakt

kontakt

kontakt

Budu vaše nejlepší investice. Vím co dělám a umím vám vydělat. Přesvědčte se - zavolejte mi, nebo napište.

Odeslání formuláře souhlasíte se zásadami GDPR
Děkuji, co nejdříve vás budu kontaktovat.
Něco se pokazilo. Zkusíte to prosím znovu? Děkuji

Pavel Švejda, DiS.
IČ: 86931881 — DIČ: CZ8911021515

Jsem plátce DPH.