Βελτιστοποίηση Εικόνων 20 λεπτά ανάγνωσης

Βελτιστοποίηση Εικόνων για Core Web Vitals (2026): AVIF, WebP, Lazy Loading και Image CDN

Πώς να βελτιστοποιήσετε τις εικόνες σας για καλύτερα Core Web Vitals το 2026. Πρακτικός οδηγός με AVIF, WebP, responsive images, lazy loading, fetchpriority hints, Image CDN και αυτοματοποίηση build pipeline.

Editorial Team

Γιατί η Βελτιστοποίηση Εικόνων Παραμένει Κρίσιμη το 2026

Ας ξεκινήσουμε με ένα νούμερο που πραγματικά εκπλήσσει: οι εικόνες αποτελούν, κατά μέσο όρο, πάνω από το 50% του συνολικού βάρους μιας ιστοσελίδας. Σύμφωνα με τα πιο πρόσφατα δεδομένα του HTTP Archive, η μέση ιστοσελίδα φορτώνει περισσότερα από 1.8 MB σε εικόνες — ένα νούμερο που μπορεί να εκτοξεύσει τους χρόνους φόρτωσης, ιδιαίτερα σε κινητές συσκευές με αργές συνδέσεις.

Αυτό σημαίνει ότι η βελτιστοποίηση εικόνων δεν είναι απλά μια «καλή πρακτική» — είναι ο πιο αποτελεσματικός τρόπος για να βελτιώσετε δραματικά την απόδοση του site σας. Ειλικρινά, αν πρέπει να κάνετε μόνο ένα πράγμα για performance, κάντε αυτό.

Στο σημερινό οικοσύστημα του web, η Google χρησιμοποιεί τα Core Web Vitals ως σήμα κατάταξης, και οι εικόνες επηρεάζουν άμεσα δύο από τους τρεις βασικούς δείκτες: το Largest Contentful Paint (LCP) και το Cumulative Layout Shift (CLS). Μια κακώς βελτιστοποιημένη hero image μπορεί να καθυστερήσει το LCP κατά δευτερόλεπτα, ενώ μια εικόνα χωρίς καθορισμένες διαστάσεις προκαλεί εκείνες τις ενοχλητικές μετατοπίσεις στη διάταξη που τρελαίνουν τους χρήστες.

Σε αυτόν τον οδηγό θα εξερευνήσουμε κάθε πτυχή της βελτιστοποίησης εικόνων — από τα σύγχρονα formats (AVIF, WebP) μέχρι lazy loading, responsive images, fetchpriority hints, CDN εικόνων και προηγμένες CSS τεχνικές. Κάθε ενότητα περιλαμβάνει πρακτικά παραδείγματα κώδικα που μπορείτε να εφαρμόσετε αμέσως.

Πώς οι Εικόνες Επηρεάζουν τα Core Web Vitals

Largest Contentful Paint (LCP)

Το LCP μετρά τον χρόνο που χρειάζεται για να εμφανιστεί το μεγαλύτερο ορατό στοιχείο στο viewport. Και μαντέψτε — στο 70% των περιπτώσεων, αυτό το στοιχείο είναι μια εικόνα. Ο στόχος είναι LCP κάτω από 2.5 δευτερόλεπτα, και για να το πετύχετε πρέπει η κύρια εικόνα σας να φορτώνεται γρήγορα, να χρησιμοποιεί το κατάλληλο format, να έχει σωστό μέγεθος και να μην αποκλείεται από άλλους πόρους.

Η αλυσίδα φόρτωσης μιας LCP εικόνας περιλαμβάνει τέσσερα στάδια: Time to First Byte (TTFB), Resource Load Delay (χρόνος μέχρι ο browser να ξεκινήσει τη λήψη), Resource Load Duration (χρόνος λήψης) και Element Render Delay (χρόνος απόδοσης). Η βελτιστοποίηση εικόνων επηρεάζει κυρίως τα δύο μεσαία στάδια.

Cumulative Layout Shift (CLS)

Το CLS μετρά τις απρόσμενες μετατοπίσεις στη διάταξη. Το σενάριο είναι γνωστό: μια εικόνα φορτώνεται χωρίς προκαθορισμένες διαστάσεις width και height, ο browser δεν ξέρει πόσο χώρο να δεσμεύσει, και το περιεχόμενο «πηδάει» μόλις η εικόνα εμφανιστεί.

