Image Optimization (Kép SEO)

Image Optimization (Kép SEO) - Teljes Útmutató 2026#

A képek optimalizálása kritikus az SEO, a Core Web Vitals és a felhasználói élmény szempontjából. Egy átlagos weboldal 60-70%-a képekből áll - helytelen optimalizálás lassú oldalbetöltést és alacsonyabb ranking-et eredményez.

Ebben az útmutatóban megtanulod:

• ✅ Alt tag írása SEO-nak és akadálymentesítésnek
• ✅ Képformátumok (JPEG, PNG, WebP, AVIF) közti választás
• ✅ Képtömörítés (minőség vs. fájlméret)
• ✅ Responsive images (srcset, sizes)
• ✅ Lazy loading implementálás
• ✅ Fájlnév és struktúra optimalizálás
• ✅ Core Web Vitals javítás képekkel
• ✅ 30+ eszköz ajánlás

Miért Fontos a Kép Optimalizálás?#

1. 🎯 SEO és Google Images Ranking#

Google Images a második legnagyobb keresőmotor a Google Search után!

Statisztikák:

• Google Images: 1 milliárd keres naponta
• E-commerce oldalak 30-40% forgalma képkeresésből
• Optimalizált képek 20-30%-kal több organikus forgalmat hoznak

Google használja:

• Alt text → Kép témájának megértése
• Fájlnév → Relevancia meghatározása
• Környező szöveg → Kontextus
• Képméret és formátum → UX értékelés

2. ⚡ Core Web Vitals (Page Speed)#

Képek = #1 lassító tényező a weboldalon!

Lighthouse audit:

❌ Optimize images - Potential savings: 1.2 MB
❌ Properly size images - Potential savings: 680 KB
❌ Serve images in next-gen formats - Potential savings: 420 KB

Core Web Vitals metrikák:

• LCP (Largest Contentful Paint): Legnagyobb kép betöltési ideje
• CLS (Cumulative Layout Shift): Kép méret nélkül → elcsúszás
• FID (First Input Delay): Nagy képek blokkolják a JavaScript-et

3. 👥 Felhasználói Élmény#

Lassú oldalak = magas bounce rate

Google kutatás:

• 53% mobilfelhasználó elhagyja az oldalt, ha > 3 másodperc a betöltés
• 1 másodperc lassulás = 7% konverzió csökkenés

Optimalizált képek:

• ✅ Gyorsabb oldalbetöltés
• ✅ Kevesebb mobiladat felhasználás
• ✅ Jobb felhasználói élmény
• ✅ Magasabb konverzió

4. ♿ Akadálymentesítés (Accessibility)#

Alt text kritikus a vak és gyengén látó felhasználóknak.

WCAG 2.1 (Web Content Accessibility Guidelines):

"All non-text content must have a text alternative."

Screen reader kimenet alt nélkül:

"Image, DSC_1234.jpg"  ❌ Értelmetlen

Screen reader kimenet alt-tal:

"Image, Woman using laptop in modern office workspace"  ✅ Értelmes

Alt Attribútum - A Legfontosabb Elem#

Mi az az Alt Text?#

Az alt (alternative text) egy HTML attribútum, amely szöveges leírást ad a képnek.

<img src="laptop.jpg" alt="Modern silver laptop on wooden desk">

Miért Fontos?#

1. SEO: Google használja a kép témájának megértéséhez
2. Accessibility: Screen readerek felolvassák
3. UX: Megjelenik, ha a kép nem töltődik be
4. Context: Segít a környező tartalom relevanciájában

Alt Tag Írásának 10 Szabálya#

1. ✍️ Írd Le, Amit Látsz#

Rossz példák:

<img src="img1.jpg" alt="kép">
<img src="photo.jpg" alt="fotó">
<img src="banner.jpg" alt="">

❌ Nem leíró, értelmetlen.

Jó példák:

<img src="office-workspace.jpg" alt="Modern iroda munkaterület fehér asztallal és MacBook laptoppal">

