The Ultimate Guide to Saving Images for the Web

Saving images for the web has always been bit of a mystery for many. Uploading unoptimized images will not only create issues with the user experience on your site, but will also affect your SEO strategy (loading speed, bounce rate, ranking, etc). In this Ultimate Guide to Saving Images for the web we aim to show you how to inspect the various sections on your website to identify the correct sizes for your images before uploading them to the web. We will also explain how to export / save images correctly, so that they’re optimized for speed.

Finally we will provide some Image SEO tips, how to title your images correctly when saving them and why using ALT tags will improve your SEO. For already uploaded images to your site, we’ll show you how to find which images are too large and make your site slow down. Let’s begin!

1. Choosing the right image dimensions

One of the hardest parts about creating a website has always been selecting the right images, then making sure they are optimized and have the correct image dimensions for each section on your site. Thankfully, there are a few ways that can help you easily inspect your website images, and identify the correct sizing needed for each element on your site. First of all, we have a generic image size recommendation article which you can read here. It will give you guidelines on image sizing that should work for most themes.

An important thing to remember is that for retina devices, you need to double the image pixel density. What that means is, you need images twice the size for retina devices so they look nice and crisp. So once you’ve found the correct image sizes for each section on your site, you’ll want to double those sizes, and only then export and upload them to your site.

a. Using the Image Size Info Extension

The first method to find image sizes for your site is by using the Image Size Info extension for Chrome (If you don’t use Chrome on your computer, we highly recommend using it while creating your site). Once you’ve installed the extension, this tool will then allow you to find out the image sizes of every image element on your site.

Check out the images on your site, make notes, and then with this knowledge you’ll be able to tailor your photographs exactly to fit the spaces as they are intended in the theme design. Just remember, with retina screens you do require your images to be twice as large as the intended space. So if you have an image space of 750x500px, for retina it should be 1500x1000px when uploading to WordPress (or any other platform).

You can see in the example below that when we inspect the image, it’s being displayed at 780x520px, but it’s actual size is 1560x1040px. This is because we’re using a retina screen when inspecting the image. In this case, you can use the dimensions sizes to pick your image size.

On a non-retina device the displayed and dimensions sizes will remain the same. In this case, double up the numbers and upload images at that size.

The main limitation of this tool, is that it can’t inspect background images for sizing. On many themes, background images are used instead of image HTML elements, as they are more flexible when displaying images. If you’re unable to inspect the images because they are background images, you can use the next method to review image sizes on your site.

b. Using the Inspector Tool

With Chrome and Safari you can also use the developers inspector tool to find image sizes on the site. The principle will be the same as before, inspect the various elements on the site, and note down the sizes. Double the image sizes for retina devices and then upload them to WordPress, once they have been optimized for web and titled correctly for SEO.

The limitations of this method will be that if the site is using some responsive elements set in REM values, images may be shrunk when using the inspector in the same window. If the site is also using responsive elements, they’ll be larger on bigger screens, and smaller on others. It’s best to use a larger screen where possible when checking the site, so you may get the most accurate image sizing. In any case, using this method will give you a good indication of sizes for your site and will allow you to approach adding images to your website with more care.

Chrome

Chrome has built in developer tools, which is why it’s the most popular browser on the web for developers and designers. The following video explains how you can inspect the images on your site to find out their sizes:

Firefox

With Firefox, much like chrome, they have a built in inspector tool that allows you to check images for your site.

Safari

If you’re using Safari, you can use the inspector tool to see the sizes of images. Check the following guide on how to enable the developer tools.

Now you can go to different sections in your site and prepare the image dimensions.

For galleries you’ll want to look at the height of the images, as they are generally constrained by height (so width can be set to auto).
For blog posts you’ll want to note the width for your images, as they are constrained by width (the height can be auto).

For the rest of the elements on your site, you should use the method described above to get the correct dimensions, and upload them at optimal dimensions for your site.

Now that you know what dimensions you need for all the elements on your site, we’ll explain how to optimize all your images for size, that’s in terms of data sizing. The file size of your images is also very important for the web. Uploading bloated and heavy images on your website will strain your server resources, slow down your site, and in effect create a negative user experience.

2. Optimizing and Saving Images for web

There are a number of things to consider when optimizing and saving images for the web. You should consider what file type to use, JPG, PNG or GIF depending on the purpose. You’ll want to label your images correctly for SEO purposes and you’ll want to save them in the right color format (sRGB for web).

Depending on the purpose, you need to save images in one of the following formats .jpg, .gif, or .png. JPG will be the most common format when saving images for your portfolio website, they will also be the lightest in size.

For filenames, please make sure they are appropriate for each particular image or blog post. Use only letters, numbers, underscores and hyphens. Try to use only English letters. Characters from other languages, question marks, spaces, percent signs may upload incorrectly or cause unexpected behavior in your galleries or blog posts.

For example, if you’ve just done a boho wedding in The Biltmore Santa Barbara, label the images, boho-wedding-biltmore-santa-barbara_0001.jpg this will be much more SEO friendly, and could provide better ranking for your site.

Optimizing images in Lightroom

Let’s face it, there are lots of different settings to choose and endless combinations of numbers to input. However, if you already know the image format and required file image dimensions, it’s much easier.

In Lightroom, you can get to the Export Dialog in 3 ways.

