Flothemes Image Sizes
What are the best size images for your 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 decrease 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.
Slideshows
There are various slideshow types, full screen, simple slideshows, full width fixed height, and slick slideshows.
Full screen
You should use 2880 x 1500px, remember that if you use a menu over the slideshow part of the image will be cropped, take this into consideration when choosing your images. Also remember that images will look different on varying devices, so remember to keep the focus of your subject in the center of your images if possible.
Simple Slideshows
This is a slideshow that shows only a single image at a time, take into consideration height, you should upload images of 1500px in height.
Full Width Fixed height
These are full width slideshows, with the option to set a fixed height. We recommend using images of 2880 x 1200px in height. The height of the slider should be set to around 600px in height.
Slick Slideshows
This allows a combination of images to be side by side, again the focus is on height, images of 1500px in height will work perfect here.
Galleries
Depending on the gallery type you’re using, it will depend on the size of the image you upload. When setting sizes for galleries focus on height with with the one exception of Fiji. I would recommend image sizes of 1500px in height.
If you are using Fiji, there is one gallery, type 2 that you scroll down the page, for this case you should consider width, images should be 1500px in width.
Featured Images
This is the image that you attached to be show for previews on your theme. We highly recommend adding a featured image to all posts and galleries.
Grid Views
Depending on the orientation you wish to have:
Square – 600 x 600px
Landscape – 600 x 400px
Portrait – 400 x 600px (again if you shoot in a different ratio reflect this here)
Make sure that the sizes above are also reflected in your image size settings, refer to your theme documentation for more info on this.
Masonry – If you’re using a masonry type option then specific sizing is less important, focus on the width, a width to 600px should work well.
List View
If you wish to use list view options, then consider uploading images of 1500px in width (If your blog is wide, try 2000px width).
Hero Images
Full sized hero images for posts and galleries, upload images here of 2880 x 1500px.
Blog Posts
Images for blog posts should be focused on width, depending on the width of your blog will depend on image sizing. However we recommend uploading images at 1500px in width (It can be up to 2000px width if your themes blog is particularly wide).
Image File Sizes
When uploading images to the web you must take into consideration image file size, that is the size of the image in KB’s. Larger image file sizes reduces loading times of your site, and therefore user experience. Images should be saved for the web to reduce the file size and increase loading times on your site. Uploading an image of 5000px in width is not user friendly and there are very few cases its relevant for a website, remember think about user experience, whilst it may be a portfolio, no-one is going to view it if it takes a minute to load.
You can see a quick article on optimizing images for the web here.
Flothemes Image Size Settings
Most of our themes will offer the option to choose image size settings. These options will be doubled for retina devices, so make sure when setting sizes that they are only set to the size you’d like the images to be displayed on a normal screen. For example a featured image in a grid will be 300x300px on a normal screen, but need an image of 600x600px for a retina screen. The setting should be 300x300px as we will do the work to double the image sizing. The image that should be uploaded is 600x600px.
Sizing Review
Saving Options
- 70% Quality
- .jpeg format (.png for logos and icons)
- 72dpi
- sRGB colors
Galleries – 1500px height, width auto.
Blog Posts – 1500px width, height auto.
Simple Slideshows – 2200 x 1500px
Slick Slideshows – 1500px height
Slideshow Full Width Fixed Height – 2880 x 1200px (make sure to match image size settings)
Slideshow Full Screen – 2880 x 1500px
Featured Images
- Grid Views – 600 x 400px or 600 x 600px or 400 x 600px (depending on what orientation you want for images)
- List view – 2400 x 1600px
- Hero images (full screen) – 2880 x 1500px.
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.
Troubleshooting
In some cases images might render in low quality even when the images have been uploaded in a high enough resolution.
This can happen because of various reasons. We will list the two most frequently met ones:
- JetPack’s Photon module decreases image resolution: While Photon is considered an useful module for speeding up the loading of your images, it will often decrease their resolution and thus making these look blurry on retina devices. Disabling it might help improve image quality:
- Using Large or Medium Sizes instead of “Full Size”: WordPress automatically generates three smaller versions of an image when it is being uploaded to your website. The sizes can be modified or previewed in the following section:
In some cases, your default size when uploading an image to the post might be one of these sizes which is usually smaller than your original image resolution and that can cause images to render in low quality. To avoid this from happening, make sure that the correct size attribute is selected when uploading an image to a post or page: