Joomla 5.1.0 a Joomla 4.4.4 (17 dub 2024)

Dnes byla uvolněna nová verze Joomla 5.1.0, společně s Joomla 4.4.4. Tato verze přináší spoustu nových funkcí, vylepšení v oblasti bezpečnosti a kódu a díky těmto vylepšením i vyšší rychlost.

Phoca Gallery - AVIF

29. pro 2023 13:33 - 29. pro 2023 13:35 #149013

Phoca Gallery - AVIF od H13

Admin

Ahoj,

Phoca Gallery nyní podporuje formát AVIF

Phoca Gallery Demo - AVIF:
www.phoca.cz/demo/14-avif

Phoca Gallery Demo - WEBP
www.phoca.cz/demo/15-webp

Ke stažení poslední Beta verze:
www.phoca.cz/download/66-phoca-gallery/1...ca-gallery-component

AVIF je moderní formát obrázků. Důležité je si zkontrolovat podporu tohoto formátu na serveru. Já nastavoval pár serverů a není to žádná legrace. Jak GD knihovna tak Imagemagick s AVIFem mohou mít problém. Obě potřebují různé přídavné knihovny. U GD se může stát, že se některé verze a závislosti špatně nastaví a pak funkce pro AVIF nefungují. U Imagemagick je zase zapotřebí nejnovější verze (7) a některé linuxové systémy mají v základu starší verzi (6). Někdy chybějící knihovna způsobí to, že se obrázek sice tváří jako AVIF, ale uvnitř je to např. PNG. Atd. atd.

Tady opět musím pochválit server Hostime.cz, protože tam je vytváření náhledů jak AVIF tak WEBP správně nastaveno a vše funguje tak jak má.

Phoca Cart - www.phoca.cz/phocacart - e-shop, e-commerce
Phoca Gallery - www.phoca.cz/phocagallery - obrázková galerie
Phoca Download - www.phoca.cz/phocadownload - stahování souborů
Phoca Guestbook - www.phoca.cz/phocaguestbook - guestbook

Poděkovali: Leoš

29. pro 2023 15:08 #149014

Odpověď od Rudolf

Joomla Expert

www.vzhurudolu.cz/prirucka/avif

Nevýhody AVIF

Dva hlavní problémy AVIFu jsou nepřítomnost postupného vykreslování a rychlost.

Progressive AVIF neexistuje

Progresivní vykreslování (progressive rendering) je velkou výhodou formátu JPEG. Už v první várce renderingu prohlížeč u tohoto typu JPEGů vykreslí celou plochu obrázku. Jde tedy o jakýsi přirozený placeholder, zástupný symbol, než se obrázek načte celý.

Obrázek: Postupné vykreslení JPEG a potupné vykreslení AVIFu. Zdroj: Jake Archibald.

AVIF bohužel touto funkcí nedisponuje. Máme totiž tu čest s „levobočkem“ video-formátu, takže se nelze divit. O téhle nevýhodě se ale obecně ví a řeší se v rámci dalšího vývoje formátu.

Pro nás webaře to znamená, že v případě nasazení AVIFu na místa, kde by se hodilo postupné vykreslení, musíme vymýšlet alternativy. Například vložení menšího obrázku, BlurHashe a tak dále.

Rychlost kódování

Pokud jste si AVIF zkoušeli generovat například přes Squoosh, znáte i další nevýhodu. Rychlost.

V případě nového formátu z dílny AOMedia bych mluvil spíše o pomalosti. Převod většího obrázku do AVIF trvá jednotky, někdy i desítky vteřin.

Důležitým parametrem tam je „effort“, tedy úsilí, které enkodér vynakládá na poměr kvality a datové velikosti. Pro úroveň 2 trvá kódování AVIF dobrých pár sekund. Effort 3 je výrazně lepší, ale převod může trvat několik minut. Při úrovni 10 může vytvoření jednoho obrázku trvat více než 10 minut.

Daleko lepší výsledky samozřejmě budete mít při spouštění konverze na příkazové řádce.

Tenhle fakt je problematický zejména pro obrázkové CDN, které generují obrázky na vyžádání v reálném čase. Proto například i Cloudinary uvádí, že podpora AVIF je u nich aktuálně v beta-režimu.

Na Bunny.net kromě uvedených nevýhod zmiňují také, že AVIF měl v testech mírnou tendenci vyhlazovat šum, velmi jemné textury nebo přímo odstraňovat jemné detaily v grafice.

Nicméně – pro proces optimalizace jednotlivých kusů obrázků toto problém není. A předpokládám, že se to časem bude zlepšovat, protože na podobné problémy jsme naráželi i při porodních bolestech formátu WebP.

Nasazení na web

Technické možnosti tady jsou. Máme značku <picture>, takže můžeme realizovat nasazení i s fallbackem do WebP či JPEG:

<picture>
   <source srcset="obrazek.avif" type="image/avif">
   <source srcset="obrazek.webp" type="image/webp">
   <img src="obrazek.jpg" alt="…" width="400" height="300">
