Resizing Images for Web and Retina

As retina screens become more and more common place in personal computers, its time to start resizing your images for retina on your site. With Flothemes we use the 2x method, where you can upload an image twice the standard size, if a retina device is detected it will display the larger image, if not it will display the image at half the size.

The following sizes are a guideline for working with Flothemes based on the different use type for your images:

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


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.


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


Empowering You.

What Are You Looking For ?