Saving images for the web has always been bit of a mystery for many. Uploading images that are heavy (read 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 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 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. What are the best size images for the web and Flothemes?
- Chrome only opens as a thumbnail - will not go full screen 0 Recommended Answers 4 Replies 49 Upvotes. When I try to open Chrome and click on the icon to access the Internet, it opens only in thumbnail view. It does not open so I can access the Internet. When I hover my mouse over the taskbar icon I can see the thumbnail view is open showing.
- Converting thumbnail of photo into JPEG? Is there a way to take the thumbnail of a picture and convert it into a full size image? I have some photos from my digital camera, and the thumbnail for them are fine but the image itself is corrupted.
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
I was able to simplify a recent post I made by editing to remove the full-size image; that left just the thumbnails. Although not a problem for faster connections, the full-size images may slow down the page loading for some and affect data usage on portable devices. Drag the thumbnails to a folder or alt-click to save the full-size image - ctrl-click to open an image in a new tab - Optional automatic gallery PLEASE NOTE Only works with links to real images.
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 27inch monitor, 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, 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.
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
- 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
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).
Youtube Thumbnail Image
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.
Standard Thumbnail Image Size
Flothemes
Empowering You