</picture>
V takovém případě se nám AVIF ke dni psaní článku stáhne v Chromu a Opeře, WebP ve všech prohlížečích kromě starších Safari a Internet Explorerů. No a JPEG právě tam, v jámě lvové.

MiniJoomla! - www.minijoomla.org - eshop s rozšířením Joomla/VM
Email Manager - aplikace na správu šablon emailů pro VirtueMart
Easy Feeder - aplikace na generování XML/CSV feedů a napojení na ERP pro VM
PragueClassicconcert - portál pro prodej vstupenek na systému Joomla

29. pro 2023 15:29 - 29. pro 2023 15:30 #149015

Odpověď od Rudolf

Joomla Expert

Honzo můžeš prosím doplnit do renderování Phoca gallery?

Obrázkové prvky nemají explicitní označení width a height

U obrázkových prvků vždy explicitně určete šířku a výšku, aby se omezilo poskakování při vykreslování a zlepšila se hodnota CLS. Jak nastavit rozměry obrázků

<img class="pg-image c-Image c-Image--shaded" itemprop="thumbnail" src="/demo/images/phocagallery/Avif/thumbs/phoca_thumb_m_001.avif" alt="001">

Díky

29. pro 2023 18:06 - 29. pro 2023 18:32 #149017

Odpověď od H13

Admin

Width and height nejsou explicitně nastaveny kvůli responizivitě, pokud to někdo potřebuje nastavit, pak pomocí template override:

components/com_phocagallery/layouts/box_image.php

Picture tag je zajímavý, ale v podstatě velmi kontroverzní. Chceme ušetřit na velikosti obrázku, ale pro jistotu budeme ještě vytvářet jeho alternativy a ničit jednoduchost kódu. Tedy na jedné straně ubereme, na druhé (HTML kód, místo na disku, atd.) přidáme. To už je pak možná lepší vyhnout se picture tagu úplně a zobrazit normální, všude podporovaný formát.

Pokud jde o nové formáty, osobně jsem spíš fanouškem Webp, protože ten umí velmi dobře nahradit mnou oblíbený formát PNG (dodrží transparentnost a navíc sníží velikost ve srovnatelné kvalitě).

Tedy, pokud jde o nahrazování, Webp používám hlavně u PNG, AVIF bude možná jednou kandidát pro nahrazení spíše JPEG. A opět platí, že porovnání bude velmi těžké, protože AVIF má dva parametry (jak píše Ruda): kvalitu (jako u JPG) a rychlost (čím pomaleji, tím lepší výsledky).

Osobně bych rád porovnal Webp a Avif, ale těžko okem porovnáte, jestli už neni změnšení souboru spíše horší kvalitou, kterou nevidíte.

Pokud si dělám testy a porovnávám kvalitu parametricky,:

Pak mi z toho jasně vyplývá, že nahrazovat (hlavně transparentní) PNG za WEBP dává smysl a že AVIF (s defaultním nastavením rychlosti) je účinnější spíše při vyšší kompresi. Každopádně už nevidím tak velký rozdíl mezi WEBP a AVIF, takže v podstatě s klidem zatím volím WEBP pro všechno.

Aby to nebylo tak jednoduché, samozřejmě se to mění i s počtem barev a různorodosti v obrázku:

Každopádně pro mě osobně je momentálně pořád vítěžem WEBP (z mnoha různých důvodů, nejen kvůli kompresi).

29. pro 2023 19:12 - 29. pro 2023 19:30 #149018

Odpověď od H13

Admin

A ještě malý časový test (vytváření obrázků na serveru pomoci GD, při 100% kvalitě):

This PNG loaded in 0.10 seconds - velikost: PNG: 7.04 MB

This JPG loaded in 0.03 seconds* - velikost: JPG: 2.10 MB

This WEPB loaded in 0.33 seconds - velikost: WEBP: 981.16 KB

This AVIF (DEFAULT) loaded in 1.43 seconds - velikost: AVIF (DEFUALT): 3.72 MB

This AVIF (FAST) loaded in 0.39 seconds- velikost: AVIF (FAST): 3.87 MB

This AVIF (SLOW) loaded in 46.70 seconds- velikost: AVIF (SLOW): 2.83 MB

Tedy, pokud si u AVIF počkáte (ale neuvěřitelně dlouho, např. u velkého obrázku je to v mnoha minutách), můžete kompresi ještě zvýšit.
* JPEG čas může být ovlivněný, protože zdrojový obrázek byl JPG.

BTW: trochu offtopic, ale pokud někdo přemýšlí o dynamickém vytváření náhledů pro uživatele (některá rozšíření takto pracují, tedy náhled není vytvořen např. v administraci, ale až při první návštěvě prvního uživatele ve frontendu), tak na to u AVIF rovnou zapomeňte (ono celkově je to špatný nápad, u AVIF to už ale bude čiré bláznovství).