Does anyone know if it possible to turn off a background image when a particular breakpoint is reached? I have a large background image which is very slow to load on mobile devices and I would like to replace it with a plain colour at 480px width and below.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sure. Select None from the BG Image dropdown at the breakpoint you want to remove it from.
Hope this helps,
Joe
On 8 Jun 2015, at 09:26, tonyhatt email@hidden wrote:
Does anyone know if it possible to turn off a background image when a particular breakpoint is reached? I have a large background image which is very slow to load on mobile devices and I would like to replace it with a plain colour at 480px width and below.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
I have a large background image which is very slow to load on mobile devices
And background images are meant to be just that - so compress the hell out of them to get them small for everyone,
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
What is the best way to check/test this? I’m a bit concerned about my load times on this site. There is a slideshow on nearly every page, and that can’t be changed. But I want to be sure my background image isn’t contributing to the problem. I reduced my background image down to 355k, but it still seems to be slow to load.
I’ve checked http://www.webpagetest.org/ and it’s telling me the site is 20 mb, but I don’t know if that’s just the dhc portion, or everything on this domain. It’s not giving me very good results, and I’m wondering if the AmazingSliders are the problem.
Thoughts?
And background images are meant to be just that - so compress the hell out of them to get them small for everyone,
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
I’m wondering if the AmazingSliders are the problem.
How many images in each slider X average file size = howbig?
You are always taking a chance - especially if you have more than 1 per page - of slow load times and departing visitors because of it.
hairypaper jpg is about 350Kb but add that to all the other images on the page and it is getting pretty heavy.
El%20Moro%20Shootout%202015%20(2).png is 0.5Mb - does it need to be a png?
Similarly family%20&%20DHC%20032.png is 420Kb
Now they get scary Heritage%20Train%202015%20(10).png is nearly 800Kb
Watch these space characters in your file names.
In fact there is nearly 8Mb in the Heritage Train one alone!
Cant see that you need any of these to be png - that will save a bucketload straight away.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Good thoughts, David. I will take a closer look at those things. It looks like I didn’t optimize all the pics before I imported to AmazingSlider. And I was sure I got rid of all the spaces in the filenames… Hmmm. I will double check. I appreciate you taking a look!
Sidenote: Loving the snappy new forum! Way to go softpress!!!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Thanks Joe. Why didn’t I think of that!!!
Tony
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi David,
Just now looking under the hood. There is one particular AmazingSlider that seems to be the big offender, and it’s the one at the bottom of the homepage.
The spaces in the filenames are on me. For all the other slideshows on this site, I cropped all the images beforehand to specific dimensions and they are all the same dimensions. For this slideshow, there are vertical and horizontal pics so the same dimensions doesn’t work.
I asked AmazingSlider to make the slideshow “transparent” and it converted all the pics to png instead of just making the background itself transparent. There may not be another way around this.
Doty
freewaytalk mailing list
email@hidden
Update your subscriptions at:
After re-thinking things, I decided to crop everything square, thus eliminating AmazingSlider’s desire to turn all the images into a png to “create” a transparent background. I think this should eliminate the most glaring offenders. Thanks for telling me where to look!
Care to take another look?
Next time, I might try to utilize AmazingSlider’s “custom background” feature. If I set it as the same background of my website it might work. It also might look horrible if it’s not aligned perfectly!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
It is better however I am not sure why you need hairy paper to be so tall
Dimensions1953 × 2886
Does it not repeat well vertically?
As to the slideshow which has 26 images in it - averaging approx 180Kb each
26 x 180 = over 4.5Mb = a lot!
Total page size: 6.84MB
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
David,
Thanks for helping me understand how all this is working together and impacting load times. I’ve made a few changes to other pages based on what I’m learning.
I did try cutting down the dimensions of the background image, but I had trouble with the bits repeating in a way that looked random. To get it to look right, I had to create a pretty big sliver that was actually larger than my original. I’ll keep messing with it as I have more time.
Doty
freewaytalk mailing list
email@hidden
Update your subscriptions at: