On a website with three different sizes how should I use the background image?

Responsive Flexible Layouts
1

Hi, I’m doing my company’s Hype site. I am very happy with the result. For better site performance, do I need to know if I should use 3 different sized images for the background of the site or use the same image in the three versions I am making? (Desktop, Laptop and mobile)

2

Hi Gustavo:

For large images, this might make a difference. My recommendation is to turn off preloading for larger images, and use separate versions for different layouts. For smaller images (not background images), then you can just do your resizing between layouts.

I don’t think it is entirely necessary to use separate images for Laptop / Desktop, since both will be about the same size – but up to you. Just make sure you turn off preloading for these large images so they they are not preloaded on all device sizes.

3

How do I disable preloading of these large images so they are not preloaded on all device sizes?

4

Select the image, and uncheck Preload in the Resource Library.

1 Like
5

Wow, that’s quick. Thank you very much!!!

1 Like
6

I’m almost done with the site. I would like to put here the link for you to give your opinion. It’s a very different site from the normal ones. A creative agency here in Brazil. And the hype is going very well in everything.

7

Looking forward to it!