<img src="team-meeting.jpg" alt="Öt kolléga brainstorming ülés konferenciateremben">

<img src="product-iphone.jpg" alt="iPhone 15 Pro Max titán színben, hátulról fotózva">

✅ Részletes, leíró, értelmes.

2. 🎯 Tartalmazza a Kulcsszót (De Természetesen!)#

Rossz példák (keyword stuffing):

<img src="seo.jpg" alt="SEO, SEO optimalizálás, SEO szolgáltatás, SEO ügynökség, SEO tanácsadás, SEO Budapest">

❌ Spam!

Jó példa:

<img src="seo-strategy.jpg" alt="SEO stratégia tábla írott kulcsszókutatás és link building lépésekkel">

✅ Kulcsszó (“SEO stratégia”) természetesen beépítve.

3. 📏 Ideális Hossz: 10-15 Szó (125 Karakter Max)#

Túl rövid:

<img src="laptop.jpg" alt="Laptop">

❌ Nem elég leíró.

Túl hosszú:

<img src="laptop.jpg" alt="Modern ezüst színű Apple MacBook Pro laptop 16 hüvelykes retina kijelzővel, Touch Bar-ral, fekete billentyűzettel, fehér fa íróasztalon, egy csésze kávéval a bal oldalon, növénnyel a jobb oldalon, természetes napfénnyel az ablakból">

❌ 204 karakter! Screen readerek 125 karakter után levágják.

Optimális:

<img src="laptop.jpg" alt="MacBook Pro 16 inch laptop fa íróasztalon, kávéval és növénnyel">

✅ 68 karakter, tömör, leíró.

4. 🚫 Ne Kezdd “Kép…”, “Fotó…” Szavakkal#

Rossz:

<img src="dog.jpg" alt="Kép egy golden retrieverről parkban">
<img src="cat.jpg" alt="Fotó macskáról ablakpárkányon">

❌ Felesleges, screen reader már mondja: “Image, …”

Jó:

<img src="dog.jpg" alt="Golden retriever labda futás parkban">
<img src="cat.jpg" alt="Macska napfürdőzés ablakpárkányon">

✅ Rögtön a lényeg.

5. 📸 Dekoratív Képek: Üres Alt#

Dekoratív képek (háttér minták, díszítő elemek, spacer-ek):

<img src="decorative-line.svg" alt="">
<img src="background-pattern.png" alt="">

✅ Üres alt (alt="") jelzi a screen readernek: “Skip this image”.

NE hagyd ki az alt attribútumot teljesen:

<img src="decorative.svg">  <!-- ❌ ROSSZ! -->

6. 🔗 Link Képek: Írdd Le a Célt#

Ha a kép link, az alt legyen a link célja.

Rossz:

<a href="/about">
  <img src="team-photo.jpg" alt="Csapatfotó">
</a>

❌ Nem mondja meg, hová vezet a link.

Jó:

<a href="/about">
  <img src="team-photo.jpg" alt="Rólunk oldal - ismerje meg csapatunkat">
</a>

✅ Egyértelmű, hová kattint a felhasználó.

7. 📊 Infografikák és Diagramok#

Komplex képek: adj részletes leírást vagy linket a szöveges verzióra.

Rövid alt:

<img src="seo-statistics-2026.png" 
     alt="SEO statisztikák 2026 infografika - részletek lent">

Részletes leírás az oldal szövegében:

Az infografika szerint:
- 68% növekedés organikus forgalomban
- 45% emelkedés konverzióban
- 3.2 másodperc átlagos LCP

Vagy longdesc attribútum:

<img src="infographic.png" 
     alt="SEO statisztikák 2026" 
     longdesc="/infographic-description.html">

8. 🌐 Többnyelvű Oldalak#

Magyar oldalon magyar alt:

<img src="team.jpg" alt="Csapatunk irodában, brainstorming ülés">

Angol oldalon angol alt:

<img src="team.jpg" alt="Our team in office, brainstorming session">

