SÚGÓ › Felhő tárhely

Képek optimalizálása az Image CDN-nel

A PromNET Image CDN automatikusan átméretezi és modern formátumra (WebP/AVIF) konvertálja a Cloud-projektedben elhelyezett képeket — gyorsabb oldal, kisebb adatforgalom.

A modern weboldal felénél a letöltött méretet a képek teszik ki. Egyetlen 3 MB-os hero-kép tönkre tudja tenni a Lighthouse-pontszámodat, és különösen mobilon dühítő. A PromNET Image CDN-jével egyszer feltöltöd az eredeti képet, és a háttérben automatikusan generálódik a megfelelő méret + formátum minden látogatónak.

Mire jó?

• Gyorsabb oldal-betöltés — kisebb fájlméret = hamarabb látható kép
• Kisebb adatforgalom — a látogatóid mobilnete is hálás lesz
• Automatikus WebP/AVIF konverzió — modern böngészőknek modern formátum, régieknek JPEG/PNG fallback. Neked nem kell semmit csinálnod.
• Retina-támogatás — srcset-tel 1x és 2x változat egy hívással
• CDN cache — a generált változatot a Cloudflare edge-cache-eli, második kérésre 0 ms

Hogyan működik?

A háttérben a Cloudflare Image Resizing funkcióját használjuk. A trükk egyszerű: bármely képed elé beszúrhatsz egy speciális /cdn-cgi/image/<paraméterek>/ szegmenst az URL-be, és a CF a kérés pillanatában átalakítja:

https://csaba-blog.promnet.hu/hero.jpg
  →
https://csaba-blog.promnet.hu/cdn-cgi/image/width=800,format=auto/hero.jpg

Az URL-szegmensben paraméterezed:

Astro-projektben használat

A PromNET SDK-ban van egy image-cdn helper, ami felépíti neked a helyes URL-eket — nem kell kézzel írogatni:

import { imageUrl, imageSrcset } from '@/lib/image-cdn';

Egy egyszerű hero-kép:

---
import { imageUrl } from '@/lib/image-cdn';
const src = '/hero.jpg';
---
<img
  src={imageUrl(src, { width: 1200, format: 'auto' })}
  alt="Borítókép"
  width="1200"
  height="630"
  loading="eager"
/>

Ez kiad egy ilyen HTML-t:

<img src="/cdn-cgi/image/format=auto,width=1200,quality=85/hero.jpg" ... />

Retina-támogatás srcset-tel

Ha a látogató 2x-es kijelzőt használ (iPhone, Mac, sok modern Android), akkor a srcset automatikusan a duplázott felbontású változatot kéri:

---
import { imageUrl, imageSrcset } from '@/lib/image-cdn';
const src = '/blog/borito.jpg';
---
<img
  src={imageUrl(src, { width: 800, format: 'auto' })}
  srcset={imageSrcset(src, { width: 800, format: 'auto' })}
  alt="Bejegyzés borítója"
  width="800"
  height="450"
  loading="lazy"
/>

Eredmény: a böngésző a saját DPR-je alapján választ az 1x és 2x változat közül — kis kijelzőn nem pazarolsz adatforgalmat, retinán viszont éles a kép.

Védett forrás-validáció

Ha user-input-ból jön a kép-URL (pl. user-content), ne add tovább naivan a CDN-nek — különben nyitott proxy lennél tetszőleges forrásokra. A isAllowedImageSource ezt szűri:

import { imageUrl, isAllowedImageSource } from '@/lib/image-cdn';

const src = userInput; // pl. egy beágyazott kép URL-je
if (!isAllowedImageSource(src)) {
  throw new Error('Csak promnet.hu-ról szolgálunk fel képet.');
}
const final = imageUrl(src, { width: 800 });

A default szabály: csak promnet.hu és *.promnet.hu aldomain mehet. Ha custom domaint kötöttél (Cloud → Domain), add hozzá explicit:

isAllowedImageSource(src, ['promnet.hu', 'sajatdomainem.hu']);

Korlátok

• Csak saját zónák — promnet.hu és *.promnet.hu aldomainekről. Idegen URL-t (pl. i.imgur.com) nem proxy-zunk a CDN-nel.
• Maximum 12 MB forrás-kép — efölött a CF Image Resizing nem dolgozza fel. Ha nagyobb az eredeti, először kicsinyítsd kézzel.
• Image Resizing zóna-feature — ehhez a zónádon engedélyezve kell lennie a Cloudflare Image Resizing-nek. A *.promnet.hu aldomaineken ez alapból be van kapcsolva. Saját custom domainnél ellenőrizd a CF dashboardon: Speed → Optimization → Image Resizing.
• Animált GIF — átméretezhető, de WebP-re/AVIF-re konvertálás nem garantáltan animált (statikus kockává konvertálhat).
• SVG — nem dolgozza fel, eredeti formában szolgáljuk fel.

Példák

Hero / borítókép

Nagy, fontos, eager-betöltés. 1200px-es alap, retina-srcset:

<img
  src={imageUrl('/hero.jpg', { width: 1200, format: 'auto' })}
  srcset={imageSrcset('/hero.jpg', { width: 1200, format: 'auto' })}
  alt="Hero"
  width="1200" height="630" loading="eager"
/>

Blog-thumbnail

Listanézet, kicsi, lazy-betöltés, cover fit a fix arányhoz:

<img
  src={imageUrl(post.image, {
    width: 320, height: 200, fit: 'cover', format: 'auto',
  })}
  alt={post.title}
  width="320" height="200" loading="lazy"
/>

OG-image (social-share)

A social-platformok 1200×630-at ajánlanak. Ezt build-time-ban a <meta property="og:image">-be írjuk:

---
import { imageUrl } from '@/lib/image-cdn';
const ogImage = imageUrl('/og-default.jpg', {
  width: 1200, height: 630, fit: 'cover', format: 'jpeg',
});
---
<meta property="og:image" content={`https://${Astro.site}${ogImage}`} />

Tipp: OG-képhez format: 'jpeg' jobb, mint auto, mert a Facebook/LinkedIn scraper-ek néha nem tudják értelmezni az AVIF-et.

Felhasználó-avatar (kerek)

<img
  src={imageUrl(user.avatar, { width: 64, height: 64, fit: 'cover' })}
  alt={user.name}
  width="64" height="64"
  style="border-radius: 50%"
/>

Mikor ne használd?

• Ikonok, logók (SVG) — eleve vektorosak, nem méretezzük át
• Already-optimized képek — pl. ha egy build-time astro:assets pipeline már WebP-t generált, ne tedd rá még egy CDN-réteget
• Privát képek auth-mögött — a /cdn-cgi/image/ cache-eli a végeredményt, így ha jogosultság-érzékeny a tartalom, ezt ne használd. Helyette külön szolgáld fel saját Worker-route-ról.

A többi 90%-ra viszont: tedd be, és örülj a Lighthouse-pontszámnak.