A Guide to Adding Images to Your Website or Blog

As a communications professional, you’ll often find yourself tasked with adding content to websites. A significant part of this responsibility is knowing how to appropriately use images – an aspect that is far too often overlooked. Correctly handling images is more than just adding an attractive visual to your content; it’s an art and science that, when done right, can significantly enhance your website’s performance.

Improperly sizing images, neglecting to format them correctly, or failing to optimize can create a domino effect of issues, particularly impacting the site’s SEO negatively. And let’s be honest, who wants their website to fall in the search engine rankings due to easily avoidable image-related mishaps?

This guide will highlight various aspects of web images that might not have been aware of. We’ll also address common image-related pitfalls and how to avoid them, take a look at the different image formats, and guide you toward useful resources for image optimization.

Common Problems with Image Handling

1. Incorrect Image Size: A common mistake made by many when uploading images is ignoring the appropriate dimensions. The rule of thumb is never to upload an image larger than the maximum dimensions it needs to display. For instance, if the maximum width of your blog’s content area is 800 pixels, there’s no point in uploading an image that’s 2,000 pixels wide. Unnecessarily large images not only use up storage space unnecessarily but also lead to slower page load times. It’s crucial to understand that websites are not like print media; bigger does not necessarily mean better.

2. Ignoring File Size Optimization: The second critical issue is not optimizing the image for file size. Even if your image is appropriately sized, it might still be a ‘heavy’ file, consuming more bandwidth than necessary and leading to slower page load times. This is particularly important because page load time significantly impacts SEO and user experience.
3. Neglecting Alt Text: Alt text is essential for several reasons. It provides context to search engine bots, helping them understand the image content and thereby aiding SEO. Additionally, for visually impaired users using screen readers, alt text is the primary source of understanding the image’s content.
4. Misunderstanding Image Formats: Different image formats (JPG, PNG, SVG) have different uses, and choosing the wrong format can lead to loss of quality or unnecessarily large files.
5. Poor Image Naming: Lastly, poor naming of image files makes it difficult to manage and locate them in the image library. An appropriately named image is also more likely to rank in search engine image results, giving your website an SEO boost.

Solutions for Effective Image Management

1. Resizing Images: Before uploading, resize your images to match the maximum display dimensions on your site. Various tools are available for this, such as Photoshop, GIMP, or online services like resizeimage.net.
2. Optimizing File Size: Always compress your images before uploading. Compressjpg.com and compresspng.com are excellent resources for reducing your JPG and PNG file sizes without compromising the visual quality.
3. Adding Descriptive Alt Text: Make it a habit to add descriptive alt text to your images. This improves your website’s accessibility and boosts your SEO performance.
4. Appropriate Image Naming: Name your images thoughtfully. Use a clear, descriptive filename that provides some insight into the content of the image.

Understanding Image Formats

The three most common image formats for the web are JPEG (or JPG), PNG, and SVG. Understanding the difference between these formats, when to use each one, and how to optimize them can make a significant difference to your website’s performance.

1. JPEG (or JPG): JPG is a lossy compression method, meaning it removes some data to reduce the file size. It is best for photographs or images with many colours. It’s a common format supported by all web browsers. But be careful when compressing JPGs, as too much compression can lead to noticeable image quality loss.
2. PNG: PNG is a lossless compression format, meaning it preserves all the data in the image, leading to higher quality but larger files. It also supports transparency, which JPG does not. PNGs are ideal for graphics with fewer colours, like logos or icons, and when you need a transparent background.
3. SVG: SVG (Scalable Vector Graphics) is a vector format, meaning it uses mathematical equations to draw your image. This ensures the image remains crisp and clear at any size. SVGs are perfect for logos, icons, and simple illustrations but are not suitable for photographs.

Image Optimization

Image optimization is a process through which you reduce the file size of the image through compression algorithms before uploading them to your website. In many cases, you can expect to reduce the file size by as much as 60-70% per image. This can make a huge difference in SEO efforts, as search engines tend to favour sites that load faster.