Ne használj több nyelvet egy alt-ban:

<img src="team.jpg" alt="Team / Csapat / Equipo">  ❌

9. 🛒 E-commerce Termékképek#

Termékképek alt struktúrája:

[Márka] [Termék Név] [Változat] [Szín/Méret]

Példák:

<!-- Fő termékkép -->
<img src="nike-air-max-270.jpg" 
     alt="Nike Air Max 270 férfi sportcipő fekete színben">

<!-- Alternatív nézet -->
<img src="nike-air-max-270-side.jpg" 
     alt="Nike Air Max 270 oldalnézetből, látható a légrugó">

<!-- Szín variáció -->
<img src="nike-air-max-270-red.jpg" 
     alt="Nike Air Max 270 piros színben">

<!-- Termék használatban -->
<img src="nike-air-max-270-running.jpg" 
     alt="Férfi futás Nike Air Max 270 cipőben parkban">

10. 👤 Emberek Képein: Kontextus + Cselekvés#

Rossz:

<img src="person.jpg" alt="Személy">

❌ Túl általános.

Jó:

<img src="ceo-presentation.jpg" 
     alt="Kovács Anna CEO prezentáció tartása konferencián 500 fős közönségnek">

<img src="developer-coding.jpg" 
     alt="Szoftverfejlesztő kódolás MacBook-on, két monitoros setup-pal">

✅ Kontextus, cselekvés, részletek.

Képformátumok - JPEG, PNG, WebP, AVIF#

Formátumok Összehasonlítása#

JPEG - Fotókhoz#

Használd:

• Fotók (termékképek, team fotók, stock képek)
• Komplex színátmenetek
• Sok színárnyalat

Előnyök:

• ✅ Univerzális támogatás
• ✅ Jó tömörítés fotókhoz
• ✅ Állítható minőség (0-100%)

Hátrányok:

• ❌ Nincs transzparencia
• ❌ Lossy (veszteséges) tömörítés
• ❌ Nagyobb fájlméret mint WebP

Példa:

<img src="team-photo.jpg" 
     alt="Csapatfotó irodában"
     width="1200" 
     height="800">

Optimális beállítás:

• Minőség: 60-80%
• Felbontás: Max 2x a megjelenítési méret
• Progresszív JPEG (fokozatos betöltés)

PNG - Átlátszósághoz#

Használd:

• Logók (transzparens háttérrel)
• Ikonok
• Screenshot-ok (éles szöveg)
• Egyszerű grafikák

Előnyök:

• ✅ Lossless (veszteségmentes)
• ✅ Transzparencia (alpha channel)
• ✅ Éles szöveg

Hátrányok:

• ❌ Nagyobb fájlméret (2-5x mint JPEG)
• ❌ Nem jó fotókhoz

Példa:

<img src="logo.png" 
     alt="SEOTudás logo"
     width="200" 
     height="60">

Optimalizálás:

• PNG-8 (256 szín) vs PNG-24 (16M szín)
• Használj pngquant vagy TinyPNG tömörítéshez
• Ha nincs transzparencia → konvertáld JPEG/WebP-re

WebP - A 2026-os Standard#

Google által fejlesztett, 2010 óta. 2026-ban már 97% böngésző támogatás!

Használd:

• Minden képhez (fotók, illusztrációk, transzparens képek)
• Fotók helyett (30% kisebb mint JPEG)
• PNG helyett (50% kisebb PNG-nél transzparenciával)

Előnyök:

• ✅ 25-35% kisebb fájlméret mint JPEG
• ✅ Transzparencia támogatott
• ✅ Animáció (GIF helyett)
• ✅ Lossy ÉS lossless tömörítés
• ✅ 97% böngésző támogatás (2026)

Hátrányok:

• ❌ Régebbi böngészők (IE11, Safari < 14) nem támogatják
• ❌ Kevesebb eszköz támogatja natívan (Photoshop-ban plugin kell)

Példa (fallback-kel):

