Kompletní průvodce optimalizací obrázků

Jak optimalizovat obrázky pro výkon webu (2025)

Snižte velikost souborů o 60-80 %, zlepšete Core Web Vitals a zvyšte konverze s osvědčenými optimalizačními technikami.

Osvědčené techniky

Porovnání 7 nástrojů

8 minut čtení

Co je optimalizace obrázků?

Optimalizace obrázků je proces snižování velikosti souborů obrázků při zachování vizuální kvality. Zahrnuje výběr správného formátu, aplikaci komprese a změnu velikosti obrázků na vhodné rozměry.

✓ Zkracuje časy načítání stránky

✓ Zlepšuje Core Web Vitals

✓ Snižuje náklady na šířku pásma

✓ Zvyšuje konverze

Proč je optimalizace obrázků důležitá

Obrázky tvoří 50-70 % typické váhy webové stránky

⚠️ Zpoždění 1 sekundy snižuje konverze o 7 %
⚠️ 53 % návštěvníků odchází, pokud stránka načítá >3 sekundy
⚠️ Google používá rychlost stránky jako faktor hodnocení
⚠️ Mobilní uživatelé očekávají načtení <3 sekundy

Dopad na výkon

⚡

Rychlejší načítání stránek

O 60-80 % menší soubory
📊

Lepší Core Web Vitals

Skóre LCP, CLS
🔍

Vyšší hodnocení Google

Rychlost je faktor
💰

Více konverzí

Uživatelé zůstávají déle

Úspora nákladů

💵 Nižší náklady na CDN
💾 Snížené náklady na úložiště
🖥️ Menší zatížení serveru
📉 Nižší náklady na hosting

Průvodce formáty obrázků 2025

Format	Best For	Compression	File Size
JPEG / JPG	Fotografie, složité obrázky s mnoha barvami	Ztrátová (doporučeno 70-85 %)	Střední (typicky 50-200 KB)
PNG	Grafika s průhledností, snímky obrazovky, text	Bezztrátová (nebo ztrátová s nástroji)	Větší (typicky 100-500 KB)
WebP ⭐	Univerzální - fotografie i grafika (97% podpora prohlížečů)	Ztrátová i bezztrátová	O 30 % menší než JPG
AVIF	Formát nové generace (92% podpora prohlížečů)	Ztrátová i bezztrátová	O 50 % menší než JPG
SVG	Ikony, loga, jednoduchá grafika	Vektorový (nekonečně škálovatelný)	Velmi malý (1-20 KB)
GIF	Jednoduché animace (vyhněte se u fotek)	Bezztrátová (max 256 barev)	Velké pro animace

Recommendation: Pro rok 2025: Používejte WebP s JPEG zálohou pro fotografie, PNG pro grafiku s průhledností, SVG pro ikony. AVIF je nastupující, ale zkontrolujte podporu prohlížečů.

Ztrátová vs bezztrátová komprese

Ztrátová komprese

Trvale odstraňuje data pro dosažení menších velikostí. Viditelná ztráta kvality pouze při vysoké kompresi.

Výhody

✓ Zmenšení o 60-80 %
✓ Mnohem menší než bezztrátová
✓ Skvělé pro fotografie

Nevýhody

✗ Kvalita se každým uložením zhoršuje
✗ Nevhodné pro grafiku/text

Formáty: JPEG, WebP (ztrátový režim)

Bezeztrátová komprese

Zmenšuje velikost bez ztráty kvality. Původní data lze dokonale rekonstruovat.

Výhody

✓ Žádná ztráta kvality
✓ Lze opakovaně upravovat
✓ Nejlepší pro grafiku/snímky obrazovky

Nevýhody

✗ Zmenšení pouze 20-40 %
✗ Velké soubory pro fotografie

Formáty: PNG, WebP (bezztrátový), GIF

💡 Profesionální tip: Používejte ztrátovou kompresi pro fotografie (kvalita 70-85 %), bezztrátovou pro snímky obrazovky a grafiku s textem.

Pracovní postup optimalizace obrázků

1. Vyberte formát

Fotka? → WebP/JPEG. Grafika? → PNG/SVG. Ikona? → SVG

2. Změňte rozměry na velikost zobrazení

Nepodávejte 4000px obrázky pro 400px displej. Přizpůsobte rozměry skutečnému použití.

3. Aplikujte kompresi

Ztrátová 70-85% pro fotografie. Zvažte bezztrátovou pro grafiku. Vyvažte velikost a kvalitu.

4. Optimalizujte metadata

Odstraňte EXIF data (informace o fotoaparátu) pro soukromí a menší soubory. Ponechte alt text pro SEO.

