Product Card images blurry in smartphone viewport
Autor: Malcolm P.Images added to Product Cards are very blurry when previewed in the smartphone viewport, in which they appear above the title and description. This occurs whether a large or small source image is used.
The images are sharp in all other viewport resolutions where the image appears to the side of the description in the product card.
I have not yet determined whether the same blurring occurs when viewing a live site on an actual smartphone, or if only happens in the WX5 preview of that specific viewport.
I have worked around it for the moment by adding a further breakpoint at 320px, but the default behaviour with the image above the title and description at smartphone resolutions would be preferable as it would allow more space for the product description at that size.
Can anyone confirm or advise further, please?
Hello.Unfortunately, you are right.This sometimes happens. This question has already been raised earlier on the forum.So far, no normal solution has been found, as far as I know.
Take a look at my demo site from video tutorials. Do you see the problem you described there?
Autor
Aleksej, thanks for your comment and also for the link (I had previously searched for any other reports in the forum but not found any).
I don't see the issue on your link, either on the PC or on my mobile, probably because your product cards have the image at the side and are therefore not in the full 'smartphone' viewport.
I have attached three images of the same product card to show what I am seeing; one at a standard 480px viewport, one at an additional 320px viewport, and one at the default 'smartphone' viewport.
The image is getting rather too small in the 320px one and I would prefer mobiles to default to the view in the 'smartphone' example as that gives more room for the description. The client is already complaining that it's too difficult to scroll the description in the card in the 320px view on a mobile, but the image is far too blurry in the smartphone view to use that instead.
The source image is perfectly sharp otherwise and it makes no difference whether I use a large file and allow WX5 to resize it as needed or size it right down beforehand to reduce the need for any further resizing.
"I had previously searched for any other reports in the forum but not found any" - It is in Russian.
"probably because your product cards have the image at the side and are therefore not in the full 'smartphone' viewport." - I think the same.That is why he wrote earlier: "So far, no normal solution has been found".
Unfortunately, I can not advise something that will help to solve this situation. Perhaps the developers will be able to.I sent them a request.
Autor
Aleksej, your English is infinitely better than my Russian!
Thank you for escalating that to the developers; the blurring renders the smartphone viewport pretty much unusable as it stands, at least in that specific application.
Malcolm
Can you attach a copy of the original image as used in your example?
(I have tried to reproduce your "blurred image" problem with my own website but I can not)
PS please be assured that adding 320px resolution will not affect the vast majority of mobile phone users
Autor
Thanks Esahc. Original source file for the image in the previously uploaded samples attached herewith.
Malcolm, I have used your image exactly as you describe in my shop and there is unfortunately no blur.
As the problem is evident on the desktop when emulating a mobile, is there any chance you have set the display settings to other than 100% on your PC? If you select an alternative browser (eg firefox or chrome) is the blur visible there as well? Can you make use of the QR code to send the preview directly to your mobile?
When I replaced the images on my PC I found I needed to force a preview refresh (ctrl+preview), can we assume you have done this to update all pages and all versions of each page?
Sorry I could not have been of more help.
Autor
Esahc, unfortunately the preview images are still blurry here, so I'm rather stumped at the moment.
The display settings are 100% on my PC, as always. I have also tried on a higher resolution monitor and on my laptop: no difference.
I have tried Edge, IE and Chrome alternative browsers as suggested; Edge and Chrome will not resize the page sufficiently small to trigger the smartphone preview, and the image preview is equally blurred in IE as the default WX5 previewer.
Using the QR code, the preview is still equally blurred on my mobile.
A forced preview refresh (ctrl+preview) makes no difference.
The issue only appears to arise with images on the product cards; images elsewhere on the site, e.g. the home page and the gallery, are unaffected and appear perfectly sharp in the smartphone preview. Might that perhaps offer a further clue?
You have been as helpful as ever, thank you, even if only in eliminating the most likely causes of the issue.
Many thanks.
Hi Malcolm
I attempted to reproduce the issue as well on a new project without success I have to say.
This issue seems very peculiar, but it could be worth analyzing properly if the result really is this blatant. Are you by any chance able to reproduce this on a new project? Or does this happen only on a new one?
If this happens for you on a new project too, I would like to ask you to send said project here to me for analysis.
I will perform a few tests on it in order to understand what could be going on.
If you cannot reproduce this on a new project, send me the one you're currently working on. Please do set your topic to private if needed.
You can use the service https://wetransfer.com/. Select the link generation and paste it here, so I can download the file. If the file is too big, please don't include the folders preview and backup files when you create your IWZIP file with WebSite X5.
Keep me posted on this
Thank you
Stefano
Malcolm - one last thought (for now)
Can you change the name of the image, then remove the existing image, then add the image back with the new name?
I have occasionally been caught when WX5 "makes a decision" to not replace an image in the xml file when the replacement file name is the same. For me this has meant a faulty image in preview remained faulty even after replacement.
After replacing the image (with the same image by a different name), do a ctrl+preview. Did that fix the issue?
Autor
@Stefano, it may be a few days before I am able to test this out in a new project as I have some print orders and other work I need to get out this week, but I will investigate further as soon as I have some time to spare and will report back then.
@Esahc, I think this is unlikely as I had already tried replacing the original source image with both larger and smaller versions, both having slightly different filenames, but I shall try again to be certain.
Thank you both meanwhile.
Malcolm
Autor
I managed to find a few minutes to test this out quickly.
I still get the same blurring in both the existing and a new project whatever images I use, even one of my own which I know is sharp.
Replacing the original image with another, flushing with a ctrl-preview then replacing the original image again (+ ctrl-preview) has no effect - both the original and the replacement images are still blurred.
The same problem occurs with a new test project created from scratch with only the home page (unedited) and a shopping page, title 'Courses'.
Attached is Test Project.zip, which contains:
New test project as above
3 x original source images used in project
A screengrab of the smartphone preview
If you need anything more detailed or sophisticated than this for investigation, please advise and I'll try and put something else together ASAP.
Thank you.
Autor
Hi Stefano,
As an afterthought, here is a WeTransfer link to the same test project but with the previews included, in case my PC is somehow generating these differently from yours:
https://we.tl/t-1cmZ3O90nX
The source files and screengrab included in the earlier zip attachment are identical for this version. The Test Project 2.iwzip in that earlier attachment excluded the preview files.
Is there any possibility the issue could be related to GPU usage? My main PC has a Nvidia Quadro P4000, the laptop a Nvidia 650M.
Hope that might be of some further help.
Malcolm
Malcolm
I have loaded your test project and agree that the mobile version is "not as crisp" as in resolutions that are not mobile, but could this be that the problem is that for all resolutions you have set as 25% and to the left are being reinterpreted to displasy as 100% above by WX5 for mobile (ie the very small image is being magnified x4)?
On my pc the image remains "crisp" if I set the image greater than 25% (I tried 75%) and set cover at top or below
WX5 has new rules introduce in v2019.2, I am not yet really sure how these changes affect shop displays.
https://helpcenter.websitex5.com/de/post/213725
Autor
Hi Esahc,
If WX5 is indeed initially scaling down the image to the smallest non-mobile view and then scaling that tiny image back up again for mobile previews, rather than scaling those down again from the full-size image, that could well be the cause I suspect. Good catch!
For this project the client was insistent on having the image to the side of the description, and at the same time I needed to reserve as much space as possible for the description text to minimise both the height of the card and any scrolling required, so my hands were rather tied. For what it's worth, she's still complaining that she finds it difficult to scroll the text on a mobile, but she can't have it both ways. I've worked around it somewhat in the main project by keeping just an abbreviated description on the card and adding a link to a separate page with more information.
I can try increasing the image percentage a little to see if that helps, but I am still constrained by the description, which I can't sensibly abridge much further.
Probably we now need feedback from Incomedia on exactly how WX5 deals with preview images in these circumstances, at which point things may become clear (if not necessarily the preview images! ).
Malcolm
Hi Malcolm, Esahc
This is an interesting issue indeed. I've verified that if, in fact, you set the cover size to 25% the image will also appear sensibly more pixelated in Mobile view when it should be granted close to full width.
I've forwarded the matter to the developers so that further analysis can be performed on this and I'll be sure to get back to you here as soon as they get back to me
Thank you for your patience and dedication to the issue
Stefano
Autor
Hi Stefano,
Many thanks also for sticking with this issue and for verifying the problem.
If it's the 25% cover size setting specifically that is causing the issue I can try an alternative percentage, though it does need to be somewhere in that region for space reasons. Although, I believe I had previously also tried 30% instead with no change, but I'll recheck to be certain.
Otherwise I'll await the feedback from the developers in due course.
Kind regards,
Malcolm
Hi Malcolm
I would like to inform you that an update is available for testing which addresses your issue, should you be part of the BETA program.
You can read more about it here in case you are not and wish to join:
http://beta.websitex5.com/
Keep in mind that this update will not be available should your Upgrade Protection have expired for longer than 14 days now.
If you have the chance to test it out, please leave me a feedback here
Thank you
Stefano