Delivering the optimal image experience to all from website regardless of device

Question

I was deeply involved in other work and out of the blue, the co-owner of the site informs me that the website isn't 100% right for all people. While he isn't technically inclined compared to me, this is what happens.

When I made the site, I made a desktop version (for large-resolution screens, particularly desktop computers) that shows the photos people want to see at normal size. I received no complaints there.

I then added a mobile version to the site with pictures sized down to fit the user's screen without the need to side-scroll. This also complies with google's mobile usability standards.

A complaint I received was that the picture quality was bad. I gathered that this is true because a guest with their older generation phone used the mobile site and told a friend about the picture then the friend with a brand new phone saw the same thing but in a lousy picture format.

Now the thing is on the desktop site, the picture is original size. On the mobile site, the server shrinks the picture to half-size before it is loaded.

I was also told that people on the mobile site used the download button often to receive the original picture (which is the intent of the button) but people found that inconvenient.

So now I'm left boggled and I have some options all with negative consequences.

option 1

Make the picture files the same for both sites. If I do this, I'll use more server bandwidth, and clients will use more of their bandwidth and costs go up for all.

option 2

Force users that are not on low-res mobile devices to the desktop site. If I do this and a user is using unusual web browsers, the detection may not work as intended.

option 3

Before loading the page, prompt the user to use the desktop site if their device can handle desktop screen resolution. If I do this, it will be an extra click/tap a user has to make to get to the picture.

option 4

Write as text the URL to the high-quality picture from the desktop site next to the picture on the mobile site. The only problem with this option is that people don't like to read when all they want to see are pictures.

option 5

Provide an active link to the high-quality picture from the desktop site on the mobile site. The problem here is that if I made the link with the anchor tag, google will think my site will be less mobile friendly, and if I use a button to make the link (form post) then the page will look ugly on smaller devices because I need to make the link descriptive and buttons don't do well with CSS.

I have tried media queries to load the picture to optimal size for all users yet I get that one complaint once every say 5 months about the picture not being perfect. I also tried javascript too.

I do know how to code but I'm not looking for coding ideas or plugins. What I'm looking for is the best approach to my situation. what would you suggest I do and why?

Answer 1

Bootstrap class="image-responsive", will that work?

https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

Answer 2

Getting images to display well on different devices requires responsive images. That is preferred to having multiple "sites" for different types of devices. It doesn't require big bandwidth changes. The key is to use responsive images so that the CSS and browser work together to discover the device type/resolution and the available bandwidth and then deliver an image sized accordingly. Fluid web design with grids will help keep things together.

I would not use only 1 image size and quality. That actually makes mobile browsers work harder as they have more to download - process - display. By using responsive images you will maintain quality on different devices.

Remember that you do not have to make all images 'high quality'. The human eye cannot distinguish between most adjustments in resolution. For example, taking a high resolution image of 600 pixels width and then scaling it down (maintaining the aspect ratio) to 80% of the quality would produce no change to the human eye on standard devices and yet that file would be 14% of it's original size. So consider lowering the resolution of your images to a balance of size and quality. Images will look good to customers, they and your web site will load faster and that will save bandwidth.

You can use the <scrset> and <size> attributes of the <img> tag to have your pages display different resolutions of your images. And there are ways to dynamically manipulate images and automate that sizing with common languages such as JavaScript. Here is an article explaining in more detail the tags used in responsive images.