Why Image Size Matters
Accurate image sizing means your new image will fill the same space & won’t mess up your design/layout. But it isn't just about aesthetics, it's about performance and optimisation.
Images make up a significant portion of website data, and using oversized ones dramatically slows down loading times.
By resizing images to match their exact display dimensions, you minimise file size without sacrificing quality, resulting in a faster, smoother user experience and a happier, more engaged audience.
Step 1.
Find the exact dimensions
For exact measurements, I use a small Chrome extension
- Install the "View Image Info" extension.
- Install the extension and make sure it's activated.
- Navigate to the webpage with the image you want to swap
- Right-click on the image you want to change and select "View Image Info" from the context menu.
- In the popup window, note down the following: - Scaled Image Size: This will be something like "435 x 500px" and File Type: This will be JPEG, PNG, etc.
- Open your image editing software.
- Create a new document with the exact size noted down in step 3 (e.g., 435 x 500px).
- Set the document resolution to 72dpi.
Step 2.
Preparing your new image
- Import or place your new image in the document, crop it to the same exact size
- Export the image in the correct format (JPEG for photos and SVG or PNG for logos)
- Lower the export quality, play around with this to ensure your file size is as low as possible with out reducing the quality.
- Give the image a descriptive file name with relevant keywords (e.g., "red-convertible-car.jpg" instead of "image001.jpg").
More info here
Step 3.
Optimise & Upload your New Image
Once you have your image created & correctly sized, I always run the image through an optimisation tool.
See Top Tips section below for a list of my preferred apps/optimisation tools.
Optimising images before upload is crucial because it dramatically shrinks their size, leading to faster site loading, happier visitors, and improved search engine ranking - a win-win-win for everyone!
⚠️ Warning
Uploading heavy, unoptimized images can have serious consequences.
SEO Downhill:
Search engines prioritize fast-loading websites, and bulky images drag you down the rankings.
User Frustration: Nobody enjoys waiting for images to load. Slow websites lead to impatient bounces and decreased engagement.
Storage Squeeze: Those hefty images eat up storage space, and exceeding your plan can mean extra hosting fees.
So DO Take the time to optimise your images before uploading. It's a small investment that pays off big in SEO, user experience, and website costs.
Top Tips
Image editing Software
I use Affinity Photo (£70 once off cost).
This is an excellent image editor & much more affordable Photoshop alternative.
GIMP is a free image editing program
Image Optimisation Tools
1. TinyPNG: Free, online tool.
Simply upload your image & let it optimise it for you
2. ImageOptim
This is a small MAC app that you drag & drop images into and it automatically compresses them. This is my personal favourite.
If you don't have a Mac, then similar to TINYPNG, ImageOptim also offer an online optimisation tool for Windows users https://imageoptim.com/online