$50
COUPON CODE:
LETSDOTHIS
Save Big this week! All themes are $199! Choose your design!
$50
$50
COUPON CODE:
LETSDOTHIS
Save Big this week! All themes are $199! Choose your design!
Posted by Tom Robak
3 months ago

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 various sections on your website to identify the correct sizes for your images before uploading them. We will also cover how to export/save images properly, so that they’re optimized for speed.

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

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, and identify the correct image 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 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. 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, but saved as a standard image type, as JPEG. You can also 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, you need to make sure that your Image Format is set to JPEG. This is the most web-friendly option. Your Quality should be no less than 55. I (Tom Robak) am a Canon shooter, and I set it usually 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. Under Image Sizing, check the box Resize to Fit and select Width & Height. In the box W: H: specify W (Width in pixels) to 2048. Choose that number because it is big enough to look right on Facebook and is large enough for your wedding photography blog – the 2 places on the web where you’ll be sharing files most frequently. However, this number purely depends on your website theme. If your theme blog images are 800px long edge, you can use any number between 800 and 1600. Double size is for retina themes. In the Resolution box, type 72 and make sure the box next to it is set to “pixels per inch.”

4. In the Output Sharpening section, check the box next to “Sharpen For”. You can select Screen from the drop-down box and set the Amount to High. Remember that web sharpening can get crazy fast and you need to check what works best for you.

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 always needed. At web sizes, the differences in quality are often hard to perceive, and that means we can drop the quality slightly and reduce 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, I would likely select the export of 60-75 quality. It strikes the correct balance of quality and optimal image file size.

So go ahead, rename your files, export them for the web, save them correctly and you’re pretty much there.

One final step that can help drastically remove excess data from images, is JPEG Mini. If you have JPEG Mini pro, you can add the lightroom extension, so it will optimize them as you export, simple! If not, just run your freshly exported images through JpegMini. 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 correctly, they have been optimized, all the unnecessary data has been stripped away and you’ve just uploaded them 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. 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.

To do this, go into WordPress when the images are uploaded, and into your media library. Click on any image, and then on the right hand side, add text for ALT tags.

You can also use a plugin such as Automatic Image ALT Attributes, however it can’t be guaranteed that it will offer the best SEO optimized titles for your images.

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).

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.

Flothemes Team,
Empowering You.

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.

What Are You Looking For ?