Optimization for mobile devices background images

olimana · September 2019

Hello,

here is used a large background image in the header https://caviar.net.ua/uk/produktsiya/ikra-rosijskogo-osetra/

But how to make in the mobiles loading of a smaller version of the image that was created when this image was uploaded?

The task is to speed up the page loading in the mobile version. I see that the largest version of the image is loading.
What can you recommend?

Bryan · September 2019

Hey,

this is a basic section background and it will load the same on mobile device, we cannot do anything about that. It is only 150kb so I would not stress about that unless you want a perfect speed score for your client. You can also upload 2 versions of the background to your media, one for mobile and one for desktop and then using simple CSS change which background is loaded on which device.

thanks

olimana · September 2019

OK thanks.
I thought maybe in the theme settings I can click something to load a smaller image in the mobile version. Or maybe there are plugins that can do this. Because I took only one example, background images do not always weigh 150 kb, especially in the case of PNG.

Bryan · September 2019

If you want, I can help you with this CSS because it is very easy and you will be able to reproduce this effect for your website anytime.

What I need is this:

1. Send me an URL to both background images, the desktop version and mobile.

2. Add a custom class to the section. Edit the section and scroll down to add a class name, you can basically type in anything like "potato".

3. Remove the current background image and leave it blank, just select a color.

You can set this up on a test page with one section. Just send me the link to this page.

cheers

Sloanedge · September 2019

Hey Bryan,

Hi I have a slider revolution on my website "loveride.org" and the slider works fine on a desktop even is responsive when testing. But when I try to view it on a tablet or a mobile phone it doesn't work what should I do?

Bryan · September 2019

Sloanedge

Please check if maybe you have disabled the slider on mobile screens? Also, it is best to download another revolution slider, best to do it thru "betheme>pre-built websites" to check if this is a plugin issue or it is just the current slider.

Although this is very weird because I can see the slider fine on mobiles: https://prnt.sc/pb6f3f

Maybe it is just your mobile browser cache?

thanks

Sloanedge · September 2019

Hey Bryan,

That one that you are seeing is just so it can work that is a static image that is just resized.

I have a more responsive one within slider revolution that replaces the elements to fit the screen better but it wont work on mobile or tablet.

This is the only way that it would work for me on mobile devices.

In test it works fine so on a desktop making the screen small but on a iphone or ipad it wont work.

Bryan · September 2019

In this case, there must be some errors in the slider you have created or some options you have checked to disable it on mobiles. You should check it out or try to create a new slider. If other sliders work fine, then there must be something wrong with tha particual slider.

thanks

olimana · September 2019

Hi, Bryan

1. the desktop version url("https://caviar.net.ua/wp-content/uploads/2018/10/bg-os-2.jpg")

and mobile url("https://caviar.net.ua/wp-content/uploads/2018/10/bg-os-2-960x750.jpg")

2. This is test page https://caviar.net.ua/en/test/ and this is class .bg-test

3. Ok

But the problem is more global and relevant for all sites on your theme. Download speed meters not only google page speed, but also gmetrix give low rating. And one of the main reasons is not optimized images, although I use the plugin from TinyPng. It used to be enough, but now my clients complain about it to me. I see that the situation on your demo sites is somewhat better and I'm trying to understand how to solve this problem in general.

Thank you

Bryan · September 2019

olimana

Try this css

.section.bg-cover {
	background-image:url(https://caviar.net.ua/wp-content/uploads/2018/10/bg-os-2.jpg);
}
@media (max-width:780px){
	.section.bg-cover {
	background-image:url(https://caviar.net.ua/wp-content/uploads/2018/10/bg-os-2-960x750.jpg);
}
}

We cannot provide help with SEO and website optimization. You would have to figure that one yourself or hire somebody to do it. As I said before, there is too much things that can influence the score. You also have to remember that this is wordpress and betheme is massive so the score will never be perfect. For that you would have to create a custom website.

thanks

olimana · September 2019

Thank you,
I understand that optimization for the WordPress is not an easy task and always individual.
I just thought you might have ready-made cases of successfull using some actions and plugins.

Pablo · September 2019

If you will use only basic plugins and keep proper seo behavior then the score will be not that bad.

Unfortunately, SEO is individual and we cannot help with it at all - we can just give some tips.

If you have some other questions, feel free to ask.

Thanks

Optimization for mobile devices background images

Comments