Performance

Images for the web: what you really need to know

A practical guide to optimizing your images without getting bogged down in technical details.

Équipe Webful
5 min de lecture
82 lectures
Mis à jour le 25/01/2026
Performances images optimisation Webp

A practical guide to optimizing your images without getting bogged down in technical details.

1. Three misconceptions to forget

❌ DPI is important for the web

FAUX : DPI (dots per inch) are for printing, not display. A 300 DPI image is no sharper than a 72 DPI image on a web site.What counts is the number of pixels (width × height).

❌ A large image is better

FALSE: Displaying a 4000-pixel image on a 360-pixel smartphone notch is a waste. Result: slower site, lost visitors

❌ JPEG for photos, PNG for graphics

This rule was true before 2015. Today, modern formats like WebP do better in most cases, with files that are 5-10 times lighter

2. Image formats: comparison

✅ WebP The modern, preferred format

  • Très léger (5 à 10 times lighter than JPEG or PNG)
  • High quality
  • Transparency management
  • Compatible with all modern browsers (Chrome, Firefox, Safari, Edge)

Usage: photos, illustrations, logos, banners, pictograms, portfolios

PNG — For transparency if WebP impossible

  • Format without loss of quality
  • Perfect transparency management
  • 2 5 times heavier than WebP

Use: logos and pictograms with transparent background, only if your tool does not support WebP.

JPEG — Classic standard

  • Good quality for photos
  • Lossy compression
  • Heavier than WebP

Use: if your CMS or editor doesn't support WebP, or to manage old photos saved as JPEGs.

SVG — Vector format for drawings

  • Very small size
  • Perfect quality regardless of display size
  • Impossible to use for photos

Use: icons, simple logos, vector illustrations

3. What size to use

The web doesn't read in DPI but in pixels. Here are the widths that are sufficient in most cases:

Usage Largeur recommandée
Full screen mobile display 600 px
Image in an article 1200 px
Large banner / slider 1600–1920 px
Logo 400–800 px
Icône 64–512 px

⚡ Règle simple: never exceed 1920 px width for the web.

Beyond that, the file is unnecessarily heavy and slows down loading without improving rendering.

4. Transparency: which formats?

✅ WebP and PNG manage transparency

  • Fond transparent
  • Opacités partielles
  • Gradients with transparency

Préférez WebP : résult identique, fichier plus léger.

❌ JPEG does not manage transparency

Transparent areas become white or black depending on export

5. Compression: lossy or lossless?

Lossy compression (JPEG, WebP qualité 70-85 %)

  • Greatly reduces file size
  • Invisible quality loss in 90% of cases

Recommended for: photos, banners, non-technical visuals

Lossless compression (PNG, WebP lossless)

  • Strictly identical image pixel by pixel
  • Heavyweight file

Recommended for: logos, pictograms, technical drawings

For photos destined for the web, lossy compression is sufficient and much more effective.

6. Lazy loading: why it's essential

Lazy loading loads images only when they become visible to the screen

<img src="image.webp" loading="lazy" alt="Image description">

Avantages :

  • Pages load faster
  • Data savings on mobile
  • Better SEO score
  • Best user experience

Google recommends this practice for all sites

7. Why these details have an impact

⚡ Speed = visitors who stay

A page that loads in 1 second retains visitors. 4 seconds, you lose 3 out of 4

  

📈 Speed = better ranking

Google prefers fast sites, especially on mobile.

🎨 Adapted format = cleaner rendering

WebP displays sharp contours, smooth gradations, and light files.

  

🔋 Loading in different ways = energy savings

Important when on the move, improves performance and autonomy

8. Summary tables

Which format to choose?

Besoin Format recommandé Alternative
Photo WebP (lossy) JPEG
Transparency-free graphics WebP JPEG
Logo / pictogram WebP or SVG PNG
Image with transparency WebP PNG
Illustration vectorielle SVG —

Which size to choose?

Type d'image Largeur max Raison
Mobile 600 px Readable and light
Article standard 1200 px Équilibre qualité/poids
Bannière large 1600–1920 px Affichage desktop
Logo 400–800 px Clean and fast
Icône 64–512 px Charge instantanément

Essential best practices

  • Give preference to WebP wherever possible
  • Never exceed 1920 px width
  • Toujours activer loading="lazy"
  • Always add a descriptive alt attribute (SEO and accessibility)
  • Never display a full-resolution image from a smartphone
  • Use srcset to load different sizes depending on the screen
  • Test smartphone display first

En résumé

Poorly optimized images slow down your site and drive visitors away. Three simple actions have an immediate impact:

  1. Convert your images to WebP
  2. Reduce size to 1200-1600 px maximum
  3. Enable lazy loading

The rest will come gradually

Webful analyzes the loading speed of your pages and identifies images that slow down your site.

Partager cette fiche

Twitter LinkedIn