Optimising images for your website is essential. Visible is are the largest contributors to page weight and load speed, key elements in a high SEO score. When images are properly sized and compressed your website will load quickly, providing visitors with a seamless experience that encourages them to stay longer and engage more deeply with your content. In addition, search engines reward site loads that efficiently and use well named, descriptive images, helping boost your site visibility and reach. By ensuring image optimisation is a priority you're investing in better users satisfaction, higher ranking.s and a stronger brand present online.
Here's how
Sizing and resolution
- Hero images: (full-width-banners) longest side 2048px. Suitable for most desktops and monitors.
- For smaller images, use 1024px and a ratio of 3:4 or 4:5 for product shots, blog thumbnails or gallery items.
- Use Lightroom to crop and resize (more on this below.)
File size and compression
- Keep image files under 300KB (ideally 200KB) to avoid slow loading times.
- Use JPEG for photographs
- Use PNG for any images with transparent backgrounds.
- Use SVGs for logos and icons.
- Export images at 70-90% for JPEGs to preserve clarity and reduce the file size
File naming structure
- Keep filenames short and sweet, logical and descriptive. Avoid spaces and use - in between words.
- Use relevant for each filename to enhance SEO performance
- Remove all generic camera file names IMG_1987.jpg
- Rename using Lightroom's batch naming and export feature.
Workflow in Lightroom
- Crop and edit your images here
- Select the images you want to export and choose Export
- Set the length of the longest side to 2048px or 1024px
- Set the % to anywhere between 70-90% to reduce the file size (you will need to test this)
- Name the files in bulk Select Custom Text and add in your generic naming structure eg. -nomad-design-homewares
- Set export settings for JPEG
- Export all at once
- Add the product name or descriptive text to he beginning of the file name
- Compress any large files in www.tinyjpeg.com
- Upload to your website
More tips
- Check your images are not blurry
- Check your file names BEFORE YOU UPLOAD them.
- Add the alt text after you have uploaded the images to Webflow or Shopify.
- Store your original files and the compressed versions in separate folders on your computer.
Sorted and organised.
