How to save images for web pages & blogs

about image quality - new zealand sunrise photo at 45.6 kb

Why you should save images for web

The point of saving images for web is to compress the file size so your web page loads fast. While we are here, we are going to go over some basic points about best practices for images on a website.

If this is all new information to you there will be a bit of learning. But it is important for your website and business. Why does it matter?

  1. Good images sell your product or service
  2. The right images can rank and drive traffic to your site
  3. If your images aren’t prepared correctly they can make your pages really slow to load. This is bad for your ranking in Google, and it’s bad for your guests. If your page is too slow and it takes forever to load they will go somewhere else. Google will know this, and rank you even lower.

About Image Name, Size & Quality

To make photos look really good on your website as well as loading quickly, you need to make sure they are properly prepared and sized. There are 3 things you need to get right:

1. Image Name. It is much better to have an image called something that describes it. Not only will you be able to find it later, search engines will have an idea of what it is (there is another way search engines know what images are called – alt text – we’ll get into that in the next post on how to add images to your website).

2. Image Size. This refers to the dimensions of the image. Images are measured in pixels (px). To give a rough idea, a smallish laptop is around 1200px across. A large screen is a lot bigger.

3. Image Quality. This comes down to the file size. File size is measured in Megabytes (MB) and Kilobytes (KB). 1 MB equals 1000 KB. The goal is to balance the image dimensions with the file size to get a well-sized image that is no more than 100 KB. If you get a photo from your camera, it could be anything from 1 MB to 4 MB or more. As a rule of thumb we don’t want any images larger than 100 KB. The smaller the file size the better. But if the file size is too small, the quality will be poor. It is about balancing image size and file size to get an image that is a good size and good quality.

Images are not all created equal

An important thing to note is that image size does not directly equal file size. Images can be the same size, but compressed differently. Compressed means the file size is made smaller – this has an impact on quality, but up to a point most people don’t notice.

Check out the two images below. They are the same photo. The original image was 2.64 MB (2640 KB). They are the same pixel size. They have both been compressed using Photoshop (how to do this is found below).

The below image is 1280 x 720 pixels. The file size is 98.2KB.

how to save images for web - about image quality - photo at 98.2 kb

The below image is the same pixel size as above, but it is compressed more and the file size is 45.6 pixels.

how to save images for web - about image quality -  photo at 45.6 kb

Both these images actually look pretty good. The second image, at 45.6 kb, is 58x smaller than the original and will load a lot faster.

Preparing images: An overview

Before uploading new images to your website, there are a few things you need to do first:

  1. Name the image – call it something specific so it is easy to find later.
  2. Resize the image – change the image size so that when people visit your site they don’t have to load a huge image – that eats up bandwidth and makes the site slow.
  3. Compress the image – shrink the file size so the page loads faster.

Step 1: Change the filename

Pretty simple. This is just a matter of clicking on the filename twice (slowly) so you are given the option to edit the name, and changing it from “DSC0128.jpg” or whatever your image is called, to something that describes the image eg. “jade_skiing_in_colorado.jpg.”

Step 2: Choose the right dimensions

As mentioned above, images are measured in pixels.

When choosing the dimensions for your image you don’t want to make it too small – if the screen is big the image will stretch across and look bad. But you don’t want it too big either – larger images will have a bigger file size. The goal is to resize the image so that it is no larger than it will ever be on the page. With responsive web design, it’s hard to know this, so below is a rough guide – follow this and you’ll do better than most people out there. Basically, we are looking to get a balance between image dimensions and file size.

A rough guide to choosing the right dimensions:

  • If the image is going to be used on the page beside text, 800px wide is enough. This is big, but it allows for when people view on tablets and the image might take up the entire screen.
  • If the image is to go across the page, 1000-1200px is OK. Most websites don’t go much wider than this.
  • If the image is a background image that takes up the entire width of the screen, 1800px is enough. Any bigger and the file size will be too big, or it will look bad after compressing.

Step 3 – Resize, compress and save images for web

Below you’ll find 3 ways to do this.

Step 3 Option 1: How to save images for web using Photoshop

Photoshop is paid software from Adobe. If you don’t have it on your computer, and don’t want to fork out the money to buy it just to prepare images for your website, then go down to “Step 3 Option 2: How to save images for web using Gimp” below.

Photoshop has been my go-to way to do this for years – you can quickly and easily change the image size and compress the image with a lot of control. The process to do this is simple and takes just a minute or two.