Here are some drag-and-drop solutions for quickly optimizing your image assets before adding them to a website:

• compressjpg.com – A great tool for optimizing JPG files. Just drag the file into the window, and set the quality level once it’s uploaded (you can often go as low as 70% or even 60% without experiencing major quality issues)
• compresspng.com – The sister site of CompressJPG, this one focuses on PNGs. You don’t have the same quality level control here, but you can instead set the number of colours used in the image. You’ll have to experiment to get the best results – but it’s usually pretty perfect without adjusting any settings.
• svgOMG – Another drag-and-drop tool, this time for SVGs, svgOMG is perfect for reducing those already tiny SVG files down to basically nothing. It also has the added benefit of tidying up some of the potential issues faced when using SVGs on websites.
• tinypng.com – A great all-rounder but lacking in the ability to adjust quality levels, TinyPNG will do the trick when you just want no-nonsense image optimization.

What’s a Good Size for an Image?

It really all depends on what the image is for!

• For full-width images, like those found in many modern hero sections (the full-width bar with an image background at the top of the page), you should aim for around 200-300kb at most.
• For images that run the width of the content area, then 100-150kb would be a good target.
• For half-width (or smaller) images within posts, then you really shouldn’t be breaking the 100kb mark.

The main caveat to the above is that you don’t want your images to look poor, as that’s not going to reflect well on the site in general. There’s always a trade-off, but you should be looking for the smallest possible file size with acceptable quality.

As a fun little exercise, take a look at the recommended target file sizes above, then go and check out the file sizes of the last 10 images you uploaded to a website or blog. Were you close? Or were you a million miles away?

Sourcing Images and Icons

Finding high-quality, relevant images and icons is another major challenge. Under no circumstances should you ever, ever download and use an image from Google Images. It’s a legal minefield that’ll almost definitely end up in a nasty demand letter for thousands of dollars due to copyright infringement. Definitely not a good look if you’re doing client work.

Thankfully, there are plenty of websites that provide licensed or copyright-free imagery for you to use.

Paid Image Repositories

• Envato Elements – This is a general must-have for anyone doing any kind of creative work. Not only does it have a huge library of photos for a very reasonable monthly fee, but it’s also got music, graphic templates, video templates and much more. Honestly, everyone should have a subscription to this!
• Adobe Stock – This one definitely isn’t cheap, but you’re extremely likely to find exactly what you want. If you’ve got an Adobe Cloud subscription, you’ll get a decent monthly price for a limited number of downloads each month. There’s also a free repository on there that you could try your luck with.
• Canva Pro – Canva Pro, which I’m sure many of you are aware of or already use, also offers a library of images as part of your paid subscription.
• There are also many more options here, like Shutterstock, iSplash, or Getty, but I don’t really care for some of their practices, so I’m not going to directly link to them, sorry.

Free Image Repositories

While you might not find exactly what you’re looking for, if you’re on a budget, you’ll usually find something that’s “close enough” at one of these free image repositories (just make sure to pay attention to the usage terms to avoid any headaches).

• Pixabay – A pretty random selection, with a little bit of everything. Obviously, your mileage may vary, but it’s worth a shot in a pinch.
• Pexels – This one is great for scenery, backgrounds, and environmental imagery in particular, but it’s also got a whole lot more to it. Definitely worth a look!
• Unsplash – Very similar to Pexels, but with a slightly higher quality (in my opinion), this should probably be your first port of call for free imagery.

Wrapping Up

Optimizing images might seem like a small (and boring) piece of the content management puzzle, but it can have a significant impact on your site’s performance, user experience, and SEO. By understanding these issues and learning how to address them, you can make your website visually appealing and lightning-fast. And remember, the goal here is to strike the perfect balance between quality, organization and speed.

Oh, and to avoid super frustrated web developers wondering why on earth you’ve uploaded a dozen 6000px wide, 10.5MB images to a single blog post – trust me, that’ll make your life easier in the long run.