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 items on your site. Remember when working with images on the web make sure to optimize them to increase loading time.
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 this is recommended sizing options, they can be increased or decreased depending on your site.
Full Screen Slideshow
2880 x 1500px
As a browser screen has a ratio of ~2:1 you’ll need to select images in a different ratio that you normally shoot. You can select 5-10 images and then you should crop them to the sizing above to get the most out of your images with minimal cropping.
Width Auto x 1500px
For other slideshows, you can save all images to 1500px in height as width will always be auto.
Width Auto x 1500px
Much like slideshows, you can save all images to 1500px in height.
1500px x Height Auto
For blog posts you’ll want to think about the width attribute, most will be around 7-800px in width so 1500px in width will work great.
There are 3 types of featured images, portrait, landscape and hero 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 900px in width.
Hero Image – 2880 x 1500px
Landscape – 1200 x 900px
Portrait – 900 x 1200px
Recommended Image Sizes – Overview
When saving your images
- 70% Quality
- .jpeg format (.png for logos and icons)
- sRGB colors
Slideshow Full Screen –2880 x 1500px
Regular Slideshows – 1500px height, width auto.
Galleries – 1500px height, width auto.
Blog Posts – 1500px width, height auto. (If using a wide blog, use 2000px in width)
To set the height auto in LightRoom, simply export, choose the option for “Height and Width” then leave either the height, or width field blank, this will mean the value is auto.
- Hero images (full screen) –2880 x 1500px.
- Portrait – 900 x 1200
- Landscape – 1200 x 900
If you want to choose image sizes specifically for your theme, check out our ultimate guide to saving images for the web.
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.