Ο στόχος είναι CLS κάτω από 0.1.

Interaction to Next Paint (INP)

Αν και το INP δεν επηρεάζεται άμεσα από τις εικόνες, υπερβολικά μεγάλες εικόνες μπορούν να καταναλώσουν bandwidth και μνήμη, επιβραδύνοντας έμμεσα την αποκρισιμότητα. Επιπλέον, heavy JavaScript για image processing (π.χ. client-side resizing) μπορεί να μπλοκάρει το main thread — κάτι που πολλοί ξεχνούν.

Σύγχρονα Formats Εικόνων: AVIF, WebP και η Στρατηγική Fallback

AVIF: Η Νέα Γενιά Συμπίεσης

Το AVIF (AV1 Image File Format) αποτελεί το πιο αποδοτικό format εικόνων που διατίθεται σήμερα. Βασίζεται στον codec βίντεο AV1 και τα αποτελέσματα είναι εντυπωσιακά: κατά μέσο όρο 50% μικρότερα αρχεία σε σχέση με JPEG στην ίδια οπτική ποιότητα, και 20-30% μικρότερα σε σχέση με WebP. Το 2026 υποστηρίζεται πλήρως σε Chrome, Firefox, Edge, Opera και Safari (από την έκδοση 16.1+).

Τα πλεονεκτήματά του:

  • Εξαιρετική συμπίεση lossy και lossless
  • Υποστήριξη HDR και wide color gamut
  • Υποστήριξη transparency (alpha channel) χωρίς σημαντικό κόστος σε μέγεθος
  • Animated sequences ως εναλλακτική στα GIF

Ωστόσο, δεν είναι όλα ρόδινα. Η κωδικοποίηση AVIF είναι σημαντικά πιο αργή σε σύγκριση με WebP ή JPEG, κάτι που σημαίνει ότι η μαζική μετατροπή εκατοντάδων εικόνων μπορεί να χρειαστεί αρκετό υπολογιστικό χρόνο. Επίσης, το AVIF δεν είναι ιδανικό για progressive rendering — δεν εμφανίζει σταδιακά τη λεπτομέρεια κατά τη φόρτωση.

WebP: Η Αξιόπιστη Επιλογή

Το WebP, αναπτυγμένο από τη Google, παραμένει μια εξαιρετική επιλογή. Προσφέρει περίπου 25-35% μικρότερα αρχεία σε σχέση με JPEG, με ταχύτατη κωδικοποίηση και αποκωδικοποίηση. Η υποστήριξή του είναι σχεδόν καθολική, γεγονός που το καθιστά ασφαλή επιλογή σε κάθε περίπτωση.

Στρατηγική Progressive Enhancement με το Element <picture>

Η βέλτιστη προσέγγιση είναι να χρησιμοποιείτε το element <picture> για να παρέχετε πολλαπλά formats, αφήνοντας τον browser να διαλέξει μόνος του:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Περιγραφή εικόνας"
       width="1200" height="630"
       loading="eager"
       fetchpriority="high">
</picture>

Σε αυτό το παράδειγμα, ο browser δοκιμάζει πρώτα AVIF, μετά WebP, και αν κανένα δεν υποστηρίζεται, φορτώνει το JPEG fallback. Σημειώστε ότι τα attributes width, height, loading και fetchpriority μπαίνουν στο <img> element, όχι στα <source>.

Μετατροπή Εικόνων με Εργαλεία Γραμμής Εντολών

Μπορείτε εύκολα να ενσωματώσετε τη μετατροπή εικόνων στο build pipeline σας:

# Μετατροπή σε WebP με cwebp
cwebp -q 80 input.jpg -o output.webp

# Μετατροπή σε AVIF με avifenc
avifenc --min 20 --max 35 input.png output.avif

# Μαζική μετατροπή με imagemagick
magick mogrify -format webp -quality 80 *.jpg

# Χρήση sharp σε Node.js script
node -e "
const sharp = require('sharp');
sharp('input.jpg')
  .webp({ quality: 80 })
  .toFile('output.webp');
"

Η προτεινόμενη στρατηγική για το 2026 είναι: ξεκινήστε με WebP για γενική χρήση και εισαγάγετε AVIF εκεί που προσφέρει σαφή πλεονεκτήματα — ιδιαίτερα στα hero images, που επηρεάζουν άμεσα το LCP. Από την εμπειρία μας, η μετατροπή μόνο των hero images σε AVIF μπορεί να μειώσει το LCP κατά 200-500ms. Αξίζει η προσπάθεια.

