Lazy loading of images

Image loading is one of the biggest factors affecting the speed of a website. But at the same time, they are an essential part of a website. How do you best handle images? With Lazyloading and optimization. Read on for the tips!

Images or pictures on a website add a lot. From persuading to a sale, to making a point clear that would otherwise take half a page of text. A relevant image that adds something also increases the time a visitor spends on a certain page and therefore converts better. Unfortunately, some things can be overlooked when using images on a website.

Optimizing images and resizing

Optimizing images and media is an item that can also depend on your website. If you are using a theme it might have a special preference regarding the dimensions of an image. We always recommend to crop and edit images locally on your computer. Not on the website itself. This often creates unnecessarily large files with illogical names. Which at some point will make you lose the overview.

Cropping or changing the pixels of an image can of course be done in Photoshop or a paid program. However, you can also just use Paint 3D in Windows. It is up to you to choose what to crop with. For most images we use either 900 pixels width or 1204 for the larger images that need more detail. Next you can use the website tinypng to compress the image. This compresses the image without much loss of quality. And brings an image of 1 MB quickly down to a much smaller size. One thing you can also take into account when creating images or photos for products is to pick a neutral background. For example, grass blades often prevent an image from being as small as a neutral background such as a white wall.

So try to be a little creative with this when creating the photos that will appear on your website hosting.

As long as you have under 100 KB per image, you're usually fine. More than that and you will notice that the loading time will decrease. Especially for mobile devices, this will be a nuisance via, say, a 3G connection. Not only is this important for the ease of use of your visitors. But also for search engines like Google, Bing or DuckDuckGo. They also take this into account.

Lazyloading of images, what is it?

Image lazyloading refers to the loading of images when it only comes into view for the user. In most cases, this is done with a piece of Javascript code. This code language also takes care of many other things that make a website dynamic. So when an image is actually needed, it is loaded.

This has the great advantage that the initial loading time of a complete web page can be much smaller. Smaller web pages mean a faster loading time on almost all devices. So this can have a big impact.

If you have a portfolio website for your photography for example then this is almost indispensable to apply. Especially large images that need to be as good as possible are so much better to load than everything at once.

Lazyloading in WordPress

With the latest major core update of WordPress, this is baked into the core by default. This means that no extra plugin is needed for this as was the case before. This has the big advantage that no external parties or code is needed anymore to realize this. Less plugins also means that a WordPress website can be loaded faster and is less prone to security issues. Plugins need to be updated to keep a WordPress website secure. Obsolete plugins can be an entry point for malicious users to penetrate and control your website.

If you don't want to have to worry about this anymore, take a look at our managed WordPress hosting packages. We will take care of all these issues for you. So you can focus on what makes your website successful!

If you have an extra plugin installed for this purpose you can remove it with the latest update of WordPress. This can cause conflicts between the core and the plugin. All these plugins are therefore no longer relevant with the latest update of WordPress hosting.

Lazyloading of images in other content management systems

Lazyloading of images in other Content Management Systems or CMS can be achieved with a plugin or adding this to the code yourself. There are several online tutorials on how to apply this for your website. Often this is a useful addition to your website for all the reasons mentioned above.

Have you already applied lazyloading to your website? Do it now to make the user experience even better!