Large background images causing lag while scrolling

HTML & CSS
1

The website I am building has 4 large background images that take up the entire height and width of the user’s browser. They are implemented as CSS background divs. The problem is, when scrolling on larger screen sizes, it is very laggy and choppy. Scrolling between these images is done automatically via JavaScript when the user presses a button, so this is part of the core functionality of my website and I must find a way to prevent lag.

So far, I have tried preloading the images via JS and converting the images from PNG to JPEG (increase compression and decrease quality) server-side. Neither of these worked.

The minimum height of the image can be 630 pixels. How can I prevent lag while scrolling between sections?

Here’s my code:

CSS:

2

Well you omitted your CSS, although I’m not sure we need it anyway!

What size are your images - in px width/height and in KB?

3

Hi @newsite and a warm welcome to the forum.

Have you tried converting the images to the latest WebP format which is now recognized by all browsers? The difference is usually about a 50% file size saving?

There are many online sites that can convert the images.

Looking forward to see if the conversion solves the problem although JavaScript could be the bottleneck.

4

That is somewhat inaccurate. It works with modern browsers except Safari. See https://caniuse.com/?search=webp

2 Likes
5

Many thanks for the information about Safari, I’m most surprised:)

6

off-topic
I’ve lost the article now, and it may not be entirely accurate, but it was suggesting that Safari is falling behind in a number of ways.

7

Have you tried native css scrolling to see if it behaves better than js (it should do).

Here’s an old example.

Perhaps it would help if we could see the page or a codepen demo to see where the lag is coming from.

1 Like
8

I’ve just tested a webpage using Safari on my iPad and the WebP images are displaying OK? Does that mean that Caniuse.com is not up to date?

9

I believe it mentions that it has partial support depending on os.

Partial support in Safari refers to being limited to macOS 11 Big Sur and later.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.