A képek szinte mindig a weboldal legnehezebb elemei, és az, ahogyan tárolod őket, eldönti, hogy az oldalad villámgyorsnak vagy lomhának tűnik. 2026-ban a kérdés már nem az, hogy „optimalizáljam-e a képeimet", hanem az, hogy „hol legyenek, hogy az optimalizálás automatikusan megtörténjen". Évek után, amelyek során forgalmas WordPress- és PrestaShop-oldalakhoz méreteztem át képeket a peremhálózaton, a válaszom a Cloudflare Images. Tárolja az eredetiket, a Cloudflare globális hálózatáról szolgálja ki őket, és menet közben új generációs formátumokká alakítja át, mindezt egyetlen URL mögött.

Ez az útmutató elmagyarázza, mi is valójában a Cloudflare Images, miben különbözik egy egyszerű CDN-től, mennyibe kerül valós számokban, hogyan működik globális képkézbesítő hálózatként, és hogyan viszonyul az olyan alternatívákhoz, mint a Cloudinary és a saját tárhely. A végére tudni fogod, hogy ez-e a megfelelő hely a képeidnek, és hogyan kezdj hozzá még ma.

Röviden

  • A Cloudflare Images egyszer tárolja az eredetiket, és optimalizált WebP/AVIF-verziókat szolgál ki a Cloudflare globális peremhálózatáról, egress-díjak nélkül
  • Az árazás egyszerű és kiszámítható: 5 $ havonta 100 000 tárolt képenként és 1 $ havonta 100 000 kiszolgált képenként
  • Olyan képeket is átalakíthatsz, amelyeket már máshol tárolsz (beleértve a Cloudflare R2 -t is) anélkül, hogy egyáltalán tárolnád őket az Imagesben
  • Egyetlen termékre és egyetlen kézbesítési URL-re cseréli a bővítmények, átméretező szkriptek és egy különálló CDN kuszaságát
  • WordPresshez és PrestaShophoz párosíthatod az ingyenes bővítményemmel és Workeremmel, hogy minden képhivatkozást automatikusan átírjon

Mi is valójában a Cloudflare Images

A Cloudflare Images egy teljes képfeldolgozó folyamat: tárolás, optimalizálás és kézbesítés egyetlen termékben. Egyszer feltöltesz egy eredeti képet, és a Cloudflare ad egy kézbesítési URL-t. Amikor egy látogató lekéri ezt az URL-t, a Cloudflare a kért méretekre átméretezi a képet, a böngésző által támogatott leghatékonyabb formátumra (általában WebP vagy AVIF) konvertálja, tömöríti, és az eredményt a látogatóhoz legközelebbi peremponton gyorsítótárazza.

A kézbesítési URL így néz ki:

1https://imagedelivery.net/<account-hash>/<image-id>/<variant>

A végén lévő <variant> egy elnevezett átalakításkészlet, amelyet egyszer határozol meg (például thumbnail, hero vagy 1200x675). Rugalmas variánsokat is engedélyezhetsz, hogy a szélességet, magasságot, minőséget és formátumot közvetlenül az URL-ben add meg. Egyetlen eredeti így minden méretet és formátumot előállít, amelyre valaha szükséged lesz, anélkül, hogy egyetlen származtatott fájlt is létrehoznál vagy tárolnál.

Pontosan így szolgáljuk ki a képeket ebben a cikkben is. Minden látott kép egy Cloudflare Images kézbesítési URL-t használ reszponzív <picture> forráskészlettel, ezért töltődnek be gyorsan mobilon és asztali gépen egyaránt.

Miért ne csak egy CDN-t használj

Gyakori ellenvetés: „már van egy CDN az oldalam előtt, az nem elég?" Nem ugyanaz, és a különbség számít.

