Automata kép átméretezési lehetőségek

A képeket azért kell átméretezni, mert ha feleslegesen nagy méretű képet építünk be az oldalba, az megnöveli a látogató adatforgalmát és az oldal megjelenítési idejét is, ez pedig SEO hibákhoz, és pozíció vesztéshez fog vezetni.

Az átméretezett képekre ugyanazon az oldalon belül, de lista oldalakon szükségünk lehet.

Például ha egy cikkhez tartozik egy hero image, akkor az oldalon belül ez a kép desktop felbontáson lehet, hogy az eredeti méretében jelenik meg, de mobilon biztos, hogy egy sokkal kisebb verzióban. Amennyiben ezt a cikket egy lista oldalon linkeljük úgy, hogy a linkben megjelenik a hero image is, ott szinte biztos, hogy még desktop felbontáson sem az eredeti méretben szeretnénk megjeleníteni a képet, csak egy kisebb előnézetet.

A ConyCMS ezeket a méret mutációkat automatikusan le tudja gyártani, ha megfelelően fel van paraméterezve.

A képátméretezés korlátai:

• kizárólag a Content Images és a Design Files mappában található képeket tudja átméretezni, más mappában, vagy külső domain-ről behívott képeket nem
• teljesen automatán kizárólag a Template Content mezején belül található képeket tudja átméretezni, minden mást a sitebuilder-nek kell manuálisan vezérelve beépítenie a template egyéb részeibe
• a teljesen automata képátméretezés egy template-nél egyetlen beállítást használ, így az adott oldalon belül az összes automatán átméretezett kép egységes méretű lesz
  • ezt manuálisan vezérelt átméretezéssel ki lehet védeni, ha nagyon szükséges
• A ConyCMS a képeket az eredeti méretarány megtartásával méretezi át, nem tud a képekből levágni részeket

Automata kép átméretezés beállítása

Lásd: Breakpoint Specific Options

Az automata kép átméretezéshez meg kell adnunk, hogy melyik törésponton, milyen méretű képeket szeretnénk megadni.

Minden törésponthoz meg kell adni a beállítást akkor is, ha két törésponton ugyanazt a méretű képet kell megjeleníteni.

A szélesség és magasság mezőket nem érdemes egyszerre megadni, mert ebben az esetben ha az eredeti képnek nem ugyanaz a képaránya, mint amit az új szélesség/magasság ad, akkor torzulni fog az átméretezett kép.

Általában a képek szélességét érdemes megadni, a magasságot pedig a default 0 értéken hagyni, így akármilyen lapos, vagy magas képet lehet használni anélkül, hogy azt külön kezelni kellene. a template-ben.

A tartalomban található kép automata átméretezésének letiltása

Amennyiben egy képet, amit a tartalomba építünk, nem szeretnénk, hogy a rendszer automatikusan átméretezzen, egyszerűen egy <picture> tag-be kell rakni.

<picture>
    <img src="/kep.jpg">
</picture>

Ezek tipikusan olyan képek, amiknél vagy minden felbontásaon az eredeti fájlt szeretnénk megjeleníteni, vagy egy konkrét képnél el szeretnénk térni az template-ben beállított méretektől.

Kép manuális átméretezése

Ezek azok a képek, amik

• a tartalmon kívül vannak, de szeretnénk több méretet kezelni
  • például design elemek, amiket nem akarunk több példányban feltölteni
• a tartalomba épített, de nem a template beállításai szerint megjelenítendő kép
• hero image
• lista oldal kiemelt cikke
• ...

A manuális kép átméretezést az IMAGE függvénnyel tehetjük meg.

Ha a kép nem a tartalom részben jelenik meg, és minden felbontáson ugyanazt a méretet jelenítjük meg, egyből az <img> tag-et rakhatjuk a kódba:

<img src="{IMAGE $image="/images/kep.jpg" $width=500 $format=png}">

Fontos, hogy ez kizárólag akkor működik, ha

• a portál beállításaiban az elsődleges kép formátum nem WEBP
• vagy megadunk egy nem WEBP formátumot

Amennyiben a átméretezett képet a tartalomba rakjuk, vagy több felbontáshoz több méretet is csinálunk, vagy WEBP formátumú képet is szeretnénk használni, mindenképpen egy <picture> tag-en belül kell raknunk. Az első esetben azért, hogy a rendszer ne generálja még egyszer újra a template beállításai alapján, a második és harmadik esetben pedig azért, hogy a böngésző el tudja dönteni, hogy pontosan melyik méretet és melyik formátumot kell megjeleníteni.

Amennyiben nincs WEBP formátum használva:

<picture>
    <!-- 800px és az alatti méreteken megjelenítendő kép -->
    <source srcset="{IMAGE $image="/images/kep.jpg" $width=500}" media="(max-width: 800px)">
    <!-- fentebb meg nem határozott méreteken, azaz 801px és a feletti méreten megjelenítendő kép -->
    <source srcset="{IMAGE $image="/images/kep.jpg" $width=800}">
    <!-- a default kép, amennyiben a böngésző nem támogatja az srcset módszert -->
    <img src="{IMAGE $image="/images/kep.jpg" $width=800}">
</picture>

Amennyiben WEBP formátumot is szeretnénk használni:

<picture>
    <!-- 800px és az alatti méreteken megjelenítendő kép, ha a böngésző meg tudja jeleníteni a WEBP  formátumot -->
    <source srcset="{IMAGE $image="/images/kep.jpg" $width=500 $format=webp}" media="(max-width: 800px)">
    <!-- 800px és az alatti méreteken megjelenítendő kép, ha a böngésző nem tudja megjeleníteni a WEBP  formátumot -->
    <source srcset="{IMAGE $image="/images/kep.jpg" $width=500 $format=png}" media="(max-width: 800px)">
    <!-- fentebb meg nem határozott méreteken, azaz 801px és a feletti méreten megjelenítendő kép, ha a böngésző meg tudja jeleníteni a WEBP  formátumot -->
    <source srcset="{IMAGE $image="/images/kep.jpg" $width=800 $format=webp}">
    <!-- fentebb meg nem határozott méreteken, azaz 801px és a feletti méreten megjelenítendő kép, ha a böngésző nem tudja megjeleníteni a WEBP  formátumot -->
    <source srcset="{IMAGE $image="/images/kep.jpg" $width=800 $format=png}">
    <!-- a default kép, amennyiben a böngésző nem támogatja az srcset módszert -->
    <img src="{IMAGE $image="/images/kep.jpg" $width=800}">
</picture>

Ennél a módszernél az elemek sorrendje kritikus, mivel a böngésző sorban megy végig az elemeken, és az első olyan képet fogja megjeleníteni, ami a képernyő méretének, és kép formátumnak megfelel.

Amennyiben mobil first elvek szerint kezeljük a töréspontokat, előbb a kis képeket kell megadni, amiknél emiatt max-width szabályokat kell megadni. Ha egy adott méreten belül több formátumot is használunk, akkor a speciális formátumok (ebben az esetben WEBP) elsőbbséget élveznek a másodlagos formátumokkal szemben (jpg, png), hogy azok a böngészők, amik meg tudják jeleníteni a speciális formátumot, azt válasszák.

Az elemek végére érdemes berakni egy <img> tag-et, amiben a legnagyobb méretű kép mutációt jelenítjük meg a másodlagos kép formátumban, ezzel támogatni tudjuk azokat a korábbi böngészőket is, amik sem a speciális kép formátumot, sem az srcset-es módszertant nem támogatják.