Best Image Sizes and How to Save Images For the Web (2022) (2024)

Saving images for the web has always been bit of a mystery for many. Uploading images that are heavy (original image sizing at 5000px width, 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).

This article is divided in several parts covering everything you need to know on how to prepare your images for the web. In the first part of the post we will list the recommended image sizes for your Flothemes site. Next, the article will cover 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 they’re optimized for speed.

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

Table of contents

• Why are image sizes and site performance important?
• What are the best size images for the web and Flothemes?
• Optimizing and saving images for web
• Image SEO

Why are image sizes and site performance important?

• Speed – according to a research done by Google, if a web page loads in more than 5 seconds, the probability that a mobile user will leave that page increases by 90%. By resizing and reducing image sizes, you make your website pages faster.
• User experience – good quality, impactful images helps visitors have a more engaging experience while they browse your website. By keeping those images optimized and loading fast – you’re ensuring a seamless and smooth experience for your visitors, which motivates them to spend more time on your site and explore your content.
• SEO ranking – site speed is a ranking factor. The faster is your site, the better you can potentially rank. Web pages with optimized images will load much quicker on both desktop and mobile devices.
• Sales – faster loading times and better SEO can help bring more users to your site, which increases your chances of being inquired and booked.

Note: when we talk about image size we mean the image dimension in pixels. Follow the website image size guidelines listed below to improve your site’s performance and provide a great user experience.

1. What are the best size images for the web and Flothemes?

When uploading images to the web there are a number of things to take into consideration, such as what is the image being used for, how large should the file be, and what type of image should be used for different areas on your site.

Image Use and Type

There are various cases where you will want to use different image sizes for different areas of your site, below I will cover the most common areas and the sizing options you can use for each. Note that these are recommended, retina friendly, sizing options considering that majority of users view the site on a device that is either mobile or 13-15 inches average size. However, if you are aiming to make the site look great for your 27 inch monitor (which has a really high resolution), note that it might not be what your potential clients use.

If you want to be more precise how your users view your site and your portfolio, you can check the devices used to access your site through your Google Analytics (go to Audience – Technology – Browser & OS – Screen resolution), and adjust the recommended size to match the required proportion of your average user.

Full Width Images

2400x1600px, jpeg, saved for web, and optimized

Across the site you might have sections where you need to use full width images that cover your whole screen from left to right. These areas can be hero images, full screen slideshows, banner images. To ensure that your full width images look good across any device big or small the recommended size is 2400x1600px. Note that devices have different ratio than the one you shoot and it is possible your images will be cropped when viewed on web. As a recommendation try to shoot wider shots than usual for your web content, to avoid cropping of important image content.

Inside Content Images

Horizontal – max width 1500px, jpeg, saved for web, and optimized
Vertical – max width 1000px, jpeg, saved for web, and optimized

On your site pages, there will be sections consisting of images, text areas, call to action buttons, etc. Basically these are the sections where the images are part of inside content (read as “not full—width”). In these cases, unless the recommended sizing is specified as some of our Flothemes blocks do, you can follow the above recommendations for horizontal and vertical images. Based on your ratio the height will adjust accordingly when you save your images.

Slideshow Galleries

Important considerations:

• if you are preparing images for your slideshow galleries: make sure they are all the same height recommended 1500px, regardless if they are horizontal or vertical

Blog Post Images

• if you are preparing images to upload inside a blogpost, make sure they are all the same width, recommended 1500px, regardless if they are horizontal or vertical

Featured Images

There are 3 types of featured images: portrait, landscape and hero images. Portrait and Landscape image sizing follows the same recommendation as Inside content images, while the recommended size for hero images is covered under Full Width images. The key to having good featured images is consistency. If you want to use all portrait make sure they are the same size, the same goes for landscape and hero images. If using a masonry grid, the sizing above is not so relevant, just make sure that the images are at least 1000px in width.

If you’re having any problems with image sizing make sure to take a look at the image sizing options in your Flothemes settings to make sure they are set up correctly.

Ways to find out correct image sizes for your web

It might be possible that the recommended sizes above won’t match your needs due to a specific layout. If you are unsure about the right image dimension, 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.

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

For example: when we inspect an image with this extension, 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 not be 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.

To summarize, when saving you images use these settings:

• 75% Quality
• .jpeg format (.png for logos and icons)
• sRGB colors

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 sizes 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, your 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: optimize images before uploading them to your site

There is one final step that can help you drastically remove excess data from your images, and reduce file size – we’re talking about tools such asJPEGminior TinyJPG.

These tools can help you further optimize your images. Choose one and run your images through it:

1. JPEGmini – this app allows you to compress your images and reduce their file size without any visible effect on the quality of the image. If you have the Pro version, there is an extension for Lightroom that will do this automatically on export – a highly recommended tool for any photographer.
2. TinyJPG or TinyPNG – you can run your images through tinyJPG or tinyPNG to compress your images further. There are 2 limitations though. With the free version of this tool, you can only compress 20 images at a time, and the file size per images should be under 5 MB.

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

Learn more by reading this comprehensive guide on how to optimize images for your WordPress site.

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.Rank Mathis 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.

If you would like to learn more about optimizing your site for speed, check out this useful guide.

Flothemes
Empowering You