Egy egyszerű CDN gyorsítótárazza és kiszolgálja azokat a bájtokat, amelyeket a forrásod előállít. Ha a forrásod egy 2 MB-os JPEG-et tárol, a CDN örömmel szolgálja ki ugyanazt a 2 MB-os JPEG-et gyorsabban. Nem teszi kisebbé a képet, nem konvertálja AVIF-fé, és nem hozza létre azokat a kisebb méreteket, amelyekre egy telefonnak valójában szüksége van.

A Cloudflare Images aktív réteg, nem passzív gyorsítótár. Magát a képet módosítja:

  • Átméretezi a pontosan akkora méretekre, amelyekre az egyes eszközöknek szükségük van
  • Konvertálja WebP-vé vagy AVIF-fé attól függően, hogy mit fogad el a kérő böngésző
  • Tömöríti intelligensen, így egy 1 MB-os fotóból nagyjából 100-200 KB lesz
  • Gyorsítótárazza minden származtatott verziót a peremen, így a munka csak egyszer történik meg

Röviden: javítja a képeidet, gyorsítja az oldaladat, javítja a Core Web Vitals értékeidet és sávszélességet takarít meg. Egy CDN önmagában csak az utolsót teszi meg, és azt is csak részben.

A Cloudflare Images használatának két módja

Van egy fontos megkülönböztetés, amelybe sokan belebotlanak, ezért tisztázom.

1. Tárolás és kiszolgálás a Cloudflare Imagesszel. Az eredetiket a Cloudflare Imagesbe töltöd fel. A Cloudflare lesz a képeid otthona és kézbesítő hálózata. Ez a legtisztább lehetőség új projektekhez és képgazdag oldalakhoz.

2. Máshol tárolt képek átalakítása. Ha az eredetijeid már máshol vannak, például a Cloudflare R2 objektumtárolóban vagy a saját szervereden, használhatod a Cloudflare képátalakításait, hogy menet közben optimalizáld őket anélkül, hogy második másolatot tárolnál az Imagesben. Ez a „távoli forrásból átalakítás" modell, amelyet részletesen tárgyalok a Cloudflare Image Transformations című külön útmutatómban.

A legtöbb oldal az egyszerűség kedvéért az első lehetőséget választja. Azok a csapatok, amelyek már nagy médiatárat tartanak R2-ben, gyakran a második lehetőséget választják, hogy ne fizessenek kétszer a tárolásért. Az R2 itt különösen vonzó, mert nincsenek egress-díjai, amit a képek Cloudflare R2-n való tárolásáról szóló útmutatómban részletezek.

A Cloudflare Images árazása érthető számokban

A Cloudflare Images egyik legjobb tulajdonsága, hogy az árazás valóban egyszerű, meglepő egress-díjak nélkül. 2026-ban a hivatalos árak a következők:

Amiért fizetszKöltség
Tárolt képek5 $ / 100 000 kép / hó
Kiszolgált képek1 $ / 100 000 kép / hó
Átalakítások (külső képek)az első 5 000 egyedi ingyenes, majd 0,50 $ / 1 000 / hó
Egress-sávszélesség0 $ (ingyenes)

Egy konkrét példa szemléletessé teszi. Tegyük fel, hogy egy boltot üzemeltetsz 10 000 termékképpel, és egy hónapban 500 000 képmegtekintést szolgálsz ki. A tárolás 0,50 $ (10 000 tárolt), a kiszolgálás pedig 5 $ (500 000 kiszolgált), összesen tehát nagyjából 5,50 $ abban a hónapban. Nincs külön sávszélesség-számla, nincs átméretezésenkénti díj és nincs formátumonkénti felár.

Hasonlítsd ezt össze egy tipikus üzemeltetett képszolgáltatással, ahol a sávszélesség és az átalakítások száma uralhatja a számlát, és a vonzerő nyilvánvalóvá válik: kiszámíthatod a költséget, mielőtt elköteleződnél.

Cloudflare Images vs Cloudinary vs saját tárhely

