Optimising images for website is a crucial activity as image size has a direct effect on page download speeds and your ability to rank in Google search results, especially on mobile.
I’ll cover two different methods here, one free, one paid.
What image types should you use
First of all let’s talk about what image type you should be using for each type of graphic.
Photos – JPGLogos, graphics – PNG
All logos and graphics should be saved as PNG or SVG files. While PNG files render less colors than JPG files, logos and graphics have far fewer colours than photos and are more suited to these formats. As with using JPGs for photos, the quality and file size of PNG files will be better than using the JPG format.
Free image optimisation – tinypng.com
Despite the name, TinyPNG is an excellent choice for compressing both JPG and PNG files. The major drawback that the TinyPNG has is that it only compresses the original file – in order to really compress your files well you need to use it in conjunction with Photoshop which is a lot more flexible.
Mass upload 20 images at a time to http://tinypng.com to automatically optimise the image for web
This is an automated tool which has a varying degree of success. It is worth doing a couple of images in Photoshop and in Tiny PNG and comparing them. If there is minimal difference in quality and image size, Tiny PNG will be the way to go.
Paid image optimisation – Photoshop
The best tool to use to optimise and convert images is Adobe Photoshop. As well as being about to edit all aspects of an image (dimensions, file type, remove backgrounds etc)
The following instructions are for Photoshop CC 2017 – if you have a earlier version of Photoshop the “Save as web” may be located directly under the File menu at File > Save as web.
Select File > Export > Save as web (Legacy) (keyboard shortcut: Alt+Shift+Ctrl+S) in Photoshop to manually optimise each image
Choose either JPG (photo) or PNG (graphic) image (for most PNG images I recommend selecting the transparency option)
Select the appropriate preset JPG (High) for photos or PNG 24 for line art and logos.
Select transparency if using PNG format and appropriate (it usually is unless the image is solid colour).
Under the Metadata drop down menu select “None”. This reduces the file size.
Under image size select the appropriate width. Usually this will be the maximum width that you intend to use the image on the page. Ensure that the lock toggle is locked so that the height resizes proportionally.
If saving in JPG format, you can finetune the file size and image quality using the Quality dropdown slider. When you do this use the zoom in the bottom left hand corner to enlarge the image so you can see changes in quality.
There is the option to record a range of actions for repetitive tasks.
https://helpx.adobe.com/uk/photoshop/using/creating-actions.html