Image size for responsive pages

I’m trying to decide about image management in Wappler and how they will work on my responsive pages. When I used DWZone extensions it gave me several options for files including a thumb etc.

I would like to upload a few files as possible obviously but I don’t want to bog the pages sown when I load multiple images. My press guy likes 1000px files for press releases but that’s going to be too large for general page use correct?

Any recommendations on files size that works well with responsive page size breaks?

Hello,
You can use the Image Processing tools to resize each of the uploaded photos as many times as you wish and store them into different folders which you can then use for your purposes - blog, site, press release etc.

1 Like

For me I use 5 different images at 5 different image sizes that are each used on one of the 5 different viewport sizes. This is a sample of what I would do for a fluid slideshow that is full width, obviously for other scenarios I will use very different sizes, but I think this sample idea will give you the right idea.

1920px is the largest width and i try and get it to under 135kb whenever possible.
1199px
991px
767px
575px

This ensures that I only ever serve the correct size image at its best possible quality to the right size browser. In my opinion there are not many situation where a person will resize their browser window all that often unless you are a developer or something along those lines. Most people will only have to download the image that was meant for their browser size / device size with my solution.

You could read more about using srcset in order to serve the right image at the right size to achieve an adaptive / then responsive type page, however I do not personally like using srcset currently as I do not like certain things about how it works to be honest.

Otherwise I did add a post here which you can search for about serving images at different sizes which certainly got conflicting views, some people like it and others think I have possibly lost the plot, but I do not mind controversy as I like my solution, it might not be for you, but you decide that yourself, good luck. :smile:

I spent some time this afternoon figuring this out and I really like it! Need to figure out the various sizes for different scenarios but this makes this very easy for me

Thanks for the detailed response. For me the simpler the better but I will review the info you posted and test it in my layouts. I have plenty to learn thanks

No problem, look to be honest mine is by no means a simple solution, that I will certainly admit to, I use it because I have to, my sites are travel industry related and I am not really a web developer, first and foremost I am an SEO company, which basically means that I have to redevelop many peoples website in order to achieve higher rankings.

If I took 2 sites and had the exact same content on each and one loaded in 1 second with 350kb for the user to download it would certainly outrank a site that is 5mb and takes 8 seconds to load. And that is why i spend absolute hours and hours doing all these strange optimisations.

The reason I mention all this is because, if you are developing a backend admin section that you did not want google to even index, well then in that case I would not even bother with something like this, then load times etc. are far less concerning to me. So it depends on your particular use case.

1 Like