Responsive Images: Η Σωστή Εικόνα στη Σωστή Συσκευή

Χρήση του srcset με Width Descriptors

Σκεφτείτε το λίγο: στέλνετε μια εικόνα 2000px σε ένα κινητό με viewport 375px. Αυτό είναι τεράστια σπατάλη bandwidth. Τα responsive images λύνουν ακριβώς αυτό το πρόβλημα:

<img
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w,
          product-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  src="product-800.webp"
  alt="Προϊόν"
  width="800"
  height="600"
  loading="lazy">

Ας αναλύσουμε τα βασικά attributes:

  • srcset: Ορίζει τις διαθέσιμες εκδόσεις της εικόνας με τα πραγματικά τους πλάτη (σε pixels)
  • sizes: Λέει στον browser ποιο θα είναι το πλάτος εμφάνισης ανάλογα με το viewport — εδώ: 100% σε κινητά, 50% σε tablet, 33% σε desktop
  • src: Fallback για browsers που δεν υποστηρίζουν srcset (σπάνιο πλέον, αλλά δεν κοστίζει)

Ο browser χρησιμοποιεί τα sizes σε συνδυασμό με το device pixel ratio (DPR) για να επιλέξει την καλύτερη εικόνα. Για παράδειγμα, σε μια συσκευή με viewport 400px και DPR 2x, χρειάζεται εικόνα 800px, οπότε επιλέγει αυτόματα το product-800.webp.

Συνδυασμός <picture> με Responsive Images

Μπορείτε να συνδυάσετε πολλαπλά formats με responsive sizes — αυτός είναι ο ιδανικός συνδυασμός:

<picture>
  <source
    type="image/avif"
    srcset="hero-400.avif 400w,
            hero-800.avif 800w,
            hero-1200.avif 1200w"
    sizes="100vw">
  <source
    type="image/webp"
    srcset="hero-400.webp 400w,
            hero-800.webp 800w,
            hero-1200.webp 1200w"
    sizes="100vw">
  <img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w,
            hero-800.jpg 800w,
            hero-1200.jpg 1200w"
    sizes="100vw"
    alt="Hero banner"
    width="1200"
    height="600"
    fetchpriority="high">
</picture>

Art Direction με <picture>

Μερικές φορές δεν θέλετε απλώς να αλλάξετε ανάλυση — θέλετε εντελώς διαφορετική σύνθεση εικόνας ανάλογα με τη συσκευή. Μια πανοραμική φωτογραφία στο desktop μπορεί να γίνει ένα cropped close-up στο κινητό, κι αυτό δίνει πολύ καλύτερο αποτέλεσμα:

<picture>
  <source
    media="(max-width: 768px)"
    srcset="banner-mobile.avif"
    type="image/avif">
  <source
    media="(max-width: 768px)"
    srcset="banner-mobile.webp"
    type="image/webp">
  <source
    srcset="banner-desktop.avif"
    type="image/avif">
  <source
    srcset="banner-desktop.webp"
    type="image/webp">
  <img src="banner-desktop.jpg" alt="Banner"
       width="1200" height="400">
</picture>

Lazy Loading και Priority Hints: Φορτώστε τα Σωστά Πράγματα τη Σωστή Στιγμή

Native Lazy Loading

Το native lazy loading με loading="lazy" αποτελεί πλέον standard πρακτική. Ο browser αναβάλλει τη φόρτωση εικόνων εκτός viewport μέχρι ο χρήστης να πλησιάσει σε αυτές κατά το scroll:

<!-- Εικόνα εκτός viewport — lazy load -->
<img src="product.webp"
     alt="Προϊόν κατηγορίας"
     width="400" height="300"
     loading="lazy">

<!-- Εικόνα στο viewport — μην χρησιμοποιείτε lazy -->
<img src="hero.webp"
     alt="Hero image"
     width="1200" height="600"
     loading="eager">

Κρίσιμοι κανόνες για lazy loading:

  • Ποτέ μην βάζετε loading="lazy" στην LCP εικόνα — αυτό είναι ίσως το πιο συχνό λάθος που βλέπω, και καθυστερεί σημαντικά τον χρόνο εμφάνισής της
  • Πάντα ορίζετε width και height σε lazy-loaded εικόνες για αποφυγή CLS
  • Ο Chromium φορτώνει τις lazy images αρκετά νωρίτερα πριν μπουν στο viewport, ώστε να είναι έτοιμες όταν εμφανιστούν
  • Αν κάνετε lazy load background images, χρησιμοποιήστε Intersection Observer API