<picture>
  <source srcset="team-photo.webp" type="image/webp">
  <source srcset="team-photo.jpg" type="image/jpeg">
  <img src="team-photo.jpg" 
       alt="Csapatfotó irodában"
       width="1200" 
       height="800">
</picture>

Konvertálás:

# ImageMagick
convert input.jpg -quality 80 output.webp

# cwebp (Google)
cwebp -q 80 input.jpg -o output.webp

AVIF - A Jövő (2026+)#

2019-ben kiadva, Netflix és Google együttműködésben.

Használd:

• Új projektek (2026+)
• High-end fotók (még jobb tömörítés)
• Progressive enhancement stratégiával

Előnyök:

• ✅ 50% kisebb fájlméret mint JPEG
• ✅ 30% kisebb mint WebP
• ✅ Jobb minőség alacsony bitrate-en
• ✅ HDR támogatás

Hátrányok:

• ❌ Lassabb encode/decode (CPU intenszív)
• ❌ 92% böngésző támogatás (Safari csak 2022 óta)
• ❌ Kevés eszköz támogatja

Példa (progressive enhancement):

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.jpg" type="image/jpeg">
  <img src="hero.jpg" 
       alt="Hero image"
       width="1920" 
       height="1080">
</picture>

Mikor használd:

• ✅ Blog hero képek
• ✅ Feature képek
• ✅ E-commerce fő termékképek
• ❌ NE használd small ikonokhoz (overhead > savings)

SVG - Vektoros Grafikákhoz#

Használd:

• Logók
• Ikonok
• Egyszerű illusztrációk
• Grafikon-ok, chart-ok

Előnyök:

• ✅ Skálázható (bármilyen méret, nincs pixelesedés)
• ✅ Tiny fájlméret (pár KB)
• ✅ CSS-el stíl-ozható
• ✅ Animálható
• ✅ SEO-barát (text-based XML)

Hátrányok:

• ❌ NE használd fotókhoz
• ❌ Komplex SVG-k lassúak lehetnek

Példa:

<img src="logo.svg" 
     alt="SEOTudás logo"
     width="200" 
     height="60">

Inline SVG (SEO-barát):

<svg width="200" height="60" aria-labelledby="logoTitle">
  <title id="logoTitle">SEOTudás logo</title>
  <path d="M10 10 L100 10 L100 50 Z" fill="#6366f1"/>
</svg>

Optimalizálás:

• Használj SVGO vagy SVGOMG tömörítéshez
• Távolítsd el a felesleges metadatát
• Minify (whitespace eltávolítás)

Képtömörítés - Minőség vs. Fájlméret#

Optimális Tömörítési Beállítások#

JPEG Minőség Guide#

100% minőség:

• Fájlméret: 500 KB
• Használat: Eredeti archívum
• ❌ Soha ne használd webre!

85-90% minőség:

• Fájlméret: 150-200 KB
• Használat: High-end termékképek, portfólió
• ✅ Látható különbség minimális

70-80% minőség:

• Fájlméret: 80-120 KB
• Használat: Legjobb kompromisszum (AJÁNLOTT)
• ✅ Szabad szemmel nem látszik a veszteség

60-70% minőség:

• Fájlméret: 50-80 KB
• Használat: Thumbnails, small képek
• ⚠️ Kismértékű minőségvesztés látható

< 60% minőség:

• Fájlméret: < 50 KB
• ❌ Látható artifacták, ne használd!

Tömörítési Eszközök#

1. Squoosh (Google) - LEGJOBB#

URL: https://squoosh.app

Előnyök:

• ✅ Böngésző-alapú (nem kell telepítés)
• ✅ Side-by-side összehasonlítás
• ✅ WebP, AVIF, MozJPEG support
• ✅ Valós idejű preview
• ✅ Ingyenes, open-source

Használat:

1. Húzd be a képet
2. Válaszd ki a formátumot (WebP)
3. Állítsd a minőséget (75-85%)
4. Összehasonlítás (bal vs. jobb)
5. Letöltés

