Ha a Cloudflare Images az a hely, ahol a képeid laknak, akkor a Cloudflare Image Transformations az a motor, amely gyorssá teszi őket. Átméretezi, tömöríti és modern formátumokká konvertálja a képeidet abban a pillanatban, amikor lekérik őket, kizárólag a már meglévő eredetit használva. Nincs build lépés, nincsenek előre generált bélyegképek, nincsenek külön másolatok, amelyek elzsúfolnák a tárhelyedet. A kívánt méretet és formátumot az URL-ben kéred, és a Cloudflare a peremen előállítja, majd gyorsítótárazza.
Ez az útmutató a képek Cloudflare-en való tárolásáról szóló áttekintésem gyakorlati párja. Elmagyarázza a transzformációk futtatásának két módját, a fontos paramétereket, hogy mennyibe kerül 2026-ban, és hogyan automatizálható az egész WordPressen és PrestaShopon.
Röviden
- A transzformációk egyetlen eredetiből, igény szerint méretezik át, tömörítik és konvertálják a képeket WebP/AVIF formátumra
- Két módszer: egy egyszerű URL-formátum (
/cdn-cgi/image/...) és egy Cloudflare Worker a teljes irányításért - A
format=autoautomatikusan AVIF-et vagy WebP-t szolgál ki attól függően, mit támogat a böngésző - Az árazás nagyvonalú: az első 5 000 egyedi transzformáció havonta ingyenes, majd 0,50 $ / 1 000
- A transzformációk már nem igényelnek Pro-csomagot, ami érdemi változás a korábbi évekhez képest
- A képeket az origódból vagy a Cloudflare R2 -ből alakíthatod át, és mindezt automatizálhatod az ingyenes bővítményemmel és Workeremmel
Hogyan működik a Cloudflare Image Transformations
Hagyományosan a reszponzív képek kiszolgálása azt jelentette, hogy minden méretet előre legenerálsz. Feltöltesz egy fotót, és a CMS-ed létrehoz egy bélyegképet, egy közepes verziót, egy nagy verziót és így tovább, mindegyiket külön fájlként tárolva. Ez tárhelyet pazarol, lassítja a feltöltéseket, és még így sem felel meg pontosan annak a méretnek, amelyre egy adott eszköznek szüksége van.
A képtranszformációk ezt megfordítják. Egyetlen eredetit tárolsz. Amikor egy látogató böngészője egy adott méretet kér, a Cloudflare menet közben előállítja azt a méretet, optimalizálja, és gyorsítótárazza az eredményt a peremen. A következő látogató, akinek ugyanarra a verzióra van szüksége, azonnal megkapja a gyorsítótárazott másolatot. Soha nem generálsz vagy tárolsz magad származtatott fájlt, mégis minden eszköz a képernyőjéhez és formátumtámogatásához igazított képet kap.
Az eredmény a látogatóid számára: egy 1 MB-os fotó 100-200 KB-os AVIF-ként érkezik, pontosan a nézetablakukra méretezve, egy közeli peremhelyről kézbesítve.
1. módszer: képtranszformációk az URL-formátum révén
A legegyszerűbb módja egy kép átalakításának az, ha az URL-jét egy speciális útvonalba csomagolod a saját zónádon:
1https://example.com/cdn-cgi/image/<options>/<source-image-url>
Egy valódi példa, amely 800 px szélesre méretez, a minőséget 75-re állítja, és automatikusan kiválasztja a legjobb formátumot:
1https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/https://example.com/uploads/photo.jpg
Ehhez engedélyezd a Transformations funkciót a zónádhoz a Cloudflare irányítópultján (az Images alatt). Az engedélyezés után a zóna bármely képe egyszerűen az URL megszerkesztésével átalakítható. Ez a leggyorsabb módja az indulásnak, és nem igényel kódot.
A leghasznosabb opciók a következők:
| Opció | Mit csinál |
|---|---|
width, height | Célméretek pixelben |
fit | Hogyan illeszkedjen a dobozhoz: scale-down, contain, cover, crop, pad |
quality | Tömörítési szint, 1-től 100-ig (a 75 ésszerű alapérték) |
format=auto | AVIF/WebP-t szolgál ki, ha támogatott, különben az eredeti formátumot |
gravity | Fókuszpont vágáskor (pl. auto, face vagy koordináták) |
dpr | Eszközpixel-arány retina kijelzőkhöz |
sharpen, blur | Opcionális utófeldolgozási effektek |
2. módszer: képtranszformációk Cloudflare Workeren keresztül
A valódi irányításhoz egy Cloudflare Workeren
belül alakítasz át, a cf.image tulajdonsággal egy fetch kérésen. Ez lehetővé teszi a logika alkalmazását: méretek kiválasztása az eszköz alapján, annak korlátozása, mely képek alakíthatók át, vagy egy egész oldal képhivatkozásainak átírása.
1export default {
2 async fetch(request) {
3 const options = {
4 cf: {
5 image: {
6 width: 800,
7 quality: 75,
8 format: "auto",
9 fit: "scale-down",
10 },
11 },
12 };
13
14 // The image you want to transform
15 const imageURL = "https://example.com/uploads/photo.jpg";
16 return fetch(imageURL, options);
17 },
18};
A Worker megközelítés az, ami a saját eszközeimet hajtja, mert át tudja írni egy oldal végső HTML-kimenetét, beleértve a sablonok, bővítmények és akár az inline CSS által beszúrt képeket is, amelyeket egy csak URL-es megközelítés önmagában nem ér el. Ha szélesebb körben szeretnél megismerkedni a Workerekkel, a hivatalos Workers dokumentáció kiváló kiindulópont.
Képek átalakítása R2-ből vagy távoli forrásból
Nem korlátozódsz az ugyanazon a zónán lévő képekre. A transzformációk távoli origóból is le tudnak húzni, ami tökéletes partnerré teszi őket a Cloudflare R2 objektumtárolóhoz. Tartsd az eredetiket egy R2 bucketben, alakítsd át őket kézbesítéskor, és ne fizess semmit az egressért, mert az R2 nem számít fel egress-díjat. Ezt a konkrét mintát részletesen tárgyalom a képek Cloudflare R2-n való tárolásáról szóló útmutatómban.
Amikor olyan képeket alakítasz át, amelyek nem a saját zónádon vannak, ne feledd engedélyezni a forrástartományt a transzformációs beállításaidban, különben a Cloudflare megtagadja a lehívásukat.
A Cloudflare Image Transformations árazása
Az itteni gazdaságosság barátságos, különösen a kis és közepes méretű oldalak számára. A 2026-os hivatalos Images-árak alapján:
| Szint | Költség |
|---|---|
| Az első 5 000 egyedi transzformáció / hó | Ingyenes |
| 5 000 felett | 0,50 $ / 1 000 egyedi transzformáció |
| Egress-sávszélesség | 0 $ (ingyenes) |
Az „egyedi transzformáció" egy opciókombináció, amelyet egy hónapban egy eredeti képre alkalmaznak. Ha egy fotó ugyanazon width=800,format=auto verzióját ezerszer kéred le, az még mindig egyetlen egyedi transzformációnak számít, mert a többi 999-et a gyorsítótár szolgálja ki. Ezért maradnak alacsonyak a valós transzformációszámok még forgalmas oldalakon is: sokkal kevesebb különálló kép-méret kombinációd van, mint ahány oldalmegtekintésed.
A megismétlésre érdemes nagy változás: a transzformációk korábban egy fizetős Pro-csomag mögött voltak. Most már elérhetők az ingyenes csomagban is, az 5 000-es havi keretig. Egy kis blog vagy portfólió esetén a menet közbeni képoptimalizálás mostantól gyakorlatilag ingyenes.
Automatizálás WordPressen és PrestaShopon
A transzformációs URL-ek kézi megszerkesztése néhány képhez rendben van, de egy valódi oldalon több száz van belőlük, és ezek dinamikusan jönnek létre. Ez a nehéz rész, és pontosan ez az, amit az ingyenes eszközeim megoldanak.
- WordPress-bővítmény. A Cloudflare Image Resizing bővítményem (GitHub ) átírja a képhivatkozásaidat, hogy automatikusan áthaladjanak a transzformációkon.
- Cloudflare Worker. A Cloudflare Image Resizing Workerem átírja a végső HTML-t a teljes lefedettségért, beleértve a bővítmények és sablonok által beszúrt képeket, valamint a CSS-ben hivatkozott képeket.
A teljes, másold-és-illeszd útmutatókért olvasd el a Cloudflare Image Resizing WordPresshez és a Cloudflare Image Resizing PrestaShophoz cikkeket. A bővítmény és a Worker között az oldalad minden képe optimalizálttá válik anélkül, hogy egyetlen sablont is megérintenél.
Ha inkább közvetlenül a Cloudflare Images terméken keresztül szeretnéd tárolni és kezelni a képtáradat, az Easy Cloudflare Images az ingyenes asztali alkalmazásom képek feltöltéséhez és optimalizálásához Windowson, macOS-en és Linuxon.
Gyors előtte-utána teszt
Bármely optimalizálás megítélésének őszinte módja, hogy megméred.
- Válassz egy képgazdag oldalt, és futtasd át a PageSpeed Insightson . Jegyezd fel a Largest Contentful Paint értékét és a teljes képsúlyt.
- Engedélyezd a transzformációkat, és alkalmazd a
widthésformat=autoopciókat az adott oldal képeire (az URL-módszerrel, a Workerrel vagy a bővítményemmel). - Futtasd újra a tesztet. Azt kell látnod, hogy a kép-payload meredeken esik, és az LCP javul, gyakran egy bukott pontszámot átvíve a zöldbe.
Ez a mérhető javulás az, ami a felhasználói élményt és a keresési rangsorolást egyaránt mozdítani szokta.
Legfontosabb tudnivalók
- A Cloudflare Image Transformations optimalizált, helyes méretű képeket generál igény szerint egyetlen eredetiből
- Az URL-módszer (
/cdn-cgi/image/...) a leggyorsabb indulás; egy Worker teljes programozott irányítást ad - A
format=autoelintézi helyetted az AVIF/WebP egyeztetést, biztonságos visszaeséssel a régebbi böngészőkhöz - Az első 5 000 egyedi transzformáció havonta ingyenes, majd 0,50 $ / 1 000, egress-díjak nélkül
- A transzformációk most már az ingyenes csomagban is működnek, Pro-előfizetés nélkül
- Párosítsd a transzformációkat R2-vel egy egress nélküli médiatárhoz, és automatizálj mindent a bővítményemmel és Workeremmel
Gyakran ismételt kérdések
Mi a különbség a Cloudflare Images és az Image Transformations között? A Cloudflare Images a tágabb termék, amely tárolja, optimalizálja és kézbesíti a képeket. Az Image Transformations az ezen belüli átméretező-és-optimalizáló képesség. A transzformációkat használhatod a Cloudflare Imagesben, R2-ben vagy a saját origódon tárolt képeken, anélkül, hogy feltétlenül az Images termékben tárolnád őket.
Szükségem van fizetős csomagra a képtranszformációk használatához? Nem, már nem. A transzformációk az ingyenes csomagban havonta legfeljebb 5 000 egyedi transzformációig elérhetők. Ezen felül 0,50 $-t fizetsz 1 000-enként, és nincsenek egress-díjak.
Mit csinál a format=auto? Megmondja a Cloudflare-nek, hogy vizsgálja meg a böngésző Accept fejlécét, és szolgálja ki a leghatékonyabb formátumot, amelyet támogat, általában AVIF-et vagy WebP-t, és essen vissza az eredeti formátumra (például JPEG vagy PNG) azoknál a böngészőknél, amelyek nem támogatják a modern formátumokat.
Átalakíthatok olyan képeket, amelyek nem a Cloudflare-en vannak tárolva? Igen. A transzformációk távoli origóból tudnak lehívni, beleértve egy Cloudflare R2 bucketet vagy egy külső szervert, amennyiben engedélyezed azt a forrást a transzformációs beállításaidban.
Mi számít egyedi transzformációnak a számlázáshoz? Egy opciókombináció, amelyet egy számlázási hónapon belül egy eredeti képre alkalmaznak. Az ugyanazon átalakított verzió ismételt lekéréseit a gyorsítótár szolgálja ki, és csak egyszer számolják, ami alacsonyan tartja a valós költségeket.
Hogyan alkalmazzam ezt egy egész WordPress- vagy PrestaShop-oldalon? Használd az ingyenes WordPress-bővítményemet a gyors, automatizált beállításhoz, vagy telepítsd a Cloudflare Workeremet a teljes lefedettségért, amely minden képhivatkozást átír, beleértve a CSS-ben lévőket is. Mindkettő dokumentálva van a lépésről lépésre szóló platform-útmutatóimban.
Hozzászólások