Optimising images for the web: the complete guide [2026]

Why image optimisation is decisive

Images are the single biggest factor influencing the load time of a website. According to HTTP Archive, images account for 50 percent of the total page weight on average, and on image heavy pages such as portfolios, e-commerce or real estate as much as 75 percent.

That has a direct effect on your business:

• 53 percent of users leave a mobile page that takes longer than 3 seconds to load (Google study)
• Every additional second of load time reduces the conversion rate by 7 percent (Akamai)
• Google uses the Core Web Vitals, in particular LCP (largest contentful paint), as a ranking factor
• Slow pages have a higher bounce rate and shorter time on site

In our daily work as a web design agency in Vienna we keep seeing the same picture: companies invest thousands of euros in a beautiful design and then upload images of 5 MB straight from the camera. The result is a gorgeous website that nobody sees because it loads too slowly.

The numbers speak for themselves

If you test your website with our website design tool you will quickly see whether images are a problem. In most cases image optimisation is the fastest route to better Core Web Vitals, often the PageSpeed score improves by 20 to 40 points through image work alone.

Performance and SEO belong together

Google introduced the Core Web Vitals as an official ranking factor in 2021. That means slow images cost you not only visitors but search rankings as well. The LCP value in particular is often determined by a large hero image or banner. If that image is not optimised, your whole page fails the LCP test.

More on this in our detailed guide to optimising Core Web Vitals.

Image formats compared: WebP, AVIF, PNG, JPG, SVG

Choosing the right image format is the first and most important step of image optimisation. Every format has its strengths and weaknesses, and the right use case.

JPEG (JPG), the classic

JPEG has been the standard format for photos on the web for more than 30 years. It uses lossy compression, which means minimal detail is lost every time you save.

Advantages:

• Universal browser support (100 percent)
• Good compression for photos
• Small file size at acceptable quality

Disadvantages:

• No transparency
• Quality loss when saving repeatedly
• Not ideal for text, graphics or sharp edges
• Larger than WebP at the same quality

Best practice: set the JPEG quality to 75 to 85 percent. The difference to 100 percent is hard to see with the naked eye, but the file size drops by 50 to 70 percent.

PNG, for transparency and graphics

PNG uses lossless compression and supports transparency (alpha channel). That makes it ideal for logos, icons and graphics with text.

Advantages:

• Lossless quality
• Transparency (alpha channel)
• Ideal for graphics, screenshots, text

Disadvantages:

• Clearly larger files than JPEG or WebP for photos
• No animation (APNG exists for that)

Best practice: use PNG only for graphics with transparency or sharp edges. For photos PNG is almost always the wrong choice.

WebP, the modern standard

WebP was developed by Google and delivers 25 to 35 percent smaller files than JPEG at comparable quality. It supports lossy as well as lossless compression and transparency.

Advantages:

• Clearly smaller files than JPEG and PNG
• Transparency support
• Lossy and lossless compression
• 97 percent browser support (as of 2026)

Disadvantages:

• Older Safari versions (below 16) do not support WebP
• Quality loss at very low quality levels is more visible than with JPEG

Best practice: use WebP as the default format for all photos and complex graphics. Offer JPEG as a fallback in the picture element.

AVIF, the future

AVIF is the newest image format and is based on the AV1 video codec. It offers up to 50 percent better compression than JPEG and clearly beats WebP as well.

Advantages:

• The best compression of all current formats
• HDR and wide colour gamut support
• Transparency and animation
• 92 percent browser support (as of 2026)

Disadvantages:

• Longer encoding time (CPU intensive)
• Still no universal support
• Maximum image size limited in some encoders

Best practice: AVIF as the first choice in the picture element, WebP as a fallback, JPEG as the last fallback.

SVG, for vector graphics

SVG is a vector based format that scales infinitely without loss of quality. Perfect for logos, icons, illustrations and diagrams.

Advantages:

• Infinite scalability
• Extremely small file sizes for simple graphics
• Can be animated with CSS and manipulated with JavaScript
• Text based, ideal for SEO

Disadvantages:

• Not suitable for photos
• Complex SVGs can become very large
• Security risks with user uploads (embedded JavaScript)

The big comparison table

GoldenWing's recommendation: use the picture element with AVIF, WebP and JPEG as a fallback chain. That way every user automatically gets the best possible variant.

Implementing responsive images properly

