: Delivering the optimal image experience to all from website regardless of device I was deeply involved in other work and out of the blue, the co-owner of the site informs me that the website

@Angela700

Posted in: #Images #Links #ResponsiveWebdesign #WebsiteDesign

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?

Vote Up Vote Down

Login to post a comment!