How to category Design category Development category News category

Image Optimisation (with Riot)

Image optimisation

Using images can greatly improve the look and feel of your website. Remember the phrase “A picture is worth a thousand words”…

9 times out of 10, a typical photo or image that hasn’t been acquired from the Internet in the first place, will have a large file size. These days, file sizes for photos taken by a handheld camera can range from 500kb to 5mb…even larger with the more expensive, higher megapixel cameras.

An important thing to remember when using images on your site is that they will increase the loading time for the visitor.

We all know how frustrating sitting and waiting for a page to load can be and more often than not, this is caused by media content such as images and videos. Even though Internet speeds are constantly improving, it still remains an important and good practice to put your images through a couple of processes before uploading them to your site.

This may sound like a lot of work, but it really isn’t after you’ve done it a handful of times and just remember, it will make your site load a lot faster!

Image optimisation in plain English, is making your images ready for the Internet – Reducing their file size so they will load fast, whilst maintaining the right balance between quality and file size.

Luckily there are a handful of free programs available for download that make image optimisation incredibly fast and easy to accomplish.

One such program is which I highly recommend is:

 

RIOThttp://luci.criosweb.ro/riot/download/

Note. During the installing process, on the final page before it begins to install, it will ask if you want to install ‘PC Speed Up’…Choose the 2nd option ‘I do not want to install PC Speed Up’…then click install.

Once installed, open up the Riot program (Start>All Programs>Riot>Riot) and you will be presented with a screen like this. (Pic imgopt_1.png)

The quickest way to learn is by doing, so go ahead and click the ‘Open…’ Icon, browse to a picture and hit open.

The image on the left is the original image or ‘initial image’. The image on the right is the optimized image.

Below these images are a number of settings which we will briefly discuss.

 


JPEG, GIF or PNG… Image types.

This refers to how the image will be processed and stored.

For an in-depth understanding of each image type, a quick search on Google will give you all you need to know. But for the purpose of this how to, choose the appropriate type, depending on the initial image…


JPEG

For rich photographs with deep colour and dynamic lighting.

This uses a lossy compression technology, which means that some of the image quality can be traded off to achieve a smaller file size.



GIF and PNG

For logos and images containing large areas of the same shade of colour.

The opposite of lossy, is lossless compression technology, whereby the image retains it’s original quality.

PNG has the advantage of being to use a colour palette with millions of colours, whereas GIF uses only 256.

 

The great thing about Riot is that you see the ‘optimized’ image on the right hand side and just above that, the file size to (In dark red text). Now, it’s simply a case of experimenting with the image types and the ‘Quality’ slider immediately beneath until you get a nice small file size, whilst maintaining a high quality image.

The final step, is resizing the optimized image. If you only need an image 200 pixels wide, then optimize it to 200 pixels wide in Riot, rather than using a bigger image and scaling it down on the web page itself.

The final step is clicking the ‘Save’ button. Enter a filename, hit save, done!

For more detailed information on using Riot, refer to the help documentation. It’s very easy to follow and runs through some of the additional options such as ‘Compress to size’ and ‘Image adjustments’.

 

Adobe Fireworks

While Riot is a great piece of free software, I would highly recommend Adobe’s Fireworks if you can afford to splash out £200+.

It’s both Windows and Mac compatible and one of the features I find most useful in Adobe Fireworks is being able to slice up an image and then save the slices as individual images. Not only that, you can specify the image type for each slice and preview them as you decide. Here’s how:

Open up Adobe Fireworks (Start>All Programs>Adobe>Adobe Fireworks CSx)

From the menu at the top, choose ‘File>Open’. Browse to your image, select it and click ‘Open’.

Click the Slice tool from the ‘Web’ panel on the left (Keyboard Shortcut: K)

Now click and drag on the image to start drawing where you want the image sliced.

Once all the slices are drawn click on the ‘Preview Icon’ above the canvas.

Now you can click on each slice to set the output image type, quality etc from the dialogue boxes on the right hand side.

You can edit multiple slices at one by holding the shift key, then selecting the slices one by one.

Keep an eye on what the slice looks like, as well as the output file size (displayed to the lower left of the canvas) as you change the image type and move the quality slider up and down.

Once you are happy, choose ‘File>Export’.

From the ‘Export:’ drop down list, choose ‘Images Only’. Make sure that ‘Slices:’ is set to ‘Export Slices’.

Give the image a file name*. Hit Save.

 

*When saving multiple images, the filenames include a row and column position reference to make them easily distinguishable.

Eg. Sky_r1_c1.jpg, Sky_r1_c2.jpg, Sky_r2_c1.jpg, Sky_r2_c2.jpg… etc.


Fireworks is a great piece of software and definitely worth the investment if you plan to edit a lot of images for use on the Internet.

 

Comments are closed.