2. TinyPNG - Batch Processing#

URL: https://tinypng.com

Előnyök:

• ✅ Batch upload (max 20 kép egyszerre)
• ✅ “Smart lossy” tömörítés
• ✅ API elérhető (500 kép/hónap ingyen)
• ✅ Photoshop/WordPress plugin

Hátrányok:

• ❌ Max 5 MB képméret
• ❌ Csak PNG és JPEG (nincs WebP export)

API használat (WordPress):

// TinyPNG WordPress plugin
// Automatikusan tömörít minden feltöltött képet

3. ImageOptim (Mac)#

URL: https://imageoptim.com

Előnyök:

• ✅ Drag & drop batch processing
• ✅ Lossless és lossy
• ✅ Eltávolítja a metadata-t
• ✅ Ingyenes

Használat:

# Húzd be a mappát → Automatikus tömörítés
# Eredmény: 30-70% fájlméret csökkenés

4. ShortPixel (WordPress)#

URL: https://shortpixel.com

Előnyök:

• ✅ WordPress plugin
• ✅ Automatikus tömörítés feltöltéskor
• ✅ Bulk optimizer (meglévő képek)
• ✅ WebP generálás
• ✅ 100 kép/hónap ingyen

Telepítés WordPress-ben:

Plugins → Add New → Search "ShortPixel"
→ Activate → Settings → API Key
→ Enable "Lossy compression"
→ Enable "WebP versions"

Lazy Loading - Késleltetett Betöltés#

Mi az a Lazy Loading?#

A lazy loading késlelteti a képek betöltését - csak akkor töltődnek le, amikor a felhasználó görgetve oda ér.

Előnyök:

• ✅ Gyorsabb kezdeti oldalbetöltés
• ✅ Kevesebb kezdeti adatforgalom
• ✅ Jobb LCP (Largest Contentful Paint)
• ✅ Kevesebb szerver terhelés

Hátrányok:

• ❌ First-screen képekre NE használd (LCP romlik)
• ❌ SEO: Google néha nem látja a lazy-loaded képeket

Native Lazy Loading (HTML)#

2020 óta támogatott! 95% böngésző support 2026-ban.

<img src="image.jpg" 
     alt="Leírás"
     loading="lazy"
     width="800" 
     height="600">

Opciók:

• loading="lazy" - Lazy load (görgetve betölt)
• loading="eager" - Azonnal betölt (default)
• loading="auto" - Böngésző dönt

Mikor használd:

• ✅ Below-the-fold képekre (nem látszik azonnal)
• ✅ Blog cikk képekre
• ✅ Termék listákra
• ❌ NE használd hero képre (first screen)
• ❌ NE használd logo-ra

JavaScript Lazy Loading (Intersection Observer)#

Régebbi böngészőkhöz vagy custom logikához.

Példa (Vanilla JS):

<img data-src="image.jpg" 
     alt="Leírás"
     class="lazy"
     width="800" 
     height="600">

<script>
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll('img.lazy');

  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy');
        observer.unobserve(img);
      }
    });
  });

  lazyImages.forEach(img => imageObserver.observe(img));
});
</script>

WordPress (lazy load plugin):

# Jetpack, a3 Lazy Load, Lazy Load by WP Rocket

Responsive Images - Eszközönként Optimalizált Méretek#

Mi az a Responsive Images?#

Különböző méretű képek különböző eszközöknek (mobil, tablet, desktop).

Probléma:

<img src="hero-4000x3000.jpg" alt="Hero image">

❌ Mobil is letölti a 4000px széles képet (3 MB!), pedig csak 375px széles a kijelző.

Megoldás:

• Mobil: 800px széles kép (80 KB)
• Tablet: 1200px széles kép (150 KB)
• Desktop: 2000px széles kép (300 KB)

Srcset és Sizes Attribútumok#

Srcset: Különböző kép verziók listája
Sizes: Böngésző mekkora képet jelenít meg

Példa:

