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í.

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.