Jak optimalizovat obrazky pro web

Kompletni pruvodce optimalizaci obrazku pro web: porovnani formatu, kompresni techniky a tipy pro vykon.

Proc je optimalizace obrazku dulezita

Images account for over 50% of web page weight on average. Unoptimized images slow down your site, hurt SEO rankings, and increase bounce rates. Google Core Web Vitals penalizes slow-loading images heavily.

Porovnání formátů obrázků

  • JPEG/JPG: Best for photographs. Lossy compression. ~75% smaller than PNG for photos.
  • PNG: Best for logos, icons, screenshots, transparency. Lossless. Larger for photos.
  • WebP: Modern format, 25-35% smaller than JPEG and PNG. Supported by 96% of browsers.
  • AVIF: Newest format, 50% smaller than JPEG. Supported by 92% of browsers.
  • SVG: Vector format for logos and icons. Infinite scalability, tiny file size.

Techniky komprese

  • Lossy: Removes data permanently. JPEG quality 75-85 is visually identical to 100 but 60% smaller.
  • Lossless: Reduces size without quality loss. Use for PNG.
  • Resize before uploading: A 4000px image displayed at 800px is 25x larger than needed.
  • Strip metadata: EXIF data adds 10-50KB. Strip it for web.

Strategie responzivnich obrazku

<img src="photo-800w.webp"
     srcset="photo-400w.webp 400w,
             photo-800w.webp 800w,
             photo-1200w.webp 1200w"
     sizes="(max-width: 600px) 400px,
            1200px"
     alt="Description"
     loading="lazy">

This serves the smallest appropriate image to each device.

Kontrolni seznam vykonu

  • Serve WebP or AVIF with JPEG/PNG fallback
  • Use loading="lazy" for below-the-fold images
  • Always specify width and height attributes to prevent CLS
  • Compress images to under 200KB when possible
  • Use a CDN for image delivery

Use our Image Editor to resize and convert images.

Pokrocile strategie optimalizace obrazku

Mimo zakladni kompresi muze nekolik pokrocilych technik dále snizit velikosti souboru obrazku. Responzivni obrazky pomoci atributu srcset poskytuji ruzne velikosti obrazku na zaklade obrazovky zarizeni, coz zajistuje, ze mobilni uzivatele nestahuji obrazky ve velikosti pro desktop. Lazy loading odklada nacitani obrazku, dokud uzivatel neposouva blízko nim, coz snižuje pociatecni vahu stranky. Moderni formaty jako AVIF a WebP nabizeji o 30 az 50 % lepsi kompresi nez JPEG a PNG pri zachovani vizualni kvality a jsou nyni podporovany vsemi hlavnimi prohlizeci.

Content Delivery Networks (CDN) mohou automaticky optimalizovat obrazky za chodu, poskytuji WebP nebo AVIF prohlizecum, ktere je podporuji, a vraci se k JPEG nebo PNG pro starsi prohlizece. CDN take ukladaji obrazky do pameti cache v hraničních umistenich po celém svete, coz snižuje latenci pro mezinarodni navstevniky. Pokud pouzivate CMS jako WordPress, pluginy jako Smush nebo ShortPixel mohou automatizovat kompresi, zmenseni a prevod formatu pro kazdy nahrany obrazek. Pro staticke weby mohou nastroje pro build jako Sharp (Node.js) nebo Pillow (Python) davkove zpracovavat obrazky behem nasazovani.

Často kladené dotazy

Jaký je nejlepší formát obrázků pro web?
Nejlepší volbou je WebP: je o 25–35 % menší než JPEG a PNG a podporuje ho 96 % prohlížečů. Pro ještě lepší kompresi použijte AVIF s náhradním formátem.
Kolik lze obrázek zkomprimovat bez ztráty kvality?
JPEG v kvalitě 80 je pro většinu fotografií vizuálně totožný s kvalitou 100. PNG lze bezztrátově zmenšit o 5–20 %.
Mám použít loading="lazy" u všech obrázků?
Ne. Používejte ho jen u obrázků pod okrajem obrazovky. Hlavní obrázek (LCP) by se měl načítat okamžitě, jinak se zhorší metrika Largest Contentful Paint.
Jak velký obrázek nahrát?
Nahrávejte obrázky v maximální zobrazované velikosti krát 2 pro retina displeje. Pro zobrazovací plochu 800 px nahrajte 1600 px.
Jak zabránit posouvání layoutu kvůli obrázkům?
Vždy uvádějte u tagů img atributy width a height. Předejdete tak posunům obsahu (Cumulative Layout Shift).
Mam pouzit WebP nebo AVIF?
Oba jsou vynikajici moderni formaty. WebP ma sirsi podporu prohlizecu a je dobre zazemi. AVIF nabizi o neco lepsi kompresni pomer, ale je nove a ma nekteré mezery v kompatibilite. Pro maximalni kompatibilitu poskytujte WebP s JPEG fallback, nebo pouzijte CDN, ktery automaticky ridi format.
Jake rozmery obrazku mam pouzit pro web?
Pro full-width hero obrazky je bezne 1920x1080 pixelu. Pro obrazky obsahu prizpusobte velikost zobrazeni pri 1x nebo 2x pixelove hustote. Nikdy nenahravejte obrazky vetsi, nez je treba — fotka siroka 4000 pixelu zobrazena na 800 pixelu mrhani propustnosti a zpomaluje nacitani stranky.
Jak zmerim dopad optimalizace obrazku?
Pouzijte Google PageSpeed Insights, Lighthouse nebo WebPageTest pro mereni vahy stranky a casu nacitani pred a po optimalizaci. Metriky Core Web Vitals jako Largest Contentful Paint (LCP) jsou prime ovlivněny velikosti obrazku a zlepsi se se správnou optimalizaci.