Images are crucial to any modern front-end platform. Media assets keep your design flawless and your content interesting to the viewer. However, images can also have a negative impact by increasing the overall page load time. For instance, if you’re adding uncompressed images to your apps, this can significantly increase the page size. To fix this issue, various image manipulation techniques are used by designers and developers to create and render images. Some methods work great with static assets whereas you need better methods for handling dynamic images. In this post, we’ve covered 5 popular image manipulation techniques that can be used to reduce the page load time by up to 80%.
Move Image Manipulation Logic to The Cloud
A majority of developers, who need to work with images as part of their day to day work, utilize libraries and scripts to tackle image manipulations. The everyday image manipulation tasks include cropping, resizing and rotating images and they are easy to program. Â However, more advanced manipulations are harder to implement like generating shadow effects as well as transparency, face detection and watermarks, etc.
The developer is usually left with two options, either develop an image optimizer library from scratch and push the optimized images into the server, or use a cloud based service that provides end to end image manipulation solution. With cloud based services, you have an extra benefit that they serve as Content Delivery Networks (CDNs) that can significantly speed up the image delivery speed. The popular image CDNs like Cloudinary and Imgix  allows users to upload a website’s images to the cloud and then perform a wide gamut of image manipulations.
By moving the image manipulation to the cloud, developers and designers are empowered to pursue image manipulations on the fly, in the cloud, by using a dynamic URL which specifies exactly how each image can and should be modified. Designers can share this image manipulation URL directly or via client libraries built for Ruby on Rails, PHP, Node.js, Java, .Net, Python, Django or Jquery.
Compress Images to Get the Image at Reduced Size
Compressing images helps you reduce the overall size without having noticeable deterioration in quality. Generally, you should consider keeping the initial render size of your page to about 1-2 MB or less. There are two categories of compression techniques — lossless and lossy compression. They are both algorithms that you can use to reduce the size of images. JPEG for instance is a lossy format where you actually lose visual details, but the compression rates are 10x compared to that of PNGs and GIFs. That’s the reason why JPEGs are used all around the web.
If you’re using JPEG, here are a couple of suggestions to get the best compression ratio.
- Reduce the quality of the image to 85 if the actual size is higher. Beyond 85, the file size dramatically increases without having any noticeable improvement in visual quality.
- Reduce Chroma sampling to 4:2:0. Our eyes are more sensitive to luminance than colors.
- Use progressive image format for large image files. Progressive image formats have a slightly greater compression ratio compared to that of the baseline JPEG format.
There are a number of tools, both web and desktop applications as well as plugins for WordPress that can be used to compress images without losing any image quality. If you’re running a website with lots of static assets, you can just use the old-school method and compress images by hand. Popular tools like kraken.io, smush.it and imageoptimizer.net help you refine the image and reduce the size by compressing the image to the best possible extend.
If you’re running  WordPress CMS for your website, multiple image optimizer plugins exist that can auto optimize whole media library images per the specified quality.  A number of both free, as well as paid plugins that can be used to optimize images. Some of the more popular and tested plugins include:
- EWWW Image Optimizer
- WP Smush.it
- CW Image Optimizer
- WP Boyka
If you’re looking to manipulate images on the fly and if you’re reluctant to use third-party resources, you can open-source libraries that work with your stack. You can find lots of image optimization projects on GitHub.
Vector Images and Icons for Web Design
Vectors have been around for a long time. Vector images have been proved to be ideal for images that contain geometrical shapes, as well as, those that are zoom and resolution independent. Vector images make extensive use of lines, polygons as well as points to represent an image. However, images in the vector format are unable to provide the desired result when the image or scene is complicated. As a result, the output might not be as ‘photorealistic’ as required.
That’s where Raster images comes into the picture. Raster Images are used for more complex scenes that contain a number of irregular shapes and details. In cases like the one described above, Raster images make use of formats like GIF, PNG and JPEG or comparatively newer formats like JPEG-XR and WebP to provide a result that is more aligned to what is desired.
Vectors are popular among web designers because they are supported in all modern browsers in the form of SVGs. Vectors are defined by XML format and when you save them, the size is considerably less than that of the corresponding raster file. When you’re dealing with higher-resolution screens, you can use the same vector without having to create assets of higher resolution. Using SVG format for icons, logos, original illustrations, and fonts can help you reduce the page size.
Select the Right Image Format
Selecting the most appropriate image format is perhaps the starting point when it comes to image manipulation. Web designers can choose between the universal formats – GIF, PNG or JPG. To know which one works for you, you should ideally experiment with each format. Then select the most appropriate image settings for each format including palette size, quality, etc.
If your aim is to support modern browsers, additional WebP and JPEG XR assets can be used. Both the formats are new, and aren’t universally supported yet. However, here is an interesting stat: WebP delivers 30%+ decrease in file size compared to that of a similar JPEG. You can further reduce the size standard WebP algorithms that can compress the image further.
For native applications and mobile apps, you have complete control of how everything works and what format needs to be supported. So, you should consider using WebPs or JPEG XR instead of the traditional image formats for better performance.
If you’re still not sure which image format fits you application, the flowchart below explains the ideal format for each scenario:
Create a Scaled Image Checklist
An image optimization checklist is fundamental to providing a conclusive answer for how to best compress a particular image. What works for others might not fit into your case. If you’re building a website that’s an image gallery, you will need to use a combinations of CDNs, dynamic optimization techniques and image formats that are bandwidth friendly. Here are a few techniques and tips to follow when attempting to optimize images:
-
- Choose vector formats for static logos, icons, graphs, and anything responsive
- Compress and minify SVG assets whenever possible
- Select the best raster image format and set standard quality parameters
- Eliminate unnecessary image metadata
- Put the static assets in CDNs (Content Delivery Network)
- Use cloud to handle runtime & dynamic image manipulation
- Automate repetitive tasks using plugins or scripts