Fetchpriority: Ακριβής Έλεγχος Προτεραιότητας

Το attribute fetchpriority σας επιτρέπει να υποδείξετε στον browser ποιοι πόροι είναι πιο σημαντικοί:

<!-- Hero/LCP image — υψηλή προτεραιότητα -->
<img src="hero.webp"
     alt="Hero"
     fetchpriority="high"
     width="1200" height="600">

<!-- Carousel images κάτω — χαμηλή προτεραιότητα -->
<img src="slide-2.webp"
     alt="Slide 2"
     fetchpriority="low"
     loading="lazy"
     width="800" height="400">

Τα αποτελέσματα μιλούν μόνα τους: η χρήση fetchpriority="high" στη hero image βελτίωσε το LCP κατά 4% στο Etsy, ενώ ορισμένοι ιστότοποι παρατήρησαν βελτίωση 20-30% σε εργαστηριακά tests.

Προσοχή: Ποτέ μην συνδυάζετε loading="lazy" με fetchpriority="high" — είναι αντικρουόμενες οδηγίες. Αν μια εικόνα χρειάζεται υψηλή προτεραιότητα, δεν θα πρέπει να αναβληθεί η φόρτωσή της. Λογικό, σωστά;

Preload για Κρίσιμες Εικόνες

Για εικόνες που είναι κρίσιμες αλλά ο browser δεν τις ανακαλύπτει αρκετά νωρίς (π.χ. background images μέσω CSS ή εικόνες μέσα σε JavaScript components), χρησιμοποιήστε <link rel="preload">:

<head>
  <!-- Preload hero image με AVIF/WebP fallback -->
  <link rel="preload" as="image" href="hero.avif"
        type="image/avif">
  <link rel="preload" as="image" href="hero.webp"
        type="image/webp">

  <!-- Preload responsive image -->
  <link rel="preload" as="image"
        href="hero.webp"
        imagesrcset="hero-400.webp 400w,
                     hero-800.webp 800w,
                     hero-1200.webp 1200w"
        imagesizes="100vw">
</head>

Το preload είναι ιδιαίτερα χρήσιμο για CSS background images, αφού ο browser δεν τις ανακαλύπτει μέχρι να αναλύσει ολόκληρο το CSSOM. Αν έχετε hero section με background-image, αυτό μπορεί να κάνει πραγματική διαφορά.

Αποτροπή Layout Shift: Κρατήστε τη Διάταξη Σταθερή

Explicit Dimensions

Ο πιο απλός τρόπος αποτροπής CLS — κι αυτός που συχνά παραλείπεται — είναι να ορίζετε πάντα width και height στις εικόνες:

<!-- Σωστό: Ο browser υπολογίζει aspect ratio -->
<img src="photo.webp" width="800" height="600" alt="Φωτογραφία">

<!-- CSS: Κάντε responsive χωρίς σπάσιμο aspect ratio -->
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>

Ο σύγχρονος browser χρησιμοποιεί τα width και height attributes για να υπολογίσει αυτόματα το aspect ratio πριν φορτωθεί η εικόνα, δεσμεύοντας τον κατάλληλο χώρο. Σε συνδυασμό με max-width: 100%; height: auto;, οι εικόνες παραμένουν responsive χωρίς CLS.

CSS aspect-ratio Property

Για πιο σύνθετες περιπτώσεις, η CSS property aspect-ratio είναι πολύ βολική:

.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.product-thumbnail {
  width: 200px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background-color: #f5f5f5;
}

Placeholder Techniques

Για βελτιωμένη εμπειρία χρήστη κατά τη φόρτωση, μπορείτε να χρησιμοποιήσετε placeholders. Αυτά τα μικρά tricks κάνουν τη διαφορά στο πώς αντιλαμβάνεται ο χρήστης την ταχύτητα:

<!-- Dominant color placeholder -->
<div style="background-color: #3a7bd5; aspect-ratio: 16/9;">
  <img src="landscape.webp"
       alt="Τοπίο"
       loading="lazy"
       width="1200" height="675"
       style="width: 100%; height: auto;">
