zpět na technikálie

Optimalizace animovaných obrázků pro web

Grafička po mě chtěla umístit 3MB gif na web. 🤯

No to jako vůbec, reagoval jsem. S tím musíme něco udělat. Jeden takový obrázek (navíc doprovodný) by zbytečně web brzdil.

Existuje jednoduché řešení.

Snímek obrazovky animovaného obrázku nůžek rozloženého do jednotlivých snímků

Datum poslední změny: 25. 2. 2026

Jestli se ti nechce číst, celý postup optimalizace gif jsem zachytil v tomhle skoro čtyř minutovém videu.

Postup optimalizace animovaných obrázků (gif)

Krok 1: Canva

  1. Vytvoř v Canvě layout správné velikosti (např. 300 x 200 pixelů)
  2. Nahraj původní gif, upravíš velikost a natočení podle potřeby
  3. Stáhni jako gif s průhledným pozadím
  4. Tento krok sám o sobě už sníží velikost souboru z 3 MB na cca 1 MB

Krok 2: Konverze gif - avif

  1. Jdi na https://ezgif.com/
  2. Nahraj upravený gif z Canvy
  3. Klikni na "Upload Files" a počkej na zpracování
  4. Zvol "Generovat avif"
  5. Stáhni výsledný soubor

Pozor: Soubor se stáhne s příponou .avifs - přejmenuj ho na .avif, jinak ho WordPress nerozpozná.

Krok 3: Kontrola kompatibility serveru

  1. V administraci WordPressu zkontroluj v sekci "Zdraví webu" > "Informace" > "Zpracování médií"
  2. Ověř, zda je u ImageMagic uvedena podpora avif formátu
  3. Pokud není, bude potřeba na serveru zapnout podporu ImageMagic. U slabších sdílených hostingů bude třeba kontaktovat podporu.

Výsledek

  • Původní gif: 3,6 MB
  • Zpracovaný gif z Canvy: cca 500 KB
  • Finální avif: pouze 200 KB

Animace zůstane zachována a průhledné pozadí také. Grafička je happy, já jsem happy a především návštěvníci webu budou happy.

Poznámka: proč postup přes Canvu? Přímé použití online nástrojů pro změnu velikosti obrázku ničí průhlednost pozadí. Respetive: nenarazil jsem na takový, který ne.

WordPressito

Měsíční newsletter pro majitele webů, kteří chtějí, aby jejich WordPress spolehlivě fungoval.

Dozvíš se:

🔌 Tipy na užitečné pluginy a nástroje.
🆕 Novinky z WordPress světa.
💡 Praktické návody a rady.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram