Image optimization
Why decreasing file size is important when uploading images to your website
Image optimization — saving images for the web to a smaller file size — contributes to webpage faster load time, contributes to SEO and a better user experience (UX).
Information on this page:
What is image optimization?
Image optimization is a process that contributes to faster web content load time. The first part of the process is to decrease the file size of each image using a procedure that maintains image resolution quality. Adding a meaningful and descriptive alt tag to your optimised image during upload is the next step. The process contributes to content SEO.
Why is image optimization important?
Quick load time
In relation to quick load time, we all know how frustrating it is to land on a website with slow load time. It makes you want to jump off and try somewhere else
SEO
People jumping off your site too soon because of slow time will mean a high bounce rate, not a good signifier of site authority if the web page is more than, say, a ‘contact us’ page.
Accessibility
Alt tags for each image provides a description of the image. This contributes to accessibility for vision-impaired people relying on a screen reader so that they get the experience and information that other people have from your content. Alt tags are also an opportunity to contribute to content SEO by using keywords where they are contextually relevant (don’t willy nilly cram keywords into alt tags!). Adding alt tags to images on your site is properly finishing the job of providing quality content to your page.
Optimize the image by decreasing the image file size
Start with a high resolution image when possible. This will help ensure the image for your website looks as crisp as possible.
Image quality is maintained (to best possible) while decreasing the image resolution and file size.
Steps for optimizing images
1. Resizing image dimensions
If you have multiple images on a webpage, a basic rule of thumb for a standardised professional look is to have the image dimensions the same.
On ecommerce sites, all product imagery should be sized with consistent dimensions to ensure the images render on your page without being skewed, stretched, and/or without poor resolution.
Ecommerce website platforms like Squarespace or Shopify generally render product images to present as the same size. However, if the uploaded image is too small, or with markedly different dimensions, it might be stretched or skewed and therefore present as poor quality.
2. Minimise the file size (resolution)
High resolution image files, used in print media, are too large (in file size) to use as web imagery.
Images used in print media have high resolution (300+ dpi).
Images optimised for the web have low to medium resolution (72 – 200 dpi).
What will happen if you use images that are too large? The webpage load time will be very slow especially on mobile devices — not a good user experience.
File size rough guide for web images:
Web banner images file sizes: less than 200kb
Smaller content images for pages and widgets: less than 100kb.
3. Apply ALT tags
ALT tags are important for web content accessibility compliance. If some users have their web browsers set not to show images, the alt tag still renders and offers a description of image.
ALT tags can work towards search engine optimization: if you apply a meaningful alt tag that describes the image in relation to the page context, and include keyword(s) if contextually relevant, the tag will contribute to SEO. Also, search engines consider that completed alt tags contribute to meaningful and helpful content.
How to apply alt tags to images? This varies on the website platform you’re using. You’ll generally see a window during the upload process where the alt tag should be added.
Tools for optimizing images
Photoshop
Go to: File > Export > Save for Legacy (Export)
Free browser-based editing tools to resize images
Pixlr Editor will resize and crop images e.g. for setting the correct dimensions for a banner or widget. Then, after applying your changes, download the edited image to your desktop and upload it into the relevant Media folder in your area of the CMS. Although this editor is free, you do need to set up an account.
Decreasing file size and resolution
Tiny JPG — or Tiny PNG — reduces or compresses the file size of your images without losing quality e.g. optimising an image previously used for print media down from 500kb to 100kb.
Basically, this is all you need to do once you open these tools:
Drag and drop images from your desktop (or wherever) into the online tool (follow the prompts)
Select and apply the changes you want to make.
Download the edited image to your computer.