</div>

<!-- BlurHash placeholder με CSS -->
<style>
.img-container {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  filter: blur(20px);
  transform: scale(1.1);
}
.img-container img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-container img[data-loaded="true"] ~ .placeholder {
  opacity: 0;
}
</style>

CDN Εικόνων: Αυτοματοποιημένη Βελτιστοποίηση σε Κλίμακα

Γιατί να Χρησιμοποιήσετε Image CDN

Τα Image CDN αυτοματοποιούν πολλές από τις βελτιστοποιήσεις που εξετάσαμε παραπάνω, και ειλικρινά, αν διαχειρίζεστε πολλές εικόνες, μπορούν να σας γλιτώσουν τεράστιο φόρτο εργασίας. Παρέχουν:

  • Αυτόματη μετατροπή format: Εντοπίζουν τον browser και στέλνουν AVIF, WebP ή JPEG αυτόματα
  • Dynamic resizing: Δημιουργούν εκδόσεις σε κάθε μέγεθος on-the-fly
  • Adaptive quality: Προσαρμόζουν την ποιότητα ανάλογα με τη σύνδεση του χρήστη
  • Global distribution: Σερβίρουν εικόνες από edge nodes κοντά στον χρήστη
  • Αναγνώριση Save-Data header: Μειώνουν αυτόματα ποιότητα σε χρήστες που έχουν ενεργοποιήσει εξοικονόμηση δεδομένων

Cloudinary: Παράδειγμα Αυτοματοποίησης

Με ένα Image CDN όπως το Cloudinary, μια απλή URL τροποποίηση αρκεί για πλήρη βελτιστοποίηση:

<!-- Πριν: Ακατέργαστη εικόνα -->
<img src="https://res.cloudinary.com/demo/image/upload/sample.jpg">

<!-- Μετά: Αυτόματο format, ποιότητα, resize -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/sample.jpg">

<!-- Με responsive breakpoints -->
<img
  srcset="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_400/sample.jpg 400w,
          https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/sample.jpg 800w,
          https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_1200/sample.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/sample.jpg"
  alt="Δείγμα"
  width="800" height="600">

Τα parameters f_auto (αυτόματο format) και q_auto (αυτόματη ποιότητα) κάνουν αυτόματα τη δουλειά: ο αλγόριθμος στέλνει AVIF (με εξοικονόμηση ~62%), WebP (~45%) ή JPEG ανάλογα με τον browser. Απλό και αποτελεσματικό.

Self-Hosted Εναλλακτικές

Αν προτιμάτε self-hosted λύσεις (ή αν ο προϋπολογισμός σας δεν επιτρέπει εμπορικό CDN), υπάρχουν αξιόλογες επιλογές:

  • imgproxy: Open-source, Go-based image processing server
  • Thumbor: Open-source smart image service
  • Sharp + Express: Custom Node.js image service
// Παράδειγμα Sharp middleware σε Express
const express = require('express');
const sharp = require('sharp');
const app = express();

app.get('/images/:width/:filename', async (req, res) => {
  const { width, filename } = req.params;
  const accept = req.headers.accept || '';

  let format = 'jpeg';
  let contentType = 'image/jpeg';

  if (accept.includes('image/avif')) {
    format = 'avif';
    contentType = 'image/avif';
  } else if (accept.includes('image/webp')) {
    format = 'webp';
    contentType = 'image/webp';
  }

  const buffer = await sharp(`./originals/${filename}`)
    .resize(parseInt(width))
    .toFormat(format, { quality: 80 })
    .toBuffer();

  res.set('Content-Type', contentType);
  res.set('Cache-Control', 'public, max-age=31536000');
  res.send(buffer);
});

CSS Τεχνικές για Απόδοση Εικόνων

content-visibility: auto

Η CSS property content-visibility: auto αποτελεί ένα κρυμμένο διαμάντι βελτιστοποίησης rendering. Λέει στον browser να παραλείψει την απόδοση off-screen περιεχομένου μέχρι να χρειαστεί, μειώνοντας σημαντικά τον αρχικό χρόνο φόρτωσης:

/* Εφαρμογή σε sections με πολλές εικόνες */
.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px 250px;
}

.gallery-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* Για μεγάλες σελίδες με πολλές εικόνες */
article section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

