Hi all, my test site is here (desktop view only): http://stormtempweb.com/stormnew/2/print/
For some reason the main blue background image which is utilised via the Foundation 1 column stack always loads large and then jumps into it’s correct size, is there any way I can avoid this ugly jump?
Your BG image is off the planet huge in kb - 3.4Mb and should be about 200k. Also all of the scene items are pretty big too. I suspect that the images came from a scene creator pack and are all 300dpi. If so change to 72dpi and optimise jpgs in JpegMini or PNGs in ImageOptim.
PS you can use XnConvert to change dpi.
PPS There is no need for the BG image to be a PNG so convert it to jpg and save loads of kbs.
Ah yes I haven’t optimized anything yet as I’ve just been working on the layout and design. I’ll optimize to see if that helps. What is the optimum width would you say for a full background image to still look sharp on all screens? Currently I use 1500px width but is that too big?
I’m on my iPad right now, and it appears to be to wide for that screen size. I can scroll left and right.
I use 2560px wide bg image because it is reasonable to assume that a user with a (now common) 2560 size screen will view it at full screen. If the image cannot be optimised below about 250kb, then I choose a different image.
Very few people browse in full screen. Most frameworks like bootstrap 4, or foundations 6 still set a maximum width for usable content.
The default container max-width for bootstrap 4 is 1200px for the XL screen size. The Jumbotron or hero page can be larger, but since the real content tends to be capped, most folks use the extra screen real estate for having additional windows open.
Jumbotron’s and hero background images are usually just that a background so it’s a judgment call on speed vs. image quality.
A large sharp image may be great for the person using a large retina in full screen, but it’s going to slow everyone’s loading.
Some resources for screen sizes and browser sizes:
wow that seems really big, I’ll give it a go though thanks Webdeer.
I think if you convert the PNG BG image to a jpg and then perhaps blur it a bit it will end up being much smaller. As it is a BG image it doesn’t really need to be sharp and images such as wood can often end up being too big because of all of the detail in the wood texture. Slightly blurring the BG image will also make the other images pop out of the screen a bit.
This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.