SzempontCloudflare ImagesCloudinarySaját tárhely + CDN
Automatikus WebP/AVIFIgenIgenCsak ha magad építed meg
Egress-díjakNincsenekSávszélesség alapú szintekA tárhelynek/CDN-nek fizetsz
Árazási modellTárolt + kiszolgáltKreditek (átalakítás, tárolás, sávszélesség)Szerver + CDN + a te időd
Globális peremkézbesítésBeépítettBeépítettA CDN-től függ
Beállítás bonyolultságaAlacsonyAlacsonytól közepesigMagas
Kiszámítható költségNagyonNehezebb előre jelezniVáltozó

A Cloudinary képes termék gazdag funkciókészlettel, de a kredit alapú modellje összevonja az átalakításokat, a tárolást és a sávszélességet, ami megnehezíti az előrejelzést a növekedéssel. A saját tárhely teljes irányítást ad, de te leszel felelős az átméretező folyamatokért, a formátumegyeztetésért, a gyorsítótár-fejlécekért és a CDN-konfigurációért, ami sok karbantartandó mozgó alkatrész. A Cloudflare Images az ideális helyen áll: szinte minden előny, nagyon kevés üzemeltetési teher, és olyan számla, amelyet előre tudsz jelezni.

WordPress és PrestaShop: minden kép automatizálása

Ha WordPresst vagy PrestaShopot üzemeltetsz, a gyakorlati kihívás az, hogy az oldal minden képe az optimalizált kézbesítési URL-t használja, beleértve a sablonok, bővítmények és beágyazott CSS által beszúrt képeket is. Pontosan ehhez építettem ingyenes eszközöket.

  • WordPress-bővítmény. A Cloudflare Image Resizing bővítményem (forráskód a GitHubon ) átírja a képhivatkozásokat, hogy a Cloudflare optimalizálásán keresztül menjenek.
  • Cloudflare Worker. A teljes lefedettségért a Cloudflare Image Resizing Workerem az oldalad és a látogatóid között helyezkedik el, és átírja a végső HTML-t, beleértve a CSS-ben lévő képeket is, amelyeket egy bővítmény önmagában nem érhet el.

Mindkét platformhoz írtam teljes, lépésről lépésre szóló útmutatókat: Cloudflare Image Resizing WordPresshez és Cloudflare Image Resizing PrestaShophoz . Ha valamelyik platformot használod, kezdd ott, miután elolvastad ezt az áttekintést.

Egy fontos frissítést érdemes kiemelni: a képek átalakításához korábban fizetős Pro-csomag kellett. Ez már nem így van. A képátalakítások mostantól az ingyenes csomagban is elérhetők, havonta legfeljebb 5 000 egyedi átalakításig, ami jelentősen csökkenti a belépési küszöböt a kis oldalak számára.

Képek kezelése az irányítópult nélkül

A képek webes irányítópulton keresztüli feltöltése és rendszerezése néhány fájlnál rendben van, de nagyobb léptékben fárasztóvá válik. Ha az eredetiket Cloudflare R2-ben tartod (gyakori minta médiatáraknál), építettem egy ingyenes asztali alkalmazást, amely fájdalommentessé teszi ezt: az Easy Cloudflare R2 lehetővé teszi a bucketek böngészését, a fogd és vidd feltöltést, az objektum-metaadatok szerkesztését, és mindezt egyetlen letisztult felületről kezelheted Windowson, macOS-en és Linuxon. Ha közvetlenül a Cloudflare Images termékkel szeretnél dolgozni, az Easy Cloudflare Images ugyanezt nyújtja a képtárad feltöltéséhez és optimalizálásához.