Loading a 4K hero image on a smartphone is a waste of resources. Responsive images make sure every device only receives the image size it needs.

The srcset attribute

With srcset you define various image sizes and the browser picks the right one automatically:

<img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w, hero-1600.webp 1600w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" alt="Modern web design portfolio on various devices" loading="lazy" />

Explanation:

• srcset lists the available image widths
• sizes tells the browser how wide the image will be in the layout
• The browser calculates automatically which image size is optimal (taking pixel density into account)

The picture element for format fallbacks

The picture element combines format selection with responsive sizes:

<picture> <source type="image/avif" srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w" sizes="(max-width: 768px) 100vw, 50vw" /> <source type="image/webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w" sizes="(max-width: 768px) 100vw, 50vw" /> <img src="hero-800.jpg" alt="Responsive web design project" width="1200" height="630" loading="lazy" decoding="async" /> </picture>

We use this pattern in all web design projects to guarantee maximum performance at the best image quality. A basic understanding of responsive design is essential here.

Which image sizes should you generate?

For most websites we recommend the following breakpoints:

Tip: do not generate more than 4 or 5 variants per image. Every additional variant costs storage and build time while delivering diminishing returns.

Lazy loading: load images only when they are needed

Lazy loading delays loading images until they become visible in the viewport. That reduces the initial load time drastically, especially on long pages with many images.

Native lazy loading (the simple solution)

Since 2020 all modern browsers support native lazy loading through the loading attribute:

<!-- Images below the viewport --> <img src="image.webp" loading="lazy" alt="Description" width="800" height="450" /> <!-- Hero image: do NOT lazy load --> <img src="hero.webp" loading="eager" fetchpriority="high" alt="Hero" width="1600" height="900" />

Important rules:

1. Above the fold images always get loading="eager" or no loading attribute at all
2. The LCP image additionally gets fetchpriority="high"
3. Always give width and height to avoid layout shifts (CLS)
4. No lazy loading libraries are needed any more, the native solution is enough

Intersection observer (for special cases)

If you need more control (for background images or video posters, for example), use the intersection observer:

const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }, { rootMargin: '200px' }); document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

The rootMargin of 200 px makes sure images are loaded 200 pixels before they become visible, so the user never sees an empty frame.

Placeholder strategies

While an image loads, no empty space should appear. The best strategies:

• Blur up (LQIP): a tiny, blurred preview image (under 1 KB) that is replaced by the sharp image once it loads. The Next.js image component does this automatically.
• Dominant colour: the dominant colour of the image as a placeholder. Fast to compute, visually pleasant.
• Skeleton loading: animated grey placeholder shapes. Modern and familiar from social media apps.

At GoldenWing we rely on blur up with Next.js image, which offers the ideal combination of performance and user experience. That is a central part of our web app development.

A CDN for images: Cloudflare, imgix, Cloudinary

A content delivery network (CDN) stores your images on servers worldwide and serves them from the closest location. For images there are specialised CDNs that offer automatic optimisation on top.

Cloudflare Polish and image resizing

Cloudflare is already in use as a CDN on many websites. Image optimisation comes as an additional feature:

• Polish: automatic compression of all images (lossless or lossy)
• WebP conversion: automatic for browsers that support it
• Image resizing: resizing on the fly through URL parameters
• Price: included in the Pro plan (20 dollars a month)

Advantage: no code changes needed, Cloudflare optimises every image automatically.

Cloudinary, the all rounder

Cloudinary offers the most extensive image transformations of all providers:

• Automatic format detection (f_auto delivers AVIF, WebP or JPEG depending on the browser)
• Automatic quality (q_auto picks the optimal quality)
• Responsive breakpoints are generated automatically
• Cropping with AI (g_auto recognises the subject)

Price: a free tier with 25 credits a month, then from 89 dollars a month.

imgix, for enterprise

imgix is the premium provider for image intensive websites:

• Extremely fast processing
• More than 100 URL parameters for transformations
• Automatic format detection
• Excellent documentation

Price: from 100 dollars a month, charged by origin images.

Which CDN is right for you?

For most of our clients we recommend Cloudflare as the CDN plus Next.js image optimisation for responsive images. Only on very image heavy projects (e-commerce, photography) do we use Cloudinary.

Optimising alt text for SEO

Alt text matters twice over: it makes images accessible to screen readers and helps search engines understand what the image shows. Even so it is neglected on most websites.

What Google says about alt text