<img src="hero-800w.jpg"
     srcset="hero-400w.jpg 400w,
             hero-800w.jpg 800w,
             hero-1200w.jpg 1200w,
             hero-2000w.jpg 2000w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     alt="Hero image"
     width="2000"
     height="1200">

Hogyan működik:

1. Böngésző megnézi a viewport szélességet
2. sizes alapján kiszámítja, mekkora képet kell megjeleníteni
3. srcset alapján kiválasztja a legközelebbi méretet
4. Letölti csak azt a képet

Példa breakdown:

Előny: Mobil 5x kevesebb adatot tölt le!

Picture Element - Art Direction#

Picture: Különböző crop-ok különböző eszközökön.

Példa:

<picture>
  <!-- Mobil: portré -->
  <source media="(max-width: 600px)"
          srcset="hero-mobile-crop-600x800.webp"
          type="image/webp">
  
  <!-- Tablet: négyzet -->
  <source media="(max-width: 1200px)"
          srcset="hero-tablet-crop-1200x1200.webp"
          type="image/webp">
  
  <!-- Desktop: landscape -->
  <source srcset="hero-desktop-2000x1000.webp"
          type="image/webp">
  
  <!-- Fallback -->
  <img src="hero-desktop-2000x1000.jpg"
       alt="Hero image"
       width="2000"
       height="1000">
</picture>

Használd:

• Hero képek (mobil vs. desktop crop)
• Termékképek (mobil: közeli, desktop: kontextus)
• Arckép portréták (mobil: arc zoom, desktop: teljes alak)

Fájlnév és Struktúra Optimalizálás#

SEO-barát Fájlnevek#

Rossz példák:

DSC_1234.jpg
IMG_20260118_143022.jpg
photo.jpg
image-final-v3-FINAL.jpg

❌ Értelmetlen, semmi kulcsszó.

Jó példák:

iphone-15-pro-max-titanium-front.jpg
wordpress-seo-dashboard-screenshot.jpg
team-meeting-conference-room-2026.jpg
modern-office-workspace-laptop-desk.jpg

✅ Leíró, kulcsszavak, kötőjelek.

Szabályok:

1. ✅ Kötőjel (-) szóelválasztónak (NE underscore _)
2. ✅ Kisbetűk (lowercase)
3. ✅ Leíró nevek (ne “img1.jpg”)
4. ✅ Kulcsszavak természetesen
5. ❌ Ne ékezetek (használj ASCII karaktereket)
6. ❌ Ne szóközök vagy különleges karakterek

Átnevezés példa:

Előtte: Képernyőkép 2026-01-18 14.30.22.png
Utána: seo-audit-report-screenshot-2026.png

Mappa Struktúra#

Rossz:

/images/
  img1.jpg
  photo2.jpg
  banner.jpg
  logo-final-v2.png
  ...500 kép...

❌ Kaotikus, kezelhetetlen.

Jó:

/images/
  /blog/
    /2026/
      /01/
        title-tag-optimization-hero.jpg
        heading-structure-diagram.jpg
  /products/
    /iphone-15-pro/
      front-view.webp
      back-view.webp
      side-view.webp
  /team/
    john-doe-headshot.jpg
    jane-smith-headshot.jpg
  /logos/
    logo-main.svg
    logo-white.svg

✅ Kategorizált, dátum alapú (blog), könnyen karbantartható.

Core Web Vitals és Képoptimalizálás#

LCP (Largest Contentful Paint)#

Mit mér: Legnagyobb elem (általában kép) betöltési ideje.

Cél: < 2.5 másodperc

Optimalizálási tippek:

1. ✅ Hero kép tömörítés (< 150 KB)
2. ✅ Preload hero kép:

   <link rel="preload" as="image" href="hero.webp">

3. ✅ WebP/AVIF használat
4. ✅ NE lazy load hero képre
5. ✅ Responsive images (srcset)
6. ✅ CDN használat (gyorsabb kiszolgálás)

