# Optimalizace animovaných obrázků pro web

- Odkaz: https://tomas-shejbal.cz/wordpressito/optimalizace-animovanych-obrazku-pro-web/
- Zveřejněno: 2026-02-25T10:09:31+01:00
- Autor: tom

# 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ů](
https://tomas-shejbal.cz/wp-content/uploads/2026/02/wordpressito_gif_avif.webp)

_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/remove-background)[https://ezgif.com/](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._