Images have a long history of adding life to our work. Modern websites are increasingly media-rich, and the world wide web is rapidly becoming a visual web.
We have formed a common habit of dumping images into our projects that and that is exactly where the problem starts from. In doing so we neglect optimization which is important and would take into consideration the dimensions, size, format, and quality of the image we are working with.
Let’s see the various ways in which we could optimize our images.
1. Use the right format
A common mistake is to pick an image format and use across our project or even just use the images with their default format as is. This is very wrong on many levels. Image formats usually have specific uses and where they shine. Here are the common ones and when best to use them;
JPEG/JPG is best used for photographs and complex images. They usually have a lot of colors and the JPEG format has been optimized for situations like these.
GIF is very commonly used for animations and other great uses. For example, it is best used for logos and icons too. Basically, low-profile images that have a very small amount of colors.
PNG is essential when you need images with transparency. They are usually larger than other formats. Commonly used for logos and icons, they should be avoided in place of alternatives in these cases.
SVG or Scalable Vector Graphics has just recently gained a lot of traction on the web for its ability to scale without losing quality. It remains the same as designed. SVG can be used in place of PNG especially on the web and usually has a smaller file size. So you should definitely consider it.
So, I hope the guide above helps you when making decisions on what kind of images to use in your next project.
2. Select the optimum quality
The best quality of your image is not necessarily the best quality for you. You might just be cramming a lot of unnecessary pixels and details into where they are not needed. You really would want to loosen up a bit on the quality of the image. This is especially important on a web project because doing this could reduce the file size significantly and improve load times.
One quick way to optimize an image’s quality for the web is to use the save for the web option in Photoshop. There are other alternatives to Photoshop out there if you do not have a copy. In particular, there is GIMP is an open-source alternative to Photoshop available on the major OS platforms.
3. Resize to fit
So you have that Full-HD photograph and yeah it looks awesome but you want to throw it into a 480px width window. On the web, you would probably just force it into the window and maybe use CSS or JavaScript to ensure it does not overflow. And when not on the web, you just want to drag the corners till it fits into that window. Well, if you are into this habit, you might want to desist from it.
Best practice would suggest that you actually take your image back to the editing tool and resize it to 480px. This saves you cost in terms of storage size. Simple and readily available applications like MS Paint can do this already for free.
4. Do extra work on thumbnails
Thumbnails are trickier to work with than many think. Many of the optimization techniques are especially needed here.
First, always ensure that your thumbnails are created to fit the windows which they were designed for and not forced.
Then remember always that it is just a thumbnail and does not have to be the best quality there is. Just enough to make it clear to the user.
Now for the file format, you might want to go for GIF as explained above. It could save you a good amount of space, especially on catalogs where you could have tens or hundreds of thumbnails on display at the same time. This could save you some load time on the web.
5. Name your images right
Yes, we are talking about image optimization but that does not make this relevant. Naming your images gives more information to crawlers, In other words, it improves your SEO by providing more information to the crawlers. This tip is especially useful on the web.
So naming your image sunflower-juice.jpg beats naming it image.jpg for the said reasons above and increases your SEO ranking.
6. Plan ahead
One common mistake that Project teams make is to put off the image related decisions and optimizations until later on in the project. Whatever your project it is best to know from the onset. Try to understand what type of images best suit the project especially when you are trying to account for the file size, quality and, dimensions. This would help save you a lot of potential cost in time.
Conclusion
Optimized images are critical for media-rich news sites and blogs, social networks with user-generated content, and dynamic media used in eCommerce. Image intensive projects can look great and load very fast when image optimization is done right. We hope the tips provided in this article will help you improve the quality of your visual presentation, while better serving users and ensuring they remain engaged and satisfied.
Latest comments (0)