CLS (Cumulative Layout Shift)#

Mit mér: Elcsúszások (kép betöltődik → tartalom lejjebb ugrik).

Cél: < 0.1

Optimalizálási tippek:

1. ✅ MINDIG add meg width és height:

   <img src="image.jpg" alt="..." width="800" height="600">

2. ✅ CSS aspect-ratio (régi böngészőkhöz):

   img {
     aspect-ratio: 16 / 9;
     width: 100%;
     height: auto;
   }

3. ✅ Placeholder (blur-up technika)

Blur-up példa:

<img src="image-lowres-10kb.jpg"
     data-src="image-highres-100kb.jpg"
     alt="..."
     style="filter: blur(10px); transition: filter 0.3s;"
     onload="this.style.filter='none'; this.src=this.dataset.src;">

Schema Markup - ImageObject#

Segít a Google-nek megérteni a képet.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Title Tag Optimalizálás",
  "image": {
    "@type": "ImageObject",
    "url": "https://seotudas.hu/images/title-tag-hero.jpg",
    "width": 1200,
    "height": 630,
    "caption": "Title tag optimization guide illustration"
  }
}

Product schema képpel:

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "iPhone 15 Pro Max",
  "image": [
    "https://example.com/iphone-front.jpg",
    "https://example.com/iphone-back.jpg",
    "https://example.com/iphone-side.jpg"
  ]
}

Image Optimization Checklist ✅#

Használd ezt minden képnél:

Feltöltés Előtt:#

• Méretezés: Max 2x a megjelenítési méret
• Tömörítés: 60-85% minőség
• Formátum: WebP (+ JPEG/PNG fallback)
• Fájlnév: Leíró, kötőjelek, kisbetűk

HTML-ben:#

• Alt text: 10-15 szó, leíró, kulcsszó
• Width/height: Megadva (CLS elkerülés)
• Lazy loading: loading="lazy" (kivéve hero)
• Srcset: Responsive images (mobil/tablet/desktop)

Performance:#

• Fájlméret: < 100 KB (hero < 150 KB)
• LCP: Hero kép preload
• CDN: Gyors kiszolgálás
• Cache: Long cache headers (1 év)

SEO:#

• Fájlnév: SEO-barát
• Alt text: Kulcsszó természetesen
• Mappa struktúra: Kategorizált
• Schema: ImageObject (ha releváns)

Eszközök Összefoglalás#

Tömörítés:#

1. Squoosh - Böngésző, WebP/AVIF
2. TinyPNG - Batch, API
3. ImageOptim - Mac, drag & drop
4. ShortPixel - WordPress plugin

Formátum Konverzió:#

1. Squoosh - WebP/AVIF export
2. CloudConvert - Batch konverzió
3. ImageMagick - CLI tool

Responsive Images:#

1. Cloudinary - Automatikus srcset generálás
2. Imgix - Real-time image transformation
3. ResponsiveBreakpoints - Optimal breakpoints

SEO Audit:#

1. Screaming Frog - Hiányzó alt tag-ek
2. Google Lighthouse - Performance audit
3. PageSpeed Insights - Core Web Vitals

Összefoglalás#

A képoptimalizálás kritikus az SEO, a Core Web Vitals és a felhasználói élmény szempontjából.

10 Legfontosabb Szabály:

1. ✅ Alt text minden képhez (10-15 szó, leíró)
2. ✅ WebP formátum (25-35% kisebb)
3. ✅ Tömörítés (60-85% minőség)
4. ✅ Lazy loading (kivéve hero)
5. ✅ Responsive images (srcset, sizes)
6. ✅ Width/height megadása (CLS fix)
7. ✅ SEO-barát fájlnév (kötőjelek, kisbetűk)
8. ✅ < 100 KB fájlméret
9. ✅ Preload hero képet
10. ✅ CDN használat

Használd a Squoosh eszközt a képoptimalizáláshoz! 🚀

Gyakran Ismételt Kérdések – Kép SEO (Image Optimization)#