Η contain-intrinsic-size ορίζει ένα εκτιμώμενο μέγεθος placeholder, αποτρέποντας τη μετατόπιση scrollbar. Η λέξη-κλειδί auto θυμάται το πραγματικό μέγεθος μετά την πρώτη εμφάνιση — πολύ βολικό για επαναλαμβανόμενα scrolls.

will-change και Transform για Animation

Αν χρειάζεστε animated εικόνες (π.χ. hover effects σε galleries), χρησιμοποιήστε GPU-accelerated properties αντί να αλλάζετε dimensions:

.gallery-item img {
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* Αντί για: */
.gallery-item:hover img {
  /* ΜΗΝ χρησιμοποιείτε width/height για animation */
  width: 105%;
  height: 105%;
}

Βελτιστοποίηση Background Images

Για background images, η βελτιστοποίηση απαιτεί CSS-based λύσεις. Το image-set() σας επιτρέπει format fallbacks παρόμοια με το <picture>:

/* Responsive background με image-set() */
.hero {
  background-image: url('hero.jpg');
  background-image: image-set(
    url('hero.avif') type('image/avif'),
    url('hero.webp') type('image/webp'),
    url('hero.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
}

/* Responsive ανάλυση */
.hero {
  background-image: url('hero-800.webp');
}

@media (min-width: 1024px) {
  .hero {
    background-image: url('hero-1600.webp');
  }
}

@media (min-resolution: 2dppx) and (min-width: 1024px) {
  .hero {
    background-image: url('hero-3200.webp');
  }
}

Αυτοματοποίηση στο Build Pipeline

Webpack Configuration

Ένα από τα πράγματα που δεν αξίζει να κάνετε χειροκίνητα είναι η βελτιστοποίηση εικόνων σε κάθε build. Αυτοματοποιήστε τη:

// webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              jpeg: { quality: 80 },
              webp: { quality: 80 },
              avif: { quality: 65 },
              png: { quality: 80 },
            },
          },
        },
        generator: [
          {
            preset: 'webp',
            implementation: ImageMinimizerPlugin.sharpGenerate,
            options: {
              encodeOptions: {
                webp: { quality: 80 },
              },
            },
          },
          {
            preset: 'avif',
            implementation: ImageMinimizerPlugin.sharpGenerate,
            options: {
              encodeOptions: {
                avif: { quality: 65 },
              },
            },
          },
        ],
      }),
    ],
  },
};

Vite Plugin για Αυτόματη Βελτιστοποίηση

Αν χρησιμοποιείτε Vite (κι αν δεν το κάνετε, ίσως αξίζει να το εξετάσετε), η ρύθμιση είναι ακόμα πιο απλή:

// vite.config.js
import { defineConfig } from 'vite';
import { imagetools } from 'vite-imagetools';

export default defineConfig({
  plugins: [
    imagetools({
      defaultDirectives: new URLSearchParams({
        format: 'webp;avif',
        quality: '80',
        w: '400;800;1200',
      }),
    }),
  ],
});

Script Αυτοματοποίησης με Node.js

Για πλήρη έλεγχο, ένα custom Node.js script κάνει τη δουλειά:

// scripts/optimize-images.js
const sharp = require('sharp');
const glob = require('glob');
const path = require('path');

const WIDTHS = [400, 800, 1200, 1600];
const FORMATS = ['webp', 'avif'];

async function optimizeImages() {
  const images = glob.sync('src/images/**/*.{jpg,jpeg,png}');

  for (const imagePath of images) {
    const name = path.basename(imagePath, path.extname(imagePath));
    const dir = path.dirname(imagePath).replace('src/', 'dist/');

    for (const width of WIDTHS) {
      for (const format of FORMATS) {
        const outputPath = `${dir}/${name}-${width}.${format}`;

        await sharp(imagePath)
          .resize(width)
          .toFormat(format, {
            quality: format === 'avif' ? 65 : 80,
          })
          .toFile(outputPath);

        console.log(`Δημιουργήθηκε: ${outputPath}`);
      }
    }
  }
}

optimizeImages();

Μέτρηση και Παρακολούθηση Απόδοσης Εικόνων

Lighthouse Audit για Εικόνες