Google uses alt text to:

• Understand the content of the image.
• Index images in Google image search.
• Grasp the context of the page better
• featured snippets with images

Rules for perfect alt text

1. Describe what can be seen in the image, not what you wish were there
2. Include keywords naturally, no keyword stuffing
3. Stay within 80 to 125 characters, precise but complete
4. No filler like "image of…" or "photo shows…", screen readers already announce "image"
5. Decorative images get an empty alt="" (do not leave the alt attribute out)

Good versus bad alt text

Good alt text is a fixed part of our SEO content strategy. We optimise it as part of every web design project.

Alt text audit: how to find missing alt text

Use one of these tools to check your website for missing or empty alt text:

• Google Lighthouse: shows missing alt text directly in the accessibility audit
• Screaming Frog: crawls all images and lists missing alt text
• WAVE browser extension: a visual accessibility check right in the browser

Core Web Vitals and images

The Core Web Vitals are Google's metrics for user experience. Images influence two of the three metrics directly.

LCP (largest contentful paint), the most common problem

LCP measures how long the largest visible element takes to load. In more than 70 percent of cases that is an image (hero image, banner, product photo).

LCP optimisation for images:

1. Preload the LCP image with a link tag in the head
2. No lazy loading for the LCP image
3. fetchpriority="high" on the LCP image
4. Minimise the file size: use WebP or AVIF, quality at 75 to 85 percent
5. Use a CDN: load images from the closest server
6. Inline critical CSS: avoid render blocking stylesheets before the LCP image

CLS (cumulative layout shift), jumping layouts

CLS measures how much elements shift during loading. Images without a defined size are the most common cause.

CLS optimisation for images:

• Always give width and height (or aspect-ratio in CSS)
• CSS aspect-ratio as the modern alternative: aspect-ratio: 16/9
• Use placeholders (LQIP, dominant colour) to reserve the space
• Do not insert images afterwards in a way that shifts the content

Ideal Core Web Vitals values

Read the complete guide: optimising Core Web Vitals.

Batch optimisation for large websites

On websites with hundreds or thousands of images, manual optimisation is not an option. Here you need automated processes.

Command line tools

Sharp (Node.js): the fastest image processing tool for Node.js:

const sharp = require('sharp'); const glob = require('glob'); const files = glob.sync('images/**/*.{jpg,jpeg,png}'); for (const file of files) { const outputWebp = file.replace(/\.(jpg|jpeg|png)$/, '.webp'); await sharp(file) .resize(1600, null, { withoutEnlargement: true }) .webp({ quality: 80 }) .toFile(outputWebp); }

ImageMagick: a proven tool for batch processing:

for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp" done

Integration into the build pipeline

For Next.js projects (as we use them at GoldenWing) we recommend the Next.js image component, which automatically converts images to WebP and AVIF, generates responsive variants, implements lazy loading and produces blur up placeholders.

For WordPress sites there are plugins such as ShortPixel or Imagify that can optimise all existing images in one batch (see also our WordPress SEO guide).

Optimisation checklist for large websites

• All images converted to WebP (and AVIF where possible)
• Maximum image width limited to 2000 px
• Responsive srcset for all content images
• Lazy loading for all below the fold images
• LCP image with preload and fetchpriority="high"
• Alt text for all informative images
• width and height or aspect-ratio for all images
• CDN configured for global delivery
• Automatic optimisation in the upload process
• Regular audits with PageSpeed Insights

Image compression: balancing quality and file size

Image compression is a balancing act: too much compression leads to visible artefacts, too little to unnecessarily large files. In this section we show you how to find the optimal middle ground.

Lossy versus lossless compression

In image compression we distinguish two basic approaches:

Lossless compression:

• Reduces the file size without any loss of quality
• Typical savings: 10 to 30 percent
• Formats: PNG (with optimisation tools), WebP lossless, AVIF lossless
• Ideal for: logos, icons, screenshots, graphics with text

Lossy compression:

• Removes image information that the human eye hardly notices
• Typical savings: 50 to 90 percent
• Formats: JPEG, WebP lossy, AVIF lossy
• Ideal for: photography, background images, hero images

Finding the optimal quality level

From our experience with hundreds of web projects, the following quality levels have proven to be the best compromise:

JPEG and WebP quality settings:

