Thursday, October 4, 2018

iPad website JPGs appear very pixelated

By Hường Hana 5:00 PM , Leave a Comment

Our website appears fine on a Mac. However, on an iPad, the home page slider images appear very very pixelated.

I've had a look at this article and changed the JPGs to progressive, and cleared the server cache, and the iPad Safari cache, yet the issue remains.

Help appreciated.

For the record, the 4 slider images are around 1100 - 1500 pixels wide:

2 Answers

Answers 1

From this answer, using background-attachment: fixed with background-size: cover causes issues on most mobile browsers. You can try using background-attachment: scroll. This won't give your desired effect, but you'll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using @media screen and (max-device-width: 1024px){}

OR

You can use background-position: scroll and include some javascript that will keep the image at the scrolled position (keeping it at the top of the window): DEMO

Answers 2

Maybe try to convert the image to a PNG or SVG and see if this helps. If you have a graphic designer have him do this or use one of the image converters on the web. JPEGs are compressed each time they're saved and this is a lossy compression so the image will artifact giving the pixelated look you're describing. If this solves the problem then you know it was a problem with the image itself. If it still appears pixelated then this may be a problem with the Ipad instead. I would then see if you can get a developer to set up an emulator for a different Ipad device, with Genymotion or with the built in emulator that comes with Android Studio, and visit your site on the emulator and see if the problem still persists. Hopefully this helps!

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment