Quick Method to Optimize Images for Web

Here is a quick method and description on how to quickly optimize your images for web use.

Optimizing images for website use is one of the steps required for website design. If you’re just starting out you might not have this step ‘automated’ yet. Fear not, here’s a quick way for getting images ready for web use.

Yes, you can do this a bit differently or use another image editor… I’m using FastStone Image Viewer for this method.

What you’ll need:

  1. Image editor 
  2. Online image optimizer

Both these option are free (bonus). If you don’t have FastStone Image viewer, head on over to https://www.faststone.org/ to download the program.

It starts out as an image viewer, you can install it as your default Windows image viewer. It loads faster than Windows’ native viewer, in full screen, plus, when you right click on your opened image you have a multitude of built in editing functions, core of which is a quick crop function, quick image resize and color correction. You can even adjust the curves. Then there is rotate, flip, resample, dpi adjustment, clone & heal, draw board, red eye removal, color adjustments, to name but a few. A real little gem of a program.  Sure you can fire up Photoshop for all these functions, but the title reads “quick method”.  …and you can setup your preferred 3rd party editor to edit from a right click in the sub-menu…

 

Step 1

Resize your image to the desired dimensions (Ctrl+R).  Whatever your application, get your image as close to the needed dimensions as possible. You don’t want to use a full HD image 1920×1080 px as a thumbnail (eg. 450×450 px) or post featured image.

Selecting the correct image size is the first part in reducing image size and load time.

Step 2

Once you have your correct size, run your image(s) through an image optimizer. 

Head on over to Tiny PNG-dot com. Upload your image (up to 20 images, max 5MB each), wait for the compression to complete and download again. Or you can batch download all the images in a zip folder. Easy peazy, image squeezy…

Yes of course there are other options, you can also try

Optimizilla

Kraken, or 

Image Optimizer, which will also resize for you in the same step.

Voila!, done.  Now upload your images to your website for use.

Results vary, but images should be between 40% – 75% smaller with negligible quality loss. Besides, this is for screen use, not print.

 

Tip:

Keep an eye on your image’s DPI.  Depending on the original’s source, it might start out at about 300 dpi, you can work with this, but it is generally recommended to end up a t about 96 dpi for web use.  

Don’t be alarmed if your image compression / optimization brings this down to below 100 dpi.

If you’re not happy with the end result at 96 dpi, you might opt to keep it at 300 or 200 dpi for a hero image but trading off quick load time against a bigger image size. 

Having slow loading images on your site, especially if accessed via a mobile device, is just frustrating and annoying for the end user. Especially diagrams or infographics.