Wbsite Performance Optimization – part 2

If you have read the first part of this article you know that now I am going to talk about other things that can optimize your app.

In the second part I will talk about:

  1. How you use HD/SD Images
  2. Media Queries in details
  3. Using Sprites
  4. Image optimization
  5. Useful links

How to use HD/SD images

There are several ways to load HD/SD images based on the device type using CSS media queries or javascript.
If you are using external CSS files you can include different files based on the device width and dpi.
Letâ’s see some examples and how to include external css files based on device:

<!-- 320x460 for iPhone 3GS -->
<link rel="stylesheet" media="(max-device-width: 480px)" href=" mobile.css" />
 
<!-- 640x920 for retina display -->
<link rel="stylesheet " media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="mobile-retina.css" />
 
< !—Tablet Portrait 768x1004 -->
<link rel="stylesheet" media="(min-device-width: 768px) and (orientation: portrait)" href="tablet-portrait.css" />
 
<!-- Tablet Landscape 1024x748 -->
<link rel="stylesheet" media="(min-device-width: 768px) and (orientation: landscape)" href="tablet-landscape.css" />

 
These are just some examples of including different CSS files based on the device type.
In the retina display and tablet css files you can now add HD images.
If you want to do this in just one file you can just add the media queries into the same CSS file.

Here are some complex examples that will work on PC and devices as well.

SD images for mobile divices portrait mode:

@media only screen
    and (max-device-width:320px)
    and (orientation:portrait) {
place SD  images here
}

 
SD images for mobile divices landscape mode:

@media only screen
    and (min-device-width:321px )
    and (max-device-width:480px)
    and (orientation:landscape) {
	place SD  images here
}

 
HD images for mobile divices on portrait mode:

@media only screen
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: portrait),
only screen
    and (min-device-pixel-ratio : 1.5)
    and (orientation: portrait),
only screen
    and (max-device-width:320px)
    and (orientation:portrait) {
place HD images here 
}

 
HD images for mobile divices on landscape mode:

@media only screen
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: landscape),
only screen
    and (min-device-pixel-ratio : 1.5)
    and (orientation: landscape),
only screen
    and (min-device-width:321px )
    and (max-device-width:480px)
    and (orientation:landscape) {
place HD images here 
}

 
The above media queries target portrait and landscape separately but you can merge them together landscape/portrait depending on your needs.

SD portrait tablets:

@media only screen
    and (min-device-width : 786px)
only screen
    and (orientation : portrait) {
place SD images here 
}

 
SD landscape tablets:

@media only screen
    and (min-device-width : 787px)
only screen
    and (orientation : landscape) {
place SD images here 
}

 
HD portrait tablets:

@media only screen
    and (min-device-width : 786px)
only screen
    and (orientation : portrait),
only screen
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: portrait),
only screen
    and (min-device-pixel-ratio : 1.5)
    and (orientation: portrait), 
only screen
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait),
only screen
    and (min-device-pixel-ratio : 2)
    and (orientation: portrait){
place HD images here 
}

 
HD landscape tablets:

@media only screen
    and (min-device-width : 787px)
only screen
    and (orientation : landscape),
only screen
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: landscape),
only screen
    and (min-device-pixel-ratio : 1.5)
    and (orientation: landscape), 
only screen
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape),
only screen
    and (min-device-pixel-ratio : 2)
    and (orientation: landscape) {
place HD images here 
}

 
Keep in mind that the new ipad has a resolution of 2048 x 1536 so you can build a media query for him but it’s easier to make the media query based on the pixel ratio which is 2.
You can play around with the examples I give and test them. They will work on android devices as well.

There are other ways of including HD/SD images based on the devices using JavaScript.
You can create a function which gets the device type ios/android etc.

Example:

  1. Using userAgent to detect device type
  2. screen width, height to get the screen resolution
  3. window.devicePixelRatio

There are a lot of ways on how to detect the device resolution. And based on that you can include HD/SD images.

Using sprites

As a developer sometimes building an sprite can take time or needs some Photoshop skills and maybe you don’t want that. There are a lot of useful tools online that can build sprites for you.

Here are some examples:
http://csssprites.com/
http://spritegen.website-performance.org/

The advantage of using sprites it’s that your game wont make a lot of HTTP requests and bandwith save.
Considering :

  • web browsers only do a few HTTP requests in parallel
  • doing an HTTP request means a round-trip to the server, which takes lots of time
  • we have “fast” internet connection, which means we download fast but on a 3G connection it’s not that fast.

What takes time, when doing lots of requests to get small contents (like images, icons, and the like) is the multiple round-trips to the server : you end up spending time waiting for the request to go, and the server to respond, instead of using this time to download data.

If we can minimize the number of requests, we minimize the number of trips to the server, and use our hight-speed connection better (we download a bigger file, instead of waiting for many smaller ones).

That’s why CSS sprites are very used.

Sprite example:

Image optimization

When using a lot of images the game can get quite heavy even if you use sprites. But you still have the in game images which you cannot add them into the CSS.

So having a lot of images like 200 but you use them in different levels, page changes etc.

You can still optimize them.

In the right image you can see an image data and what it uses. You can remove all the unsed that by optimizing the image.

http://www.smush.it/
http://www.kraken.io/

The second image you can see how the image looks like after send it to an image optimizer. Quite an improvement right?

The optimized image will be a pixel perfect copy. Often you can reduce the file size by 5-20%, sometimes even as high as 70-80%!Image Optimization

Use other file formats to store the graphics data more efficiently. An (non-animated) GIF image is always smaller when it gets converted to PNG.

Sometimes converting a PNG to JPEG or the other way around saves size as well.
This can as well reduce the file size up to 80%!

Note: Do not use images, if you can create the same visual effect it with CSS (shadows, rounded corners, dotted borders etc.)

Here are some online tools that removes all the unused data.

Useful Links

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks
http://jsperf.com/

Performance test
http://www.webpagetest.org/

CSS and JS
http://lesscss.org/
http://smacss.com/
http://oocss.org/

That’s a wrap folks.
Hopefully you find this article very useful.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.