Images for websites - between aesthetics and loading time

The file format – jpeg, png or gif

For convincing web performance, it is crucial to keep image data as slim as possible without losing impact. If you ignore this, you risk high bounce rates and wasting valuable SEO potential. But don't worry: with a few targeted measures, loading times can be minimised – without sacrificing good design.

Images are far more than just visual decoration. They contribute to branding, control emotions – and are (correctly integrated) real conversion boosters. This makes it all the more important to understand which image formats are suitable for what and which technical settings make sense.

The most common image formats on the web

• JPEGIdeal for photos, good ratio between quality and file size.

• PNGSupports transparency, better for graphics with few colours.

• GIFOld, but still relevant for animations (e.g. in newsletters).

JPEG (Joint Photographic Experts Group) is probably the best-known image format on the web – and for good reason: it offers high compression combined with high image quality. Colours are displayed realistically and even with a reduced file size, the image usually remains clear and rich in detail. This is why JPEG perfect for photos and images with many colour gradients.

PNG (Portable Network Graphics) also compresses effectively, but in a different way: It reduces the number of colours used, which shrinks the file size. The more compression, the smaller the colour spectrum. The big advantage: unlike JPEG, PNG can be Display transparencies – is ideal for logos or icons that need to blend seamlessly into a background. This is why PNG is particularly popular for Graphics with few colours and transparent backgrounds.

GIF (Graphics Interchange Format) is no longer technically up to date, but is still used for simple purposes. It can also display transparency, but is limited to only 256 colours limited to –, which can look unnatural in photos. The big plus point: GIFs can be be animated. That is why they are still popular for small animations, e.g. in newsletters, chats or as reaction graphics.

Resolution, image size & compression – what really counts?

The distinction between file format, image size and file size is essential for web optimisation. While the Format describes the type of file (JPEG, PNG etc.), the Image size Information about the number of pixels (e.g. 1920x1080 px) –, i.e. how large the image is displayed on the screen. The File size on the other hand, shows how much storage space an image actually needs.

Many images that come directly from a camera are oversized. This may look stylish, but is of little technical benefit. For most websites, a maximum width of 1920 px is completely sufficient. Anyone with a higher resolution risks slow loading times – a real problem, especially on mobile devices.

Important: Images should never be uploaded large and then scaled in the CMS. This not only has a negative effect on the display, but also unnecessarily inflates the amount of data. It is better to crop the images beforehand and optimise them specifically for the web – so that the quality remains good and the loading time short.

Best practices for image sizes

• Images for fullscreen header: max. 1920 x 1280 px

• Thumbnails: 300 x 300 px

• Blog pictures: 1200 x 800 px

• Always: same aspect ratio (e.g. 3:2 or 4:3)

Compression – Preserve quality, save weight

The aim is to achieve a smart compromise between file size and image quality. The more compressed an image is, the faster the page loads – but also the higher the risk of loss of quality. Especially with small images, too much compression can quickly lead to blurring.

With tools like Photoshop, Squoosh or TinyJPG the image quality can be reduced in a targeted manner without it being immediately visible. In Photoshop, this works very simply via „Export for Web“. Here you can set the quality (e.g. to 60 %), select the format and define the final image size.

Important: Anyone scaling images should ensure that the Maintain aspect ratio – otherwise it will quickly become distorted. Also: Consistency is key! If you're constantly jumping between formats and aspect ratios, you'll quickly look unprofessional.

Tools & tips for compression

• PhotoshopExport „Save for web“

• TinyJPG / TinyPNGfurther compression without visible loss of quality

• Image ratio: best to keep 3:2 or 16:9

• Beware of scaling in the CMS – better adapt beforehand!

File names & Alt texts – The SEO boost

Search engines cannot (yet) see what is on images. They rely on meta information – especially on the File names and the so-called Alt attribute. If you work cleverly here, you not only improve your ranking, but also make your website more accessible.

The rules for SEO-compliant file names are simple, but are often ignored: no spaces, no umlauts, no special characters. Instead: short, clear terms with hyphens that precisely describe the image content. The alt attribute should also be filled sensibly – not only for SEO reasons, but also for users with screen readers.

So „IMG_4589.jpg“ becomes „vegan-brunch-düsseldorf.jpg“. Sounds completely different, doesn't it?

SEO tips for image data

• File namesmall, with hyphens, without umlauts/special characters

• Alt tagshort, descriptive texts („Breakfast plate with avocado“)

• Avoidcryptic camera designations or empty alt fields

• Also think about accessibility – Pictures are more than decoration

Good images, short loading times – no contradiction

If you want to be visually convincing, you don't necessarily have to put up with huge amounts of data. With the right combination of image format, resolution, compression and SEO, images can unfold their full charm – without Google or the user bouncing off. Stay flexible, keep your content technically clean and make your web presence as light as it is convincing.

And if you need help: 2bu design is at your side. Whether it's image optimisation, Divi websites, WooCommerce, corporate design or social media – helps brands to convey their message clearly and strongly.