One of the most useful skills that anyone can acquire for any form of web development is the ability to optimize web images. There are many possible reasons for wanting to optimize web images and numerous factors to take into consideration with regard to how and why it’s done.
The most obvious is bandwidth and throughput. Most small-scale websites in particular are extremely limited with regards to the amount of bandwidth that they’re working with; thus, it is impractical to fritter away vast amounts of bandwidth on photographs. Even very large commercial and news websites rarely use large photographs for this very reason, and there is a standard image size for newspaper websites of around 450 pixels in width.
It becomes challenging, though, to produce graphical image of a sufficient quality while also maintaining a relatively lean file size. This is a test for huge organisations as well as small and medium-sized enterprises.
Another aspect which can affect the decision-making process with regard to image size in terms of memory usage is the amount of data storage and space that is available for you. It is often taken for granted by members of the public that all of the images and pages associated with a certain site remain live indefinitely. For example, to cite the precedent of newspapers once again, they often retain millions of pages which date back decades, all of which are expected by the demanding public to retain a relevant image indefinitely.
Of course, most business websites don’t have the storage capacity and resources of a mainstream newspaper, so it becomes even more important to spare data storage facilities by keeping images as data intensive as possible. Although server costs are coming down, they remain a significant drain on many companies’ bottom line.
There are a variety of tools available to enable you to do an excellent job adequately optimizing images that you wish to display on your website, but it seems sensible to utilise program which is so ubiquitous that it gave its name to a verb – Photoshop.
Firstly, Photoshop contains an option will automatically optimizes images for web use. This can quite simply be found in the ‘File’ menu, where the option for ‘Save for web’ should be quite clear. Other graphic editors also often have a similar option in the file menu, quite often under File > Export.
The above provides a very basic way to optimize images for web publication, but if you wish to take a more detailed approach then there are many other options within Photoshop. For an image with many colours, accessing the same option within Photoshop will then give you the option to choose a file type. For this sort of image, it is advisable to use JPEG. And the ‘progressive’ option within the dialog box can also be ticked if you wish for the image to be loaded gradually instead of line-by-line.
Next there is a wealth of options related to image quality. While it might seem to be an obvious choice to pick the highest, simply pushing the slider to its highest point can cause compression issues. It’s important to bear in mind what the image is being used for, and how many images are going to be included on the web page that you’re optimizing the image for. No-one wants to load a web page with loads of incredibly dense images that take ages to load, so it is generally unwise for an image size in storage capacity for a web page to be greater than 30KB.
There are other options available in Photoshop related to transparent pixels and the number of colours, and it can be tricky to find the right balance between quality and size, so it is perhaps advisable to use a little trial and error while deciding this. It really does depend on what you wish to use the image for, so it is hard to give precise hard and fast rules, except to say that the bigger your image is in terms of file size, the longer it will take a browser to lose. One must constantly bear this in mind while also retaining a strong regard for image quality. Remember as well that it is always advisable to test several quality and compression settings until you get the perfect balance between image quality and load time.
In addition to Photoshop, there are many other programs available which can be downloaded and utilised to optimize web images. TinyPNG, Smush.It, OptiPNG, ImageOptim, CodeKit, iMGO and jQueryLazyload are all examples of image optimization utilities that offer you a wealth of options and functionality and which all have their followers and devotees. It is well worth checking them out as well as making sure you get the best out of Photoshop.
One of the best that I have found though is known as RIOT, which stands for Radical Image Optimization Tool. This particular program is aimed at Windows users, and can be acquired as a standalone application or as an extension of the popular and powerful Irfanview graphic viewer, which is also compatible with many versions of Windows. RIOT includes the very useful ability of being able to strip out image metadata, which can reduce in some seriously reduced file sizes. The image editing options associated with the program are also extremely impressive and intuitive.
Another godsend if you want to create the leanest file sizes imaginable is The Online Image Optimizer. As the name would suggest, this program produced by Dynamic Drive is a web-based tool, which enables you to compress images even further than is made possible by image editing suites. It is also capable of altering file types, so that a JPEG becomes a GIP or a PNG file, or vice versa.
So if you have images which you wish to use online and you feel that they’re using up too much space, and you don’t feel that you can utilise images of the quality that you’d hoped…don’t despair. There are many tricks, options and packages open to you.
Author Bio: Michael Jenkins is the founder and director of Shout Agency, a Melbourne-based boutique digital strategy agency. Michael is a highly regarded thought leader and digital innovator in the fields of online strategy, corporate SEO, Google re-targeting, email and affiliate marketing, and online reputation management.