Including images in your blog posts make them more attractive to your audience and increase readability by breaking up big chunks of text. They create space for our eyes to take a break, and make information more digestible. Images can also help to illustrate a point of view and bring greater depth of meaning to an article. As a rule of thumb you want to include at least one piece of media (e.g. an image) per post/page and ensure that your post has a featured image, which may or my not be the same as the featured image.
However, if you’re uploading images to your site that haven’t been re-sized and optimized for the web then your pages are likely to become bloated and sluggish, causing your website to load slowly. Slow loading pages on your site will increase bounce rates (readers who lose patience and leave your website) and this can have an overall negative impact on your search engine rankings or SEO. It is well worth the effort selecting appropriately sized images and/or resizing and optimising larger files.
Choosing Images Online for Your Blog
If you’re planning to source images for your blog online you’ll want to source royalty free images that are not copyrighted. It’s tempting to hop onto google images and pull an image from their search results, however, most of those images aren’t free to use and belong to other people who have uploaded images to their personal blog or website. (If you are going to search for images on Google, try adding the words “free” and “large” or “big” to your query e.g. “free large maple tree leaves” instead of just “maple tree leaves”.
The good news is there are a plethora of websites that offer royalty free stock media free of charge. Some personal favourites are:
- Free Stock Photography – https://www.pexels.com or https://pixabay.com/en/
- Free Stock Video – https://videos.pexels.com or https://html5backgroundvideos.com
Determining Image Size
Once you have your image picked out and have it saved to your computer you can determine it’s size by either hovering your mouse over the image and waiting for the info box to pop up, or right-clicking on the image and choosing ‘properties’. You’ll be able to see the image’s dimensions and overall file size. The dimension are in pixels and relate to the size the image will display. The overall file size is important because that’s the amount of data that someone’s browser has to download in order to view the image. The larger the file size, the more potential problems can arise.
The Dimension of this photo are 640 x 478 and it’s overall file size is 174 KB. This photo was downloaded from Pixabay and is optimized for the web, it’s a good example of the size you would want for a blog post.
Please note that a photograph downloaded from your camera would likely be over 1 MB in size (that’s about 1000 KB) and would need to be made smaller. You typically don’t want to upload images that are larger than 1MB and ideally they should be under 500KB.
Re-Sizing or Optimizing your Images
There are many online image optimization tools that will do the job for you. The absolute simplest one to use is Image Optimizer. You simply upload your image, choose the image quality (lower quality = smaller file size) and the dimensions you want, then click ‘Optimize Now!’ and download your optimized image. If you have access to Adobe Photoshop you can view instructions on saving Photoshop files for the web below.
Another favourite is https://tinypng.com / https://tinyjpg.com. Simply upload your files and watch them become web-ready for you.
Final Step! Give your Image a Web Optimized Title
Once your photo has been re-sized you’ll want to give your image a new name. Try to be as descriptive as possible while keeping it short, and use hyphens or underscores in place of spaces. For example, if you have a photo of a sunset in Tahiti and it’s current file name is IMG344456.jpeg you could rename it as tahiti-sunset.jpeg
Saving Images files for the Web in Photoshop
Open your image in Photoshop, crop and edit it to your liking, the choose File > Export > Save for Web. A dialogue box will pop up that allows you to choose your image file type and size. If you click on the ‘2 UP’ tab (top left corner) you’ll be able to see your original image and an optimized version below it as you make adjustments. I’ve highlighted some key points in the image below:
#1: Original image details: My image was originally 896KB.
#2: Optimized image details: The optimized image has been reduced to 140.1KB. The picture view allows you to see if there has been any degradation to the image by reducing file size. You can see the image quality here hasn’t been affected.
#3: I’ve chosen a high quality JPEG as the file output. If you’re interested you can play with the settings here and look at the split screen to see how the changes affect your image. I would recommend choosing JPEG for photographs. PNG files are great for images with a simple color palette like a logo, or images where you want to retain a transparent background.
#4: Image dimensions. You can use this input to scale your image to a desired size.
