Welcome to our third tutorial on image optimisation. This time we’re taking a look at how to use Photoshop to prepare your images for use on websites. As we’ve said before in our past tutorials, if you’re using images on your site then you need to make sure that you optimise them properly prior to uploading and publishing.

The series started with a guide to using the GIMP tool and then we moved onto the ImageOptim tool for Macs. If you’re brand new to image optimisation then it’d be worth reading our introductory blog to get an overview of why optimising your images matters so much.

In this tutorial, we will be covering how to optimise images using Photoshop. By following the tutorial, you can shave some data off of every image, meaning that if you do it with every image file on your site you will save a significant amount of data. Photoshop is a high quality professional photo editing tool, and it is available on both Mac and Windows. It does, however, come with a small monthly fee of £8.57.

 

TUTORIAL no. 3 – Photoshop

Step 1.

– In order to start, you need to navigate to the File menu on the top bar (pictured below).

– Hold you mouse over the first option (File), you should see a few options in a dropdown menu. The second option should be open, and this is how you select what image you want to optimise.

– Click Open, and navigate to the location of your chosen image and double click on it in the window that pops up (or click the image and then click Open).

– In order to start, you need to navigate to the File menu on the top bar. Hold you mouse over the first option (File), you should see a few options in a dropdown menu. The second option should be open, and this is how you select what image you want to optimise.

– Click Open, and navigate to the location of your chosen image and double click on it in the window that pops up (or click the image and then click Open).

Step 2.

– Now you have selected your image and it has opened in Photoshop, you need to export it at a more manageable size. To do this, you need to go back into the ‘File’ menu (pictured below).

– Then, you need to move your cursor to hover on the export option, and you will see a side menu open. On this side menu are several options for exporting, but the only one you need to use is the ‘Export As…’ option (pictured below).

Step 3.

– The size that you need to export as will depend on what you are doing, for example if you want to add the image to a blog 300-600px in width might be fine for you. If however you want to use the image in a full width image slider than you might want to export at 2000px.

– If the image has transparent areas in it you will need to save it as a png in which case you cant change the quality any further and you can simply click ‘Export All’.

– If you don’t need transparency then select jpg which allows further optimisation of the image by changing the quality percentage, you could start at a really low percentage such as 30% and move up until you are happy with the quality of the image, generally as a rule of thumb 60-70% is a good value to use but you can go lower depending on what the image is and how detailed it is.

– When you are happy with the quality value and the image size press ‘Export All’ and save the image.

– Don’t forget to then run the saved image through imageoptim or equivalent program before uploading the image to WordPress.

Next Tutorial – Windows

The next tool we’re taking a look in our fourth tutorial is at will be the free Windows tool. Watch this space.

Save

Save

Save

Save

Save

Save

  • SBA 2016 Winner
  • chamber