• Hero images and header banners: quality 80 to 85 percent, these images are shown large and artefacts are noticed quickly
• Content images in running text: quality 70 to 80 percent, a good compromise for most cases
• Thumbnails and preview images: quality 60 to 70 percent, at small sizes differences in quality are hardly visible
• Background images with an overlay: quality 50 to 65 percent, when a text overlay or gradient sits on top of the image the quality can be reduced considerably

AVIF quality settings:

At the same visual quality AVIF delivers files around 30 to 50 percent smaller than WebP. The quality settings are therefore a little different:

• Hero images: quality 65 to 75 percent
• Content images: quality 55 to 65 percent
• Thumbnails: quality 45 to 55 percent

Perceptual quality metrics

Instead of relying blindly on percentages we recommend using perceptual quality metrics. They measure perceived quality from the point of view of the human eye:

• SSIM (structural similarity index): values above 0.95 count as visually identical to the original. The goal: at least 0.90 for content images.
• DSSIM (structural dissimilarity): the inverse of SSIM, values below 0.015 are barely perceptible.
• Butteraugli: developed by Google, measures the perceived difference in quality. Values below 1.0 count as imperceptible.

Tools such as Squoosh (squoosh.app) by Google let you compare quality visually while watching the file size. For batch processing we recommend Sharp (Node.js) or libvips, both of which support automatic quality based on SSIM.

A practical workflow for optimal compression

Here is the workflow we recommend for image compression:

1. Prepare the source image: always start with the highest possible quality (RAW or uncompressed TIFF or PNG)
2. Adjust the size: scale the image to the maximum resolution you need (1920 px wide for full width images, for example)
3. Choose the format: photography goes to WebP or AVIF, graphics to PNG or SVG
4. Compress: start at quality 80 percent and reduce step by step until artefacts become visible
5. Check: compare the original and the compressed version at 100 percent zoom
6. Create responsive variants: generate various sizes (320, 640, 960, 1280, 1920 px)

Automated image optimisation in CI/CD pipelines

Manual image optimisation is error prone and time consuming. For professional web projects we recommend integrating image optimisation into the automated build process.

Why automate image optimisation?

In a typical web project images are uploaded by various people: editors, designers, developers. Without automated optimisation the following happens:

• An editor uploads a 5 MB JPEG straight from the camera
• A designer exports a PNG at 300 DPI instead of 72 DPI
• A developer forgets to create responsive variants

The result: inconsistent image quality and unnecessarily large files. An automated pipeline prevents these problems.

Build time optimisation with Sharp

Sharp is the fastest Node.js library for image processing and is based on libvips. Here is an example of a build time pipeline:

A configuration example

A typical setup in a Next.js application uses the built in image optimiser, which relies on Sharp under the hood. The configuration in next.config.js lets you steer formats (WebP, AVIF), quality levels and device sizes centrally.

For static websites we recommend a build script with Sharp that performs the following steps:

• Scan all images in the source folder
• Create responsive variants (640, 960, 1280, 1920 px for example)
• Generate WebP and AVIF versions
• Optimise the quality automatically (based on SSIM)
• Write the results into an output folder

Optimisation inside the CMS

When images are uploaded through a CMS (WordPress, Payload, Strapi), the optimisation should happen on the server:

WordPress:

• ShortPixel or Imagify: compress images automatically on upload
• WebP Express: generates WebP variants on the fly
• Cost: from around 5 euros a month for 5,000 images

Payload CMS (our standard):

• Built in image optimisation through Sharp
• Automatic generation of responsive variants through the imageSizes configuration
• WebP conversion possible through custom hooks

Headless CMS (Contentful, Sanity, Cloudinary):

• These services offer image CDNs with automatic optimisation
• URL parameters control format, quality and size
• Cloudinary in particular offers extensive transformation options

Monitoring and quality assurance

After implementing an automated pipeline you should review the results regularly:

• Lighthouse CI: integrate Lighthouse into your CI/CD pipeline to detect performance regressions automatically
• Bundlesize and size-limit: set size limits for images and let the build fail when an image exceeds the limit
• Visual regression testing: tools like Percy or Chromatic compare screenshots and detect visual changes caused by compression that is too aggressive

Image optimisation for e-commerce: presenting product photos perfectly

In e-commerce images are the most important conversion factor. Studies show that 75 percent of online buyers rate product images as decisive for their purchase decision. At the same time the images have to load fast, because every second of delay lowers the conversion rate by around 7 percent.

Product image requirements by platform

