Faffing about with images for a website can be time consuming work. By the time you’ve trawled through a gazillion stock sites to find the perfect shots – or put yourself through the horrors of a photoshoot – you’ve still got to figure out how to present them on the page. What’s the best file type to use? How big should they be? How do you balance file size and quality?
A full rundown on how to resize images for web is a massive topic, so here’s my quick-fire guide to getting it done in a jiffy.
JPEG or PNG?
Photographs should be saved as JPEGs. This file type can handle lots of colour variation, shadows and gradients in a relatively small file size.
It’s better to save graphics as PNGs because they offer a higher quality file than a JPEG. The file size will be bigger, but since something like a logo tends to be fairly small, this won’t matter too much. PNGs can also handle transparency.
Size your images to fit your space
The bigger an image, the longer it will take to load. And since most visitors don’t have a lot of patience, it’s in your best interests to keep image sizes as small as possible.
If your blog is 750 pixels wide, don’t upload images that are 1900 pixels wide. This would require your website to first load the full image and then scale it down to fit your blog, which will suck up extra time. Use Photoshop, Lightroom or another photo editing program to correctly size the image first.
On my own and client’s websites, I like to establish a consistent set of image sizes right from the start. So for example, I might have a particular size for a blog image, a product image and a homepage image. This way, I don’t have to think about it every time I deal with an image. (Setting up presets in Photoshop makes this even easier – just click the correct preset and the image will automatically export in the correct size).
Save images for web
Modern cameras produce amazing, rich images. The downside to this? Massive file sizes. Photoshop makes it easy to save images in a more friendly web format. Use File>Export>Save for Web (Legacy) to find a happy balance between file size and quality. As a general rule of thumb, I tend to use a quality setting of around 60 and aim for a final file size of around 80-150 KB for smaller images, and 250-350 KB for homepage and hero images.
Compress images for web
Online compression tools can shave additional bulk off images. TinyPNG and Tiny JPG offer a fast and painless way to compress images. Both are free to use although there are limits to the number of images you can run through their software.
Rename your image
When you save your compressed image, give it a meaningful title rather than a generic img23.jpg or the like. I tend to use the main keyword of the post or page in the image title.
Fill in the ALT tag when your upload your image
This is a text description of your image and appears in the image container when the image can’t be displayed. It helps Google understand what you image is about, and can strengthen your site’s SEO. You can use the same, keyword-rich name you’ve used for the title.
Got a question about how to resize images for web? Get in touch at firstname.lastname@example.org
P.S. Photoshop is a pricey option for small business owners. If you’re looking for a free photo editor, give GIMP a whirl. It’s packed with heaps of useful image-enhancing tools and is compatible with Windows and Mac.