Mobile Desktop images - Post ID 276356

User 2393299 Photo


Registered User
62 posts

Hi,

I am looking to speed up loading times on mobile app and I was thinking to save same image into 2 different sizes but different names and use one for mobile and one for desktop. Maybe even add ipad size.

That way google bot would not see it is duplicate.

But what I am struggling to do is to insert different images for mobile and desktop because they update all at the same time.

I was playing with classes and different ID names but still same result.

How to achieve it?
User 2699991 Photo


Registered User
1,734 posts

Cintaku wrote:
Hi,

I am looking to speed up loading times on mobile app and I was thinking to save same image into 2 different sizes but different names and use one for mobile and one for desktop. Maybe even add ipad size.

That way google bot would not see it is duplicate.

But what I am struggling to do is to insert different images for mobile and desktop because they update all at the same time.

I was playing with classes and different ID names but still same result.

How to achieve it?


Start at mobile end first, (left of the lowest breakpoint), insert image placeholder where you want it to go on your page, select "local image" select your small image from resources. Move on up to wherever point is you want to place larger image. (create a new breakpoint if necessary. select the image, click "changer, select larger image from resources,, BOOM in goes larger image, move on up more if you have another on, & do the same thing
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com
User 2699991 Photo


Registered User
1,734 posts

here is a short video in-case you still have trouble
https://youtu.be/tov16otN1TQ
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com
User 2393299 Photo


Registered User
62 posts

This is weird,

Now it works!. Maybe perhaps because I was doing it from right to left sequence instead from left to right didn't realize it mattered. . .

Can you elaborate on your "strategy" on choosing different image sizes? For example would 400px be the good breaking point for 2 different sizes or are you using totally different strategies?

User 2699991 Photo


Registered User
1,734 posts

Cintaku wrote:
This is weird,

Now it works!. Maybe perhaps because I was doing it from right to left sequence instead from left to right didn't realize it mattered. . .

Can you elaborate on your "strategy" on choosing different image sizes? For example would 400px be the good breaking point for 2 different sizes or are you using totally different strategies?



What's weird ?
RSD WORKS from "mobile first" if you do anything the other way round of course the styling when you change anything at lower breakpoints, carries UPWARDS

Personally I don't have a strategy that's fixed because it depends on many things, but one needs to consider the maximum width for viewports, so an image 400px generally wide suits the lower ends (& you can fix the actual width as you want. once you get beyond viewport 400px then the image will start to have white space around it (assuming it's on its own) so a medium image is inserted replacing the smaller image, this medium image I generally set to 600 px and so on and so on.

What you need to be doing is practicing on a temporary new project, play around with different image sizes, work with it until you are happy,, then you can go to work on the real project easily without fear of messing it up. After a while one get's a sort of second sight, which sort of allows one to be able to know what sizes are best for what image

Glad you got it going.

Wayan
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.