Image size matters

As mentioned in the previous chapter, mobile networks have many limitations compared to a wired connection. So, reducing the file size as much as possible is really essential in mobile web development. According to the data (https://developer.yahoo.com/performance/rules.html), 70-80 percent of sites' bandwidth is consumed by the images. Therefore, delivering smaller file size images with acceptable quality to the mobile will always provide a better outcome.

When it comes to image optimization, there are two key factors that you need to always keep in mind. They are as follows:

• Resize your images to correct image resolution
• Reduce the file size.

Resize your images to correct image resolution

There are two methods to measure the size of an image. You can get the image height and width and calculate the physical image size as well as the number of pixels. Also, you can measure the file size by calculating the byte count.

Images that are not appropriately sized will cause serious rendering issues in mobile devices. The developers should make sure that they resize the images to fit into the available area before they deliver content to the mobile.

Since the display sizes vary from the smallest device to the biggest tablet, some developers save multiple size images and send the most suitable image to each device. On the other hand, using one image for all devices will give rise to some serious issues, especially in the small screens. When you double the width and height of an image, the image size increases by 4X, which causes delays in loading.

As mentioned earlier, the basic method that we can use to avoid this is to have an image for each and every screen size but, the developer has to create this manually. This is a superb solution but identifying each and every screen size is a hectic process. However, there are free tools available to profile every device and this will simplify this issue.

There is another method that developers use nowadays. They use CSS media quarries to manage images by manipulating the CSS code.

The following code shows how we can use a different image for the horizontal and vertical screens:

/* Portrait */

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: portrait) {
body{
background-image:url(images/bg-portrait.gif);
}

/* Landscape */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: landscape) {
body{
background-image:url(images/bg-landscape.gif);
}
}

However, regardless of the challenge, the recommendation is to resize the images for mobile devices whenever possible. The properly resized image can save many bytes and will improve the user experience.

Reduce the file size

Reducing the overall data contained in an image file can reduce the image file size. This can be done by reducing the file size using a compression mechanism, or by physically reducing the file size by cropping it.

You can use two methods to compress an image file, lossy and lossless:

• Lossy compression can save up to 90 percent of the initial file size by removing information from the original file. It can give outstanding results with just a fraction of image quality lost.
• Lossless optimization keeps the original information intact, but it will push the image to the extreme to get the result. This option is good if you are concerned about the image quality, but this mode is time-consuming.

Image compression tools

We use various image formats for our websites. Whatever the format you use, it is essential to optimize those images properly.

Also, Google has developed a new image format called WebP that is supported in Chrome, Opera, and Android. The new format is optimized to enable faster and smaller images on the Web and it is about 30 percent smaller in size compared to JPG and PNG while the visual quality remains the same. Also, The WebP format has features that are present in other formats as well. It supports the following:

• Lossless compression: The lossless compression format is developed by the WebP team.
• Lossy compression: The lossy compression is based on the VP8 key frame encoding. VP8 is a video compression format created by On2 Technologies as a successor to the VP7 format.
• Color profile: It may have an embedded ICC profile.
• Metadata: It may have EXIF and XMP metadata (used by cameras).
• Transparency: The 8-bit alpha channel is useful for graphical images. The alpha channel can be used along with lossy RGB, a feature that's currently not available in any other format.
• Animation: It supports true-color animated images.

Because it results in better compression of images and has all these features, the WebP format could be an excellent replacement for PNG, JPG, and GIF.

Those who still use PNG, JPG, or GIF, can get the best out of it by optimizing those images properly. For image optimization, there are a number of free tools available on the Internet. You can download them; most of those tools are really easy to deal with.

Tiny PNG

According to the website, https://tinypng.com/: