Images account for more than half of the total file size on most websites. If you want a fast, user-friendly site, optimizing your images is one of the most effective levers you can pull. Slow loading times not only frustrate visitors but also hurt your Google rankings. In this guide, I will show you step by step how to optimize your images professionally without any visible loss in quality. We will dive into the technical details, compare different formats, and take a close look at Core Web Vitals.
Why image file size is critical: A single photo from a modern smartphone typically has a resolution of 12 to 50 megapixels. As an uncompressed JPEG, such an image easily reaches 3 to 8 MB. If you embed ten such images on your website, that adds up to 30 to 80 MB of data the browser must download. On a mobile connection at 10 Mbit/s, downloading 80 MB takes about 64 seconds. That is absurdly long. Google recommends that the Largest Contentful Paint stays under 2.5 seconds. With uncompressed smartphone photos, that is simply impossible. Even on a fast broadband connection at 50 Mbit/s, loading 80 MB would still take over 12 seconds. Every second of loading time costs you visitors. Studies show that 53 percent of mobile users leave a page if it takes longer than 3 seconds to load.
How image compression technically works: Lossy compression, as used in JPEG, analyzes what the human eye cannot or barely perceives. The algorithm divides the image into 8x8 pixel blocks and applies a so-called Discrete Cosine Transform (DCT). This decomposes color information into frequencies. High-frequency details, meaning very fine color differences between adjacent pixels, are reduced or removed entirely. Similar color tones are merged because the eye does not notice differences in many areas. This saves 60 to 80 percent of the file size without the quality loss being noticeable at normal viewing distances. In the browser, Formidex uses the Canvas API to decode images, process them, and re-encode them at the desired quality level. All of this happens locally in your browser, with no server connection.
Which format for which purpose: The choice of image format has an enormous impact on file size. PNG is a lossless format that preserves every single pixel exactly. This makes it ideal for screenshots, logos, icons, and graphics with sharp edges or text. For photos, however, PNG is far too large: a typical photo in PNG format takes up 5 to 15 MB. JPEG has existed since 1992 and uses the DCT compression described above. At a quality level of 80 percent, JPEG typically saves 70 to 80 percent compared to PNG, with barely visible quality loss. WebP was developed by Google in 2010 and combines the best of both worlds: it supports both lossless and lossy compression and delivers files that are 25 to 35 percent smaller than JPEG at the same visual quality. All modern browsers, including Chrome, Firefox, Safari, Edge, and Opera, fully support WebP. AVIF is based on the AV1 video codec and goes one step further: it achieves file sizes about 20 percent smaller than WebP at the same quality. Browser support is growing steadily. Chrome and Firefox have supported AVIF since 2021, Safari since version 16.
Core Web Vitals in detail: Google introduced Core Web Vitals as official ranking signals in 2020. They consist of three metrics. The Largest Contentful Paint (LCP) measures how long it takes for the largest visible element to be fully rendered. Google recommends an LCP value under 2.5 seconds. On most websites, the largest visible element is an image, typically a hero image or a large product photo. If that image is too large, your LCP score will automatically be poor. The second metric is Interaction to Next Paint (INP), which measures how quickly the page responds to user input. Large images that block the main thread can also have a negative effect here. The third metric is Cumulative Layout Shift (CLS), which measures how much the layout shifts during loading. Images without defined width and height cause layout shifts when they load late. Of these three metrics, images affect LCP the most, which is why image optimization is the most effective lever for better Core Web Vitals.
When it comes to compression, there is a distinction between lossless and lossy compression. Lossless compression reduces file size without losing any image details. That sounds great, but the savings are limited, often only 10 to 30 percent. Lossy compression can reduce file size by 60 to 80 percent. The trick is choosing a quality level where the difference is barely visible to the naked eye. For most web images, a quality level of 75 to 85 percent is perfectly sufficient. Below 60 percent, artifacts often become clearly visible, especially at edges and in areas with fine gradients. Above 90 percent, the file size barely decreases while quality hardly improves. The sweet spot truly lies at 75 to 85 percent.
How to use the Formidex Compress tool: Open the tool and drag your image into the upload area or select it via the file dialog. You can also paste an image directly from the clipboard. In the next step, choose your desired quality level using the slider. Start at 80 percent and compare the result with the original. If you see no difference, you can reduce the quality further. The tool shows you the resulting file size in real time, so you can immediately see the savings. When you are satisfied, download the compressed image. The entire process takes place in your browser. Your image is never uploaded to any server.
Responsive images ensure that every device receives the appropriate image size. It makes no sense to send a 4000-pixel-wide image to a smartphone with a 400-pixel display. With the srcset attribute in HTML, you can define different image sizes, and the browser automatically selects the right one. A sensible strategy is to create three to four variants: 400 pixels for smartphones, 800 pixels for tablets, 1200 pixels for desktops, and possibly 1600 pixels for retina displays. For a typical photo, simply downsizing from 4000 to 800 pixels reduces the file size by about 75 percent, even before any compression. Combined with lossy compression, you can easily achieve savings of over 90 percent. The Formidex Resize tool helps you quickly generate all the sizes you need.
Lazy loading is another effective technique. Images are only loaded when they scroll into the visible area of the browser. This means images below the visible area no longer block the initial page rendering. In modern HTML, all you need is the loading="lazy" attribute on the img element. For images that are immediately visible, in the so-called above-the-fold area, you should not use lazy loading. These images should be loaded with priority, ideally using the fetchpriority attribute. The difference is noticeable: on a page with 20 images where only 3 are in the visible area, lazy loading drastically reduces the initial load time.
An often overlooked aspect is correctly setting width and height in HTML. When the browser knows an image's dimensions before it loads, it can reserve the appropriate space in the layout. Without these attributes, the layout jumps when the image loads later. This worsens your CLS score in Core Web Vitals. Modern frameworks like Next.js set width and height automatically, but if you write HTML manually, you should always include these attributes.
For advanced optimization, it is worth looking at the picture element in HTML. This lets you offer different formats for different browsers. The browser then automatically selects the best available format. This way you can serve AVIF for browsers that support it, WebP as a fallback, and JPEG as the last option. In practice, you create three versions of each image (AVIF, WebP, and JPEG) and list them in the picture element. The browser only downloads the first version it supports. This way modern browsers benefit from the best formats while older browsers continue to work.
Image dimensions themselves also matter. Many web developers upload images at the camera's original size and let CSS handle the sizing. That is wasted bandwidth. If an image on your page is displayed at a maximum of 1200 pixels wide, there is no reason to deliver a 4000-pixel-wide original. Scale the image down to the actually needed size beforehand. For retina displays, double the display size is sufficient, so 2400 pixels for a 1200-pixel display.
In summary, there is a clear optimization strategy: Choose the right format, with WebP being ideal for most cases. Compress at a quality of 75 to 85 percent. Create responsive variants in different sizes. Use lazy loading for images below the visible area. Always set width and height in HTML. Use the picture element for format fallbacks. And do not forget to add meaningful alt texts to your images. With the Formidex Convert tool, you can conveniently convert images to WebP or AVIF. Combined with Compress and Resize, you have all the tools you need, right in your browser and without your images being uploaded to a third-party server.