Το Lighthouse παρέχει συγκεκριμένα audits για εικόνες — και αξίζει να τα τρέχετε τακτικά:

  • Properly size images: Εντοπίζει εικόνες που σερβίρονται μεγαλύτερες από ό,τι εμφανίζονται
  • Serve images in next-gen formats: Προτείνει τη χρήση WebP/AVIF
  • Efficiently encode images: Εντοπίζει εικόνες με υπερβολική ποιότητα
  • Image elements have explicit width and height: Ελέγχει πρόληψη CLS
  • Defer offscreen images: Προτείνει lazy loading

JavaScript Snippet για Performance Monitoring

Θέλετε real-time παρακολούθηση φόρτωσης εικόνων; Αυτό το snippet σας καλύπτει:

// Παρακολούθηση LCP εικόνας
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (entry.element?.tagName === 'IMG') {
      console.log('LCP Image:', {
        url: entry.element.src,
        loadTime: entry.loadTime,
        renderTime: entry.renderTime,
        size: entry.size,
        element: entry.element,
      });
    }
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

// Εντοπισμός αργών εικόνων
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (entry.initiatorType === 'img' && entry.duration > 1000) {
      console.warn('Αργή εικόνα:', {
        url: entry.name,
        duration: `${entry.duration.toFixed(0)}ms`,
        transferSize: `${(entry.transferSize / 1024).toFixed(1)}KB`,
      });
    }
  }
}).observe({ type: 'resource', buffered: true });

// Εντοπισμός εικόνων χωρίς lazy loading εκτός viewport
function auditLazyLoading() {
  const images = document.querySelectorAll('img:not([loading="lazy"])');
  const viewportHeight = window.innerHeight;

  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top > viewportHeight * 2) {
      console.warn('Εικόνα εκτός viewport χωρίς lazy loading:', img.src);
    }
  });
}

// Εντοπισμός αντικρουόμενων attributes
function detectConflicts() {
  const conflicts = document.querySelectorAll(
    'img[loading="lazy"][fetchpriority="high"]'
  );
  conflicts.forEach(img => {
    console.error('Αντίκρουση: lazy + fetchpriority=high:', img.src);
  });
}

window.addEventListener('load', () => {
  auditLazyLoading();
  detectConflicts();
});

Checklist Βελτιστοποίησης Εικόνων

Πριν κλείσουμε, ένα πρακτικό checklist που μπορείτε να χρησιμοποιείτε σε κάθε project:

  1. Format: Χρησιμοποιείτε AVIF/WebP με JPEG/PNG fallback μέσω <picture>
  2. Μέγεθος: Σερβίρετε εικόνες στο σωστό μέγεθος με srcset και sizes
  3. Συμπίεση: Εφαρμόζετε κατάλληλη ποιότητα (70-85 για JPEG/WebP, 60-70 για AVIF)
  4. Lazy Loading: loading="lazy" σε εικόνες εκτός viewport
  5. Priority: fetchpriority="high" στην LCP εικόνα
  6. Dimensions: width και height σε κάθε εικόνα
  7. Preload: Preload για κρίσιμες εικόνες που ο browser δεν ανακαλύπτει νωρίς
  8. CDN: Σερβίρισμα εικόνων μέσω CDN κοντά στους χρήστες
  9. Caching: Μεγάλα Cache-Control headers με immutable όπου δυνατό
  10. CSS: content-visibility: auto σε sections με πολλές εικόνες
  11. Build: Αυτοματοποίηση βελτιστοποίησης στο build pipeline
  12. Monitoring: Συνεχής παρακολούθηση με Lighthouse, CrUX και RUM

Συμπέρασμα

Η βελτιστοποίηση εικόνων παραμένει ο πιο αποτελεσματικός τρόπος βελτίωσης της απόδοσης ιστοσελίδων το 2026. Με σύγχρονα formats (AVIF, WebP), responsive images, στρατηγικό lazy loading, priority hints και αυτοματοποιημένα build pipelines, μπορείτε να μειώσετε δραματικά τα μεγέθη αρχείων και να βελτιώσετε τα Core Web Vitals σας.

Η συμβουλή μου; Ξεκινήστε με τις εύκολες βελτιώσεις — μετατροπή σε WebP, προσθήκη width/height, lazy loading — και σταδιακά εισάγετε πιο προηγμένες τεχνικές. Κάθε βελτιστοποίηση αθροίζεται, και το αποτέλεσμα είναι ένας ιστότοπος ταχύτερος, πιο αποδοτικός και πιο ψηλά στα αποτελέσματα αναζήτησης.

Σχετικά με τον Συγγραφέα Editorial Team

Our team of expert writers and editors.