30$
COUPON CODE:
SWEET30
Save $30 on any theme! Build a website your business needs!
30$
30$
COUPON CODE:
SWEET30
Save $30 on any theme! Build a website your business needs!
Posted by Allen Mark
2 years ago

Image sizes for the web and Flothemes

Image sizes for web

What are the best size images for the web 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 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.

Slideshows

There are various slideshow types, full screensimple slideshows, full width fixed height, and slick slideshows. However we’ll put them into 2 classes, full screen and regular.

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.

Full Screen Slideshow

Regular Slideshow

Width Auto x 1500px

For other slideshows, you can save all images to 1500px in height as width will always be auto.

Regular Slideshow

Gallery

Width Auto x 1500px

Much like slideshows, you can save all images to 1500px in height.

Gallery

Blog

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.

Blog

Featured Images

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

The hero images are those that are full screen, examples can be found in Porto, and Como.

Featured Images Hero Image

Landscape – 1200 x  900px

Featured Images Landscape

Portrait – 900 x 1200px

Featured Images Portrait

Recommended Image Sizes – Overview

When saving your images

  • 70% Quality
  • .jpeg format (.png for logos and icons)
  • 72dpi
  • 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)

Featured Images

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

Flothemes

Empowering You

What Are You Looking For ?