This blog talks about the optimization techniques to render an image in Mobile browsers.
1. Make sure the Images are not resized in the Mobile, but do it in the Server itself.
Say when a image of 100x100 size is loaded into a page with 50x50 as width and height attributes. The browser has to work on minimizing (or maximize in case the attribute is larger than the actual size) this image to specified value. This may be a minuscule task/resource utilization in desktops, but this cause quiet an impact in rendering the page with Mobiles.
So make sure the Image is resized in the server end than at the browser end; and make sure the width & height attributes are exactly same as the actual Image width & height.
This mechanism would also save the data transfer over the wire, which is a major advantage in Mobile networks.
The above info might lead you to think about avoid mentioning the width-height for an IMG tag, to have a less hassle over sync'ing the IMG width-height attribute with the actual image size. There is a drawback for this too.
Apart from that the ALT | TITLE elements of the IMG tag will take up its own space, which may be less than or greater than the actual image space.
The end user will see a page with some layout and once the images are loaded there will be another layout (may be the final one). But if there are more than one image, the user will see the layout changing multiple times, untill all the images are downloaded.
In addition to bucketing, these attributes help rendering the page faster, which makes the Search Engines to give higher ranking to the page w.r.t 'Page Load Speed'.
All the above mentioned techniques are applicable to Mobile browsers as well - with even a higher priority than desktop browsers.
2. Sprite the images
CSS Sprites have become a must-do for optimizing the websites. This technique helps to combine multiple images to one and also displays the image as a background image of the HTML element.
With Sprite'd image there will be only one network call in place of multiple image calls. Also the image is loaded only when that image is under visible space i.e. If the website is vertically long, and the sprite'd images appear way below the visible area, then this image will not be loaded. When the page is scrolled down to make the sprite'd image visible the browser will trigger a Sprite'd image dowload at that point. This reduce the page load time to a good extent.
Many Mobiles support Sprites, but not all. Wurfl will help find this feature for mobiles and based on the capabilit (for iPhone) CSS Sprite'ing can be used for such mobiles.
3. Use Data URIs inplace of Images if there are only few set of images and are reused across pages.
These can be specified in the CSS file itself, so that they get downloaded with CSS and cached.
The Data URIs can also be stored in the Local Storage and retrieved as needed.
4. Compress the Images
Not always the Images generated out of Photoshop or any Photo Creaters compress them or compress them well. They may have separate utilities to do the compress better.
I found PngOut utility to be useful and simple enough to compress a PNG image, generated out of Photoshop.
Some of the images were compressed to upto 60% lesser, saving huge KBs. I found PngOut to be better than PngCrush utility atleast for the PNG images I wanted to compress.
I haven't R&D'd on the compressing utilities for other image types.
So make sure the Image is resized in the server end than at the browser end; and make sure the width & height attributes are exactly same as the actual Image width & height.
This mechanism would also save the data transfer over the wire, which is a major advantage in Mobile networks.
The above info might lead you to think about avoid mentioning the width-height for an IMG tag, to have a less hassle over sync'ing the IMG width-height attribute with the actual image size. There is a drawback for this too.
- Causes slower rendering/Multiple reflow (or repaint/realignment) of the page.
Apart from that the ALT | TITLE elements of the IMG tag will take up its own space, which may be less than or greater than the actual image space.
The end user will see a page with some layout and once the images are loaded there will be another layout (may be the final one). But if there are more than one image, the user will see the layout changing multiple times, untill all the images are downloaded.
- Unfriendly to SEO
In addition to bucketing, these attributes help rendering the page faster, which makes the Search Engines to give higher ranking to the page w.r.t 'Page Load Speed'.
All the above mentioned techniques are applicable to Mobile browsers as well - with even a higher priority than desktop browsers.
2. Sprite the images
CSS Sprites have become a must-do for optimizing the websites. This technique helps to combine multiple images to one and also displays the image as a background image of the HTML element.
With Sprite'd image there will be only one network call in place of multiple image calls. Also the image is loaded only when that image is under visible space i.e. If the website is vertically long, and the sprite'd images appear way below the visible area, then this image will not be loaded. When the page is scrolled down to make the sprite'd image visible the browser will trigger a Sprite'd image dowload at that point. This reduce the page load time to a good extent.
Many Mobiles support Sprites, but not all. Wurfl will help find this feature for mobiles and based on the capabilit (for iPhone) CSS Sprite'ing can be used for such mobiles.
3. Use Data URIs inplace of Images if there are only few set of images and are reused across pages.
These can be specified in the CSS file itself, so that they get downloaded with CSS and cached.
The Data URIs can also be stored in the Local Storage and retrieved as needed.
4. Compress the Images
Not always the Images generated out of Photoshop or any Photo Creaters compress them or compress them well. They may have separate utilities to do the compress better.
I found PngOut utility to be useful and simple enough to compress a PNG image, generated out of Photoshop.
Some of the images were compressed to upto 60% lesser, saving huge KBs. I found PngOut to be better than PngCrush utility atleast for the PNG images I wanted to compress.
I haven't R&D'd on the compressing utilities for other image types.
