How to Improve the Performance of the Website by Optimizing the Images
The internet speed varies for everybody, and people don’t have time to wait for our website to load. The performance has become one of the most important aspects of today’s web development.
One of the key factors of performance improving is image optimization. Nowadays images are used on every website.
Image Types
The primary way to change the file size of an image is to change the file format. We need to find the correct file format that is best for the job. Below are the four main image file formats uses in the web,
1. JPG
2. PNG
3. GIF
4. SVG
JPG:
Usually used for photos, images and things with many colors such as photographs. The one downside with JPG is they don’t allow the transparency.
GIF:
Usually limited no number of colors used for the images (2–256 colors in most of the GIFs). Reducing the color count saves the file size.
PNG:
Usually limits the no of colors (not as much as GIFs do) and tend to be lot smaller in size than JPGs. The PNGs are widely used in the web for logos since they require only a few sets of colors. Unlike JPG, we can add transparency to the PNG images
SVG:
SVG is a completely different category. You can expand an SVG into a much larger size than its original size yet it just as sharp and just as clear as the original was. Therefore, they are good for retina, 4K etc. displays.
Reduce the image sizes without losing quality
There are lots of online and desktop tools out there to resize the images without losing their quality. Below two online tools are quite popular in the internet.
Using TinyPNG, PNG images can be compressed without losing quality.
Example:
Using TinyJPG, JPG images can be compressed without losing quality.
Example:
Use simple illustrations over highly detailed photographs
Try to use icons or illustrations whenever possible and it will help to improve the website performance
Use progressive JPEG
The JPEG image format has lot of compression modes but below three modes are the most popular ones,
1. Sequential
2. Progressive JPEG or PJPEG
3. Lossless
The sequential JPEGs load from top to bottom whereas progressive JPEGs load from blurry to sharp
The advantage of using PJPEGs is they offer low-resolution preview of the image. Due to this, this user feels that the image is loading faster.
Popular websites like Twitter.com, Facebook.com are using progressive JPEGs to improve the image performance of their sites. Tools and libraries like ImageMagick, libjpeg, jpegtran, jpeg-recompress and imagemin can be used to export PJPEG images.
Resize the image based on size it will be displayed
We must match the resolution of the image to the size which displayed in a website. If we are showing an image only 800 pixels wide, then we don’t need to keep the image at 4000 pixels. The larger the resolution the larger the file size.
Display different size images for different backgrounds
People use various sizes of displays to view our web sites. Some people use high resolution desktops, some use low resolution laptop computers and some people use mobile devices. So why do we load a large background image which is only needed for a large high-resolution display, to somebody with a low-resolution mobile device?
We can easily do this with media queries. Media queries can be used to apply different CSS styles depending on the device type.
Example:
@media screen and (min-width: 900px) {body{background: url(‘./large-background.jpg’) no-repeat center center fixed;background-size: cover;}}@media screen and (min-width: 500px) {body{background: url(‘./small-background.jpg’) no-repeat center center fixed;background-size: cover;}}
Use Content Delivery Networks (CDN)
Instead of storing all the media files of the website in a single location we can store them in a Content Delivery Network. The CDN has copies of the files on multiple servers around the world. Therefore, the images will be downloaded from the nearest server to the end user. This makes loading images much faster than the traditional approach.
Remove unnecessary image metadata
In addition to visual data, image files contain several different formats for metadata, which in turn store different types of information:
- EXIF (Exchangeable image file format) — Information generated automatically by the device that captured the image (i.e. cameras and smartphones), such as data and time, and camera settings (make and model, image orientation, aperture, shutter speed, focal length, metering mode, ISO speed etc.). This specification also helps cameras use formats that can be exchanged between devices; for example, ensuring an iPhone photo appears correctly on a Samsung device.
- IPTC (International Press Telecommunications Council) — A format originally adopted by old media news agencies to streamline information but has been implemented by new media to do much the same thing. The IPTC section of an image usually contains information about the image, such as title, description, keywords, photographer’s information, copyright restrictions, and more.
- XMP (Extensible Metadata Platform) — An XML-based format recently adopted by Adobe that incorporates all the information from the IPTC format but allows for additional information to be stored within the image.
- 8BIM — A file extension used by Photoshop that stores some graphics-related data.
- ICC (International Color Consortium) — In color management, an ICC profile is a set of data that characterizes a color input or output device, or a color space, according to standards set by the ICC. Imaging programs like GIMP use ICC color profiles to interpret an image’s RGB values.
The image metadata is not useful for the website’s end users. And the meta data contains personal information about the creator of the image. Therefore the metadata must be removed before adding images to the website.