If you prefer watching tutorials, this short video on Youtube guides you through the same things you will find in this post.

  • Firstly, open the image in Photoshop – open Photoshop, in the top bar click File > Open and then the image you want.
  • To resize the image, click on “Image” in the top bar then “Image size” in the drop-down.
  • In the pop-up box, make sure the bottom boxes (scale styles, constrain proportions and resample image) are checked, add in the new horizontal pixel value, and click OK.
save images for web using photoshop - resize
  • Next, click on File > Save for Web.
  • Depending on your view settings you’ll see something different. The things you need to pay attention to are the “quality” setting and the image size it will create.
  • Adjust the quality until you get the image as small as possible without looking horrible. Generally you don’t want to go below a quality setting of 25-30. You want the image as small as possible (ideally less than 100 KB) while still looking good.
  • Finally, click Save, give the image name a suffix (Web, 02 or something) and click save again.
  • You’re done! Your image is ready to upload to the website.
save images for web using photoshop - compress
Step 3 Option 2: How to save images for web using Gimp

I had never used Gimp until making this tutorial, but I knew it was a free option and had heard it was great. And it is! To give you an option using free software – here it is.

If you prefer watching tutorials, this short video on Youtube guides you through the same things you will find in this post.

  • Firstly, open the image in Gimp – open Gimp, in the top bar click File > Open and then the image you want.
  • The image dimensions are shown in the top of the image window
  • To resize the image, click on “Image” in the top bar then “Scale Image”in the drop-down.
  • In the pop-up box, enter the Image size width or height that you want. If the corresponding value doesn’t automatically change along with it, click the chain icon directly to the right.
  • Click “Scale”.
save images for web using gimp - resize
  • Next, click on File > Export As. A window should pop up.
  • In the name field, enter something specific eg. nz_beach_and_sky-WEB.
  • At the bottom, where it says “Select File Type (By Extension)” click this and choose “JPEG Image”, then “Export”.
save images for web using gimp - preparing to compress
  • In the pop-up box that opens, make sure “Show preview in image window” is checked, and you’ll be able to see the file size.
  • Click on “Advanced Options” and uncheck “Save EXIF data”.
  • In the Subsampling box, choose “chroma quartered” or “chroma halved” – whichever gives the best quality.
  • Slide the Quality bar down until the image is as close to 100 KB as possible. If a quality value of 50 gives you an image size less than 100 KB use that. Finally, click “Export”.
  • You’re done! The image is ready to upload to your website.
save images for web using gimp - compress and export
Step 3 Option 3: How to resize photos and save for web using ResizeImage.net

I have never used an online tool to resize photos before, let alone one that does a good job of resizing and compressing them. To be honest, I didn’t think I’d find a good one, ad nearly gave up. However I found a great one with a generic name – resizeimage.net

If you prefer watching tutorials, this short video on Youtube shows you how to use this online tool.

  • Firstly, open resizeimage.net in your browser.
  • 1: Click “Upload an image” and select your image. The image will take some time to upload – there is a bar which tells you the status.
  • 2: Crop the image if you need.
  • 3: There is an option to rotate your image.
  • 4: Choose the image size you would like – I chose 1200 wide.
  • 5: You can remove the background, make transparent or add color. I chose “no replacement”
  • 6: Select output format – I chose JPG.
  • 7: Optimize your image. Choose “Normal compression” and click “Resize Image”. It will load and then tell you below what the new image size will be.
  • You can then play with the Image quality value, clicking “Resize Image” each time. Once you get to a file size you are happy with – in my case 98.1 KB (down from 4 MB) click “Download Image”.
  • Note: The image will be called the same as the original. You will want to add a suffix (like -WEB) to ensure you don’t overwrite your original.
how to resize images online

Is there anything you need help with that wasn’t clear, or that wasn’t covered here? If so leave a comment below with details and I’ll add more to the tutorial!

ABOUT FLICK DIGITAL

Flick Digital is a digital marketing agency based out of Hawke’s Bay, New Zealand. If you are a NZ business see this page for SEO, digital marketing and web design in Hawke’s Bay, otherwise check out our homepage for more.

Comments 2

  1. Pingback: Learn how to edit text using Cornerstone, the X-Theme visual page builder.

  2. Pingback: How to update images using Cornerstone - Flick Digital Co

Leave a Reply

Your email address will not be published. Required fields are marked *