1. Highlight and Export

You can simply highlight / select any photo from your Lightroom library and right-click on the photo. From the pop up menu select the Export option.

2. File and Export

The second way is to go to File -> Export:

3. Using the keyboard shortcut

The third, and fastest way is to use a keyboard shortcut:

shift + command + E (⇧+⌘+E)

It doesn’t matter how you get there. Any of these will work, so choose the easiest one for you to remember.

Lightroom Export Dialog

Now that you know how to export the images for web, we’ll cover the 4 sections and the various options to choose in the Lightroom export dialog to allow you to export optimized images for the web.

1. File Naming

Each export can feature its own rename settings. If you stick to the default option, your images will have the same name as the original files, and saved as a JPEG image. However we would highly recommend that you tick the “rename to” box and choose one of the many renaming templates that Lightroom offers to customize the exported images. In the File Naming, we renamed the image filenames to “Custom Name – Sequence” where the Custom Text is closely connected to our blog post title or blog post keywords.

2. In File Settings

Make sure that your Image Format is set to JPEG. This is the most web-friendly option. Your Quality should be no less than 65. Normally we set it to 75. Your Colour Space needs to be sRGB. This is the color space used by the web so it will render the best. DO NOT check the box “Limit File Size to:”. Checking that box would decrease file quality significantly.

3. Image Sizing

Check the box Resize to Fit and select Width & Height. In the box W: H: specify W (Width in pixels) to the value needed (1500px for blog posts, and 2880 for slideshows). By leaving the value in H (height) blank it will be set to auto sizing.

For Galleries, you can leave W as blank, and set H (Height) to 1500px, this should be optimal for most themes.

The sizings above are already optimized for retina devices.

4. Output Sharpening

Check the box next to “Sharpen For”and select the amount to “High”.

You can now Export the images, and follow this process anytime you’re exporting images.

Image Quality Settings

In a photographer’s dream world, we would always export images at maximum quality. In reality, we find out that maximum quality exports aren’t required. At web sizes, the differences in quality are often hard to perceive, and that means we can reduce the quality slightly, reducing the file size significantly.

As long as the images aren’t soft, you’re clients won’t know the difference between what picture you took and the image thats displayed on your site.

This also applies to colors of images. Everyone’s screen is calibrated differently, so worrying about small color variations between an image in a browser and in your editing tool of choice is a waste of time, unless it ruins the image quality.

On the upper end of the quality scale, there are diminishing returns. The difference in perceived quality between an 75% and 100% quality setting is hard to see, but it increases the file size significantly.

Given the above results, selecting the export of 65-75 quality. It strikes the correct balance of quality and optimal image file size.

Now it’s your turn to, rename your files, export them for the web, save them for web and you’ll have some really well optimized images for the web.

Bonus Step

There is one final step that can help drastically remove excess data from images, and reducing file size, is using tools such as JPEG Mini or TinyPNG.

If you have JPEG Mini pro, you can add the lightroom extension, optimizing images as you export them, simple!

If not, just run your freshly exported images through JpegMini or TinyPNG.

This will be the final step in creating fast web optimized images to keep your site’s speed up, and images looking great!

3. Image SEO

Now that you’ve got your images sized, optimized and uploaded to your site – now you’ll want to add ALT tags! This is the final step in creating optimized images for SEO purposes. The ALT tag is what search engines use to read images. Without them, your images are pretty much non-existent on the web.

Thankfully with WordPress you can go into your media library after upload, and label each image. One great plugin that will let you do this quickly is WP Meta SEO, when added you can go to WP Meta SEO > Image Information and add ALT Tags to any images where it isn’t present, once completed the plugin can be de-activated:

There are also several plugins that will add the alt tags automatically, and if you’ve went ahead and renamed the images like we mentioned in the previous section, you’ll have pretty well optimized ALT text. Automatic Image ALT Attributes is a good plugin solution for this, simply install it and it will automatically add ALT tags upon upload from the image description, or title.

So that’s it folks. The 3 steps to having optimized images for your website.

Start with figuring out your image dimensions, then save them correctly for the web, add proper titles and optimize their size. Finally, add alt tags to improve SEO via WordPress (It should be possible to add ALT tags in all content management systems, refer to the documentation to find out how, or reach out to support).

Finding Unoptimized Images

If you already uploaded images to your site and want to know how to find the ones that are slowing down your page, check out the following video. Tools such as GTMetrix or Pingdom, or using the browser console will easily let you find images that are too large for the web.

Flothemes Team,
Empowering You.

4 comments

    David

    11:08 August 8, 2017

    Thank you ! Very informative

    Kate

    16:23 August 12, 2017

    FANTASTIC (and thorough!) how-to-guide Tom! Thank you for making something technical pretty easy to digest!

    Glenn

    16:41 August 15, 2017

    JpegMini images look like rubbish though on 5k screens, so it's not future-proof

      Nata Leto

      09:18 August 17, 2017

      It all depends on your image settings and size, rather than Jpegmini. if you're uploading images for a 5k screen - they'll good good. otherwise, probably not.

Comments are closed.
What Are You Looking For ?
We need cookies to run our site optimally, by continuing to browse you agree to our cookie policy for our required cookies. If you’d like to update your cookies, check out how to clear cookies for your browsers here.
Accept