Different sales channels have different requirements for product images:

Your own online shop (WooCommerce, Shopify, Medusa):

• Main image: at least 1200 × 1200 px (for the zoom function)
• Background: pure white (#FFFFFF) or transparent (PNG)
• At least 3 to 5 images per product (different angles, detail, lifestyle)
• File size: under 200 KB per image after optimisation

Amazon marketplace:

• Main image: at least 1000 × 1000 px, pure white background
• RGB colour space (no CMYK)
• At most 10 MB per image (JPEG, PNG, GIF, TIFF)
• The product has to fill at least 85 percent of the image area

Google Shopping:

• At least 100 × 100 px (clothing: 250 × 250 px)
• No watermark, no promotional text in the image
• High quality product photos without distracting elements
• Supported formats: JPEG, PNG, GIF, BMP, TIFF

Zoom functionality and high resolution images

A zoom function raises the conversion rate by up to 30 percent, because customers can see details such as material structure, seams or texture. For a good zoom experience you need:

• Minimum resolution: 2000 × 2000 px for 2× zoom
• Recommended: 3000 × 3000 px for 3× zoom
• Format: WebP at quality 85 percent (reduces the file size by 50 to 70 percent compared with JPEG at the same visual quality)
• Lazy loading: load zoom images only when the user activates the zoom function
• Progressive loading: show a low resolution preview immediately and load the high resolution image in the background

360 degree views and product videos

Advanced shops use 360 degree views that let the customer look at the product from every side. Optimisation matters especially here:

• Number of frames: 24 to 36 images for a smooth 360 degree rotation
• File size per frame: at most 50 to 80 KB (WebP, quality 70 percent)
• Total size: ideally under 2 MB for all frames
• Preloading strategy: load the first 4 to 8 frames immediately, the rest only on interaction

Product videos should be provided as MP4 (H.264) in several quality levels. Use the HTML5 video element with the poster attribute so an optimised still is shown before the video loads.

Schema markup for product images

Structured data helps Google present your product images correctly in the search results. Use the product schema with the following image related properties:

• image: the URL of the main product image (at least 1 image required, up to 5 recommended)
• additionalImage: URLs of further product images
• Use absolute URLs and make sure the images are crawlable (not blocked by robots.txt)

Accessible images: more than just alt tags

Accessibility for images goes far beyond alt text. With the Austrian accessibility act (BStG) coming into force this topic becomes a legal obligation for many companies.

Writing alt text properly

Alt text is the most important accessibility measure for images, but it is often used incorrectly. Here are the rules:

Informative images (photos, illustrations with content):

• Describe the content and purpose of the image
• Be precise but not too long (80 to 125 characters is optimal)
• Avoid "image of…" or "photo shows…", screen readers already announce "image"
• Bad: "Image of team". Good: "Five web designers working together on a project board in the Vienna office"

Decorative images (backgrounds, dividers, ornaments):

• Use an empty alt text (alt="")
• That tells screen readers to ignore the image
• Even better: add the image through CSS as a background-image, then you need no alt text at all

Functional images (linked images, image buttons):

• The alt text describes the function, not the image
• Bad: "Red arrow". Good: "Go to the next project"
• For linked logos: "To the GoldenWing home page" instead of "GoldenWing logo"

Complex images (diagrams, infographics, charts):

• The alt text gives a short description of the content
• In addition: a detailed text description in the surrounding content or through aria-describedby
• Example: alt text "Bar chart: website load times by CMS" plus a detailed data table underneath

Optimising image descriptions for screen readers

Besides alt text there are further techniques to make images accessible to screen reader users:

Figure and figcaption:

Use the HTML element figure with figcaption for images with captions. Screen readers read both the alt text and the caption, so make sure the two complement each other rather than repeat.

Aria-describedby for complex descriptions:

For infographics or diagrams you can point to a detailed description text through aria-describedby, shown either visually hidden or as an expandable area.

SVG accessibility:

SVGs need particular attention. Use the title element inside the SVG for a short description and the desc element for a detailed one. Set role="img" on the SVG element and point to title and desc with aria-labelledby.

Colour contrast and colour blindness

Around 8 percent of all men and 0.5 percent of all women have a colour vision deficiency. You have to take that into account when designing images:

• Never convey information through colour alone: add shapes, patterns or labels. A pie chart with colours only is unreadable for colour blind people, so add labels or patterns.
• Check the contrast ratio: text on images needs a contrast ratio of at least 4.5:1 (normal text) or 3:1 (large text). Use tools like the WebAIM contrast checker.
• Simulate colour blindness: test your images with tools like Color Oracle or the Chrome DevTools rendering tab, which can simulate various colour vision deficiencies.

Animated images and sensitivity to motion

GIFs and animated images can cause problems for people with vestibular disorders or epilepsy. Keep in mind:

• No animations that start automatically: offer a play and pause button
• Respect prefers-reduced-motion: check with a CSS media query whether the user prefers reduced motion and show a static image in that case
• Flash frequency: animations must not contain more than 3 flashes per second (WCAG 2.3.1)
• Provide an alternative: always offer a static alternative or a text description for animated content

Checklist for accessible images

Use this checklist for every image on your website:

• Alt text present and descriptive (or empty for decorative images)
• Captions marked up correctly with figure and figcaption
• Complex images complemented by a detailed text description
• Text on images with sufficient contrast
• Colour information not conveyed through colour alone
• Animations with a pause option and support for reduced motion
• SVGs with title, desc and correct ARIA attributes
• Images scale correctly at 200 percent zoom without loss of information

Image optimisation for social media and OG tags

When you share your website content on social networks, the preview image largely decides the click rate. Open Graph tags (OG tags) control which image Facebook, LinkedIn, Twitter/X and other platforms show when a link is shared. Careful image optimisation for social media is therefore an often underrated lever for more traffic and visibility.

The most important OG image sizes at a glance

Every platform has its own requirements for image size. If you ignore them your image is cropped automatically, often with an unfortunate result:

• Facebook and LinkedIn: 1200 × 630 pixels (aspect ratio 1.91:1)
• Twitter/X (summary large image): 1200 × 628 pixels
• Twitter/X (summary card): 120 × 120 pixels minimum
• Pinterest: 1000 × 1500 pixels (portrait, 2:3)
• Instagram (feed): 1080 × 1080 pixels (square) or 1080 × 1350 pixels (portrait)
• WhatsApp preview: 300 × 200 pixels minimum

A proven strategy for the German speaking market is to create one universal OG image at 1200 × 630 pixels. That format works acceptably on most platforms. For Pinterest and Instagram you should create separate variants though.

Implementing OG tags correctly

The technical implementation happens in the `<head>` area of your HTML page. The following meta tags are relevant for image optimisation:

• og:image, the absolute URL of the preview image
• og:image:width and og:image:height, the exact pixel dimensions
• og:image:type, the MIME type (image/jpeg, image/png, image/webp for example)
• og:image:alt, alternative text for accessibility
• twitter:card, the card type for Twitter/X (summary_large_image recommended)
• twitter:image, a separate image for Twitter/X (optional, if it differs)

According to a study by BuzzSumo, posts with optimised preview images receive on average 2.3 times more engagement on Facebook than posts without. In the B2B field, which is particularly relevant for the Austrian market, professional OG images raise the click rate on LinkedIn by up to 150 percent.

File formats and compression for social media

Different rules apply to OG images than to regular website images. JPEG remains the preferred format here because every platform supports it reliably. WebP is recognised by most crawlers by now but can cause problems with older clients.

The optimal file size for OG images lies between 50 and 150 KB. Facebook recommends a minimum size of 600 × 315 pixels and does not show images below 200 × 200 pixels as a preview at all. Make sure your most important visual content sits in the central safe zone, the outer 10 percent of the image is cropped on some platforms.

Automating social media image generation

For companies in the German speaking market that produce content regularly, automation pays off. Tools like Cloudinary, Imgix or solutions you build yourself can generate OG images dynamically. A template with variable elements such as title, logo and background image is filled in automatically.

A particularly effective approach is dynamic OG image generation with Next.js through the `@vercel/og` library or similar server side rendering solutions. These produce an individual preview image for every page automatically, with the page title and branding elements.

Testing and debugging OG images

After implementation you should definitely test your OG images. Use the official debugging tools of the platforms:

• Facebook sharing debugger, shows the current OG preview and cached versions
• Twitter card validator, checks how the Twitter card is rendered
• LinkedIn post inspector, validates the LinkedIn preview
• Local browser extensions, tools like "Social Share Preview" show every variant at a glance

Keep in mind that social media platforms cache OG images. After a change you have to invalidate the cache actively through the respective debugging tool so the new image appears.

Image optimisation with AI: new tools and possibilities

Artificial intelligence is changing image optimisation fundamentally. What used to require manual work, from compression through cropping to improving quality, is handled today by intelligent algorithms automatically and often with better results than conventional methods.

Intelligent compression through neural networks

Classic compression algorithms such as JPEG or WebP work with mathematical models that pay no attention to the content of the image. Compression based on AI analyses the semantic content of an image instead and decides depending on context which areas can be compressed more strongly.

An example: on a product photo the AI compresses the background more strongly than the product itself. The result is 30 to 50 percent smaller files at subjectively better quality. Tools such as ShortPixel smart compression, Imagify AI and Squoosh (with experimental AI features) already use this technology.

According to an analysis by HTTP Archive from 2025, 23 percent of the top 1000 websites in the German speaking market already use image compression supported by AI. The average saving compared with conventional lossy compression is 38 percent at the same visual quality.

Automatic cropping and focus point detection

One of the most powerful uses of AI in image optimisation is automatic focus point detection. Instead of defining the optimal crop manually for every image, the AI recognises the main subject and crops the image intelligently for various formats.

This technology is particularly valuable for:

• Responsive images, automatic generation of optimal crops for desktop, tablet and mobile
• E-commerce, consistent product presentation despite different original photos
• Content management, editors no longer have to create crops for various formats by hand
• Social media, automatic adaptation to the different platform formats

AI upscaling and quality improvement

Modern AI upscaling tools such as Topaz Gigapixel, Adobe Super Resolution or Real-ESRGAN can enlarge images by a factor of 4 to 8 without producing visible artefacts. For companies in the German speaking market this matters especially when older image archives have to be prepared for high resolution displays.

Beyond that, AI tools offer ways to improve quality automatically:

• Noise reduction without loss of detail
• Sharpening with context aware edge detection
• Colour correction and automatic white balance
• Artefact removal on heavily compressed JPEG images
• Background removal for product photos

Alt text generation supported by AI

Generating alt text automatically through AI models such as GPT-4 Vision, Claude or Google Gemini has reached a level of quality that is sufficient for many purposes. For the German speaking market it is important that the generated texts are grammatically correct and contextually fitting.

Best practices for AI generated alt text in the German speaking market:

• Let the AI generate the alt text in German, translations from English are often clumsy
• Check generated alt text for keywords relevant to SEO
• Add brand and product names that the AI may not recognise
• Use the generated texts as a starting point and adjust them by hand

Cost and benefit for the Austrian market

The investment in image optimisation based on AI pays off for most companies from 500 images a month onwards. Depending on the tool the cost is between 10 and 100 euros a month, while the manual alternative at an average of 2 to 5 minutes per image quickly eats several working hours a week.

A survey by the Austrian Economic Chamber shows that smaller companies in the German speaking market spend on average 12 hours a month on manual image editing. Using AI tools can reduce that effort by up to 80 percent while delivering better results in terms of file size and image quality.

Data protection and GDPR with AI image tools

When using AI image optimisation tools, companies in the German speaking market have to observe the GDPR. Images containing personal data, photos of employees or customers for example, may only be transferred to external AI services with a proper legal basis.

Check before using an AI tool:

• Where are the images processed (EU versus third countries)?
• Are the images used to train the AI?
• Is there a data processing agreement?
• How long are the images stored?

On premise solutions or European providers with servers in the EU offer the greatest legal certainty here.

Conclusion: using images as a performance lever

Image optimisation is the most effective lever for improving the load time of your website. With the right formats (WebP and AVIF), responsive images, lazy loading and a CDN you can reduce the page weight by 60 to 80 percent without visible loss of quality.

The most important measures in summary:

1. Use WebP as the default format, AVIF as progressive enhancement
2. Implement responsive images with srcset and the picture element
3. Lazy loading for below the fold images, eager loading for the LCP image
4. Optimise alt text for all informative images
5. Use a CDN for fast global delivery
6. Set up automated pipelines for batch optimisation
7. Test regularly with PageSpeed Insights and web analysis tools

If you need support with image optimisation or with the performance of your website in general, contact our team. As an experienced web design agency in Vienna we have been optimising websites for maximum speed and the best SEO results for more than 3 years.

Further reading:

• Optimising Core Web Vitals
• WordPress SEO guide
• Responsive design in the glossary
• Our web design services