2

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?

  • 2
    It kind of sounds like you're reinventing responsive images. It seems like a spot for srcset and sizes, then use a polyfill for old browsers, and use a full-size image as fallback for the non-JS old browsers. I know you probably tried something similar already, but I think that's the best way to go. – Andrew Myers Feb 15 '17 at 0:21
  • I already have this implemented but the issue here is that the image source size for the desktop version is the HQ image (800x600 pixels) and the image source size for the mobile version is 1/2 size (roughly 400x300 pixels). I use CSS to scale both sizes down to fit every guest, but some guests on mobile seem to load the page thinking its full size image but they see pixelated content because the image size limit is 400x300 on mobile and their devices are high res but at the same time I don't want to inconvenience guests by forcing them to the desktop page. I'm baffled. – Mike Feb 15 '17 at 2:43
  • That's really vexing. This technology was invented, like, 3 years ago, so it has to work. (Can you tell I'm young?) How could this go wrong? Maybe something to do with misreporting the pixel device ratio? Are there enough of these errors that it's worth ruining the experience for everyone else? – Andrew Myers Feb 15 '17 at 3:41
  • Related (duplicate?): webmasters.stackexchange.com/questions/103746/… – MrWhite Feb 21 '17 at 0:54
1

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

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

  • I already implemented something similar already for my desktop site in the past. I'm afraid if I take this approach on both the desktop and mobile site and use the same HQ image size and only CSS to scale it then more bandwidth usage is required which could cost some mobile guests big money. Thanks for the thought tho. – Mike Feb 15 '17 at 2:38
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.