Background images bogging down load times - please help optimize!

Support
#1

So I have some background images on the main home page of my website:

It seems some of the background images I am using are too large and bogging the websites load time down

So how can I reduce the image size, but also not have it zoom in and look pixelated?

I’ve added my login so you can help really look under the hood, I’ve exhausted what I’ve been able to figure out why it’s not working for me.

Thank you!

#2

If you are on WordPress version 5.8, you can now use WebP instead of JPG. That will significantly reduce your load times. Lots of easy ways to convert your images over.

#3

Oh wow, that’s awesome to hear!

I do have WP 5.8.1

What do I have to do to implement this WebP with all of my current images in my library?

Would/should I still need to use Hummingbird and Smush Pro optimization plugins for my images?

Would I need to disable those plugins entirely to make this WebP work better?

#4

Sounds like you need Smush. It’ll optimize those large images for you.

#5

I am using Smush Pro and it has helped a lot.

But I have a couple of background images that it can’t resize because of the way the background images are layered.

So I need to manually target these 3 images on my home page. But I need to do it so that it isn’t making them too small and pixelated with a lot of wasted background

But this WebP really sounds like a new and updated way websites load and I’d like to try and explore that as well or in place of using the plugins.

#6

Smush Pro can convert your images to WebP. For those 3 images you need to handle manually I’d check how large you need them to be max, i.e. 1200 pixels wide or whatever it is and manually resize the images.

#7

Here’s how you do it in Smush Pro: https://wpmudev.com/docs/wpmu-dev-plugins/smush/#local-webp

If you use the Smush CDN then it’s even easier.

#8

So the 4 background images in question are only:

Purple flower header - 1920 × 1080
Flag - 1080 × 864
Pink octopus - 1024 × 576
Wax Seals - 1920 × 1080

They all seem to be fairly sized well other than the first background of the Purple Flower entitled “new-background.jpg” and the wax seals at the very bottom being a bit large, which I’ll reduce both now.

But why am I still getting loading issues for these images on the home page?

Should I put them in another layer besides “Background” as I currently have them now?

What would be the ideal size for these background images to scale properly on desktop and also mobile when used as background images with a parallax effect?

I went with larger background pictures to give me a cooler parallax effect, but it seems that’s one of the things that’s been bogging down the load times.

#9

I made all 4 of those images 1100x470ish

I also uploaded them through the main Library and let Smush Pro do it’s thing properly and then selected them as background images.

I took down some of the magnification and thus lost some of the parallax effect, but hopefully this significantly increases my website’s loading speed.

Thoughts?

#10

Hey John,

Regretfully, we can’t provide in depth support for website optimization including image optimization. You can check out the image optimization guide in our article here https://theme.co/docs/how-to-improve-site-performance.

If you need us to optimize your website, you might want to consult with our Elite team here https://theme.co/elite

Thanks.

#11

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