HTML and CSS Reference
In-Depth Information
Figure 15-7.
Our demo running at full resolution
Figure 15-8.
Our demo running at half resolution using grid snapping
As you can see, keeping your sprites sharp in the case of a lowered resolution is very important and requires
some planning at the design stage. Obviously, being able to use the same assets at different resolutions is the cheapest
solution but you may also use different spritesheets, each with art adapted to a specific resolution.
Whether you design a low-res spreadsheet or generate one offline, you can benefit from faster load times on less
capable devices. A twice as small spritesheet means four times less pixels to send down the wire!
CSS Scaling
When scaling the canvas with CSS to compensate for a lower resolution in order to retain the same size in absolute
pixels, the browser is responsible for the upscaling operation. As you probably know from Photoshop, there are different
ways to scale an image. Indeed, once upon a time in a CSS3 draft, an “image-rendering” property was made available
