Lower resolution sprite animation on iPad Air?

[Cute James]

Good evening chaps,

 

I've noticed that a large-ish sprite animation used on a website that I'm responsible for appears to render at a lower resolution on my iPad than on my desktop and laptop.

 

The animation can be viewed on the following page:

 

http://www.kawaimp.com/mp11/detail/touch/

 

[scroll down to 'REAL SEESAW MOVEMENT' and hit the 'CLICK HERE' prompt]

 

I appreciate that the website graphics are being upscaled for the iPad's retina display, however other images on this page and elsewhere pages do no appear to exhibit the same low resolution blockiness.

 

Perhaps I am imagining things, but if not, I would appreciate any background information regarding this point, and what steps - if any - can be taken to improve the animation's rendering quality.

 

Many thanks in advance!

 

 

[Seahorsepip Veteran]

Just make the image twice as big for the ipad since it's a retina device ^^

You can use the following mediaquery css:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    #animatedelement {
        background: url("twice as big background");
    }
}

For more info about retina display mediaqueries: http://css-tricks.com/snippets/css/retina-display-media-query/

 

Make sure to index and optimize those big retina images otherwise you end up with massive images ;)

 

Oh and the reason why upscaling doesn't always work is because of the way it's used, if you use it in a img tag it's nicely upscaled but when using a image as background-image with css it's likely to not upscale and look unsharp.

 

Oh and the website is really nicely done, I love the way you kept it simple but elegant :D

[+Zlip792 MVC]

@+Seahorsepip

 

What about using srcset attribute with <img> tag?

 

As mentioned in this webkit.org article: https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/

 

Another article: http://www.html5rocks.com/en/mobile/high-dpi/

[Seahorsepip Veteran]

@+Seahorsepip

 

What about using srcset attribute with <img> tag?

 

As mentioned in this webkit.org article: https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/

 

Another article: http://www.html5rocks.com/en/mobile/high-dpi/

That works too but is more complex to animate, since he's using a sprite for a animation combined with background-position.

[+Zlip792 MVC]

That works too but is more complex to animate, since he's using a sprite for a animation combined with background-position.

 

I agree...

[Cute James]

Seahorsepip, many thanks for your useful reply!

 

I was not aware that background-image upscales differently to img - that's good to know.

 

Oh and the website is really nicely done, I love the way you kept it simple but elegant :D

 

Thank you, however I ought to point out that I'm only responsible for planning the site and writing/preparing the content.  The design and coding was handled by a local agency.  However, I too rather happy with the outcome.  We will be adding content for another model in the near future, so I shall look into re-rendering the animation for Retina DPI and request that the agency utilise the mediaquery css that you kindly suggested.

 

Thanks again!

[The_Decryptor Veteran]

Just make the image twice as big for the ipad since it's a retina device ^^

You can use the following mediaquery css:

 

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    #animatedelement {
        background: url("twice as big background");
    }
}

For more info about retina display mediaqueries: http://css-tricks.com/snippets/css/retina-display-media-query/

 

Make sure to index and optimize those big retina images otherwise you end up with massive images ;)

 

Oh and the reason why upscaling doesn't always work is because of the way it's used, if you use it in a img tag it's nicely upscaled but when using a image as background-image with css it's likely to not upscale and look unsharp.

 

Oh and the website is really nicely done, I love the way you kept it simple but elegant :D

Oh wow, don't read the comments on that article, I was going to correct a few but just gave up.

I especially like the guy who thinks browsers can't resize images, so he just upscales images on the server and sends them, meaning every icon on his site is blurry.

[Seahorsepip Veteran]

Oh wow, don't read the comments on that article, I was going to correct a few but just gave up.

I especially like the guy who thinks browsers can't resize images, so he just upscales images on the server and sends them, meaning every icon on his site is blurry.

Hahaha yeah I never read the comments on most blogs either lately so much comments with bad info and practice :P