Hogyan kezdj hozzá még ma

  1. Jelentkezz be a Cloudflare irányítópultjába, és engedélyezd az Images-t az oldalsávon.
  2. Tölts fel egy tesztképet, vagy irányíts egy átalakítást egy meglévő kép URL-jére.
  3. Hozz létre egy-két variánst azokhoz a méretekhez, amelyeket az oldalad a leggyakrabban használ (például egy hero és egy bélyegkép).
  4. Cserélj le egy képet az oldaladon az új kézbesítési URL-re, és futtass egy előtte/utána tesztet a PageSpeed Insightson .
  5. Ha WordPresst vagy PrestaShopot használsz, telepítsd a bővítményt vagy telepítsd a Workert a többi automatizálásához.

Általában azonnal látni fogod, hogy az adott kép mérete 70-90 százalékkal csökken, ezzel együtt a Core Web Vitals értékeid is javulnak.

Legfontosabb tudnivalók

  • A Cloudflare Images egyetlen termékben egyesíti a tárolást, az optimalizálást és a globális kézbesítést, egress-díjak nélkül
  • Az árazás egyszerű és kiszámítható: 5 $ / 100 000 tárolt és 1 $ / 100 000 kiszolgált havonta
  • Egy egyszerű CDN csak gyorsítótárazza a bájtjaidat; a Cloudflare Images aktívan átméretezi, konvertálja és tömöríti őket
  • Tárolhatod az eredetiket az Imagesben, vagy átalakíthatsz R2-n vagy a szervereden már tárolt képeket
  • Az átalakítások mostantól az ingyenes csomagban is elérhetők (havonta legfeljebb 5 000 egyedi), nem csak a Próban
  • A WordPress- és PrestaShop-felhasználók minden képet automatizálhatnak az ingyenes bővítményemmel és Workeremmel

Gyakran ismételt kérdések

Ingyenes a Cloudflare Images? A képátalakítások az ingyenes csomagban havonta legfeljebb 5 000 egyedi átalakításig elérhetők. A képek tárolása és kiszolgálása a Cloudflare Images terméken keresztül fizetős, 5 $ / 100 000 tárolt kép és 1 $ / 100 000 kiszolgált kép havonta, egress-díjak nélkül.

A Cloudflare Images automatikusan WebP-vé és AVIF-fé konvertál? Igen. Amikor egy böngésző képet kér, a Cloudflare észleli a támogatott formátumokat, és a leghatékonyabbat szolgálja ki, jellemzően AVIF-et vagy WebP-t, régebbi böngészőknél visszatérve az eredeti formátumra. Nem kell magadnak előállítanod ezeket a verziókat.

Használhatom a Cloudflare Images-t R2-ben tárolt képekkel? Igen. Az eredetiket Cloudflare R2-ben tarthatod, és a Cloudflare képátalakításaival optimalizálhatod őket kézbesítéskor anélkül, hogy második másolatot tárolnál az Imagesben. Az R2-nek nincsenek egress-díjai, ami költséghatékony forrássá teszi egy nagy médiatár számára.

Szükségem van még Pro-csomagra a képátméretezéshez? Nem. Ez megváltozott: a képátalakítások mostantól az ingyenes csomagban is elérhetők havonta legfeljebb 5 000 egyedi átalakításig. A nagyobb mennyiségeket és a platformon belüli tárolást a fizetős csomagban számlázzák.

Hogyan viszonyul a Cloudflare Images a Cloudinaryhoz? Mindkettő automatikus formátumkonverziót és globális kézbesítést kínál. A fő különbség az árazási modell. A Cloudflare Images egyszerű, tárolás plusz kézbesítés díjat számít fel egress nélkül, míg a Cloudinary összevont kredit alapú modellt használ, amelyet nehezebb előre jelezni a forgalom növekedésével.

Működni fog WordPresszel és PrestaShoppal? Igen. Használd az ingyenes WordPress-bővítményemet a gyors beállításhoz, vagy telepítsd a Cloudflare Workeremet a teljes lefedettségért, amely a CSS-ben lévő képeket is átírja. Mindkét platformhoz írtam teljes, lépésről lépésre szóló útmutatókat.