5. Ověřte výsledky

Zkontrolujte velikost souboru (<100 KB ideální), vizuální kvalitu a skóre rychlosti stránky.

💡 Tip: Diwadi automatizuje kroky 1-4 pomocí AI optimalizace. Stačí přetáhnout obrázky a exportovat.

Nejlepší nástroje pro optimalizaci obrázků

Nástroj	Typ	Dávkové zpracování	Rychlost	Cena
Diwadi ⭐	Desktop	Neomezeno	Velmi rychlé	Free / $29
TinyPNG	Online	20 obrázků	Střední	Free / $25/yr
Squoosh	Online	1 najednou	Pomalé	Free
ImageOptim	Desktop	Neomezeno	Velmi rychlé	Free
ImageMagick	CLI	Skriptovatelné	Velmi rychlé	Free

Recommendation: Pro dávkovou optimalizaci jsou desktopové nástroje jako Diwadi 25x rychlejší než online alternativy. Online nástroje jsou v pořádku pro rychlou jednorázovou optimalizaci.

Download Diwadi Free →

Měření úspěchu optimalizace

Klíčové metriky ke sledování

Velikost souboru

Cíl: <100 KB na obrázek

Váha stránky

Cíl: <1,5 MB celkem obrázků

Skóre LCP

Cíl: <2,5 sekundy

Skóre PageSpeed

Cíl: 90+ na mobilu

K měření úspěšnosti optimalizace použijte Google PageSpeed Insights, Lighthouse nebo WebPageTest.

Ready to Optimize Your Images?

Download Diwadi for free and optimize images 25x faster than online tools.

Download Diwadi Free

Často kladené otázky

Co je optimalizace obrázků? ▼

Optimalizace obrázků je proces snižování velikosti souborů obrázků při zachování přijatelné kvality. Zahrnuje kompresi, výběr formátu a úpravu rozměrů pro zlepšení rychlosti a výkonu webu.

Proč je optimalizace obrázků důležitá? ▼

Obrázky obvykle tvoří 50-70 % váhy webové stránky. Optimalizované obrázky se načítají rychleji, zlepšují Core Web Vitals (faktor hodnocení Google), snižují náklady na šířku pásma a zvyšují konverze. Zpoždění 1 sekundy může snížit konverze o 7 %.

Jaký je rozdíl mezi ztrátovou a bezztrátovou kompresí? ▼

Bezztrátová komprese zmenšuje velikost souboru bez ztráty kvality (PNG), zatímco ztrátová komprese dosahuje menších velikostí s minimálním viditelným snížením kvality (JPG, WebP). Ztrátová komprese obvykle zmenšuje velikost souborů o 60-80 % oproti 20-40 % u bezztrátové.

Jaký je nejlepší formát obrázků pro weby v roce 2025? ▼

WebP s JPG zálohou je nejlepší praxe. WebP je o 30 % menší než JPG s podobnou kvalitou a má 97% podporu prohlížečů. Použijte detekci moderního formátu: značka <picture> se zdrojem WebP a zálohou JPG.

Jak malé by měly být moje obrázky? ▼

Cíl: <100 KB pro webové obrázky, <50 KB pro mobil. Hero obrázky mohou být 150-200 KB. Produktové obrázky: 50-100 KB. Miniatury: <30 KB. Celková váha stránky by měla být pod 1-2 MB pro dobrý výkon.

Should I optimize images before or after uploading? ▼

Before uploading! Pre-optimize images to save upload time, reduce server storage, and ensure consistent quality. Many CMS/website builders don't optimize properly. Desktop tools like Diwadi are 25x faster than uploading then optimizing.

What quality setting should I use? ▼

For JPG/WebP: 70-85% quality is optimal. 85% for important images (hero, products), 70-75% for content images. Below 70% shows visible artifacts. PNG: use lossy compression to reduce size by 60-70% with minimal quality loss.

Can I batch optimize 1000s of images at once? ▼

Yes with desktop tools like Diwadi! Drag entire folders and compress thousands of images simultaneously. Online tools typically limit batches to 1-20 images at a time, making large-scale optimization impractical.

Will optimizing images hurt SEO? ▼

No, it helps SEO! Google's Core Web Vitals (ranking factor) measure page speed. Optimized images improve Largest Contentful Paint (LCP) and reduce Cumulative Layout Shift (CLS), directly boosting rankings.

How often should I optimize images? ▼

Always! Optimize every image before uploading to your website. Set up a workflow: capture/create → optimize → upload. For existing sites, audit quarterly and optimize any images >100 KB.