Optimizing images for Semplice

Last Updated: Jun 27, 2017

Semplice in general is optimized for fast loading times on our site, but there is also a part we cannot control because it depends on the content you are uploading. So you have this completely in your hands. We wrote this guide to help you making your site as fast as possible. The difference can be tremendous sometimes.

There are quite a lot of places where images come into play with Semplice. All of them need different sizes or treatment.

Choosing the right image type

The most important part when it comes to the balance between quality and filesize is to exactly know when to use which image format.

Different formats show there strenghts for different types of image content a nice rule of thumb is:
  1. JPG for photographic type images.
  2. GIF or PNG8 for logos or images with blocks of flat colour and no gradients.
  3. PNG24  for images using effects such as drop shadows or glows, which also require transparency.

If you want to read more about the different formats we can recommend the fantastic to the point guide on Sitepoint

or the detailed Wikipedia articles about the formats

Choosing the right image size

There are various different places and uses for images in Semplice. Each one needs a different image size. A very common problem is if users just upload one huge version of their image and use it for the cover slider, the thumbnails, the project panel and the content. This way the portfolio grid can grow to way too large sizes and it takes a lot of time to load it. So here are a few recommended images sizes and their usage.  

Cover Slider and Full Screen Covers

It depends on the graphic. Considering that most of the 27” displays are running either on 1920 x 1080 or on 2560 x 1440 right now we recommend using one of the two sizes and always keep an eye on the file size.  

Portfolio Grid

If you are using a non fluid grid with gutter the sizes are pretty straight forward. The height is variable and completely up to you but the thumbnails will always be proportionally scaled down to these widths. So the best way would be uploading the right sizes in the first place. Smaller dimension results in smaller file size so this is a good thing.
1 Col = 70px
2 Col = 170px
3 Col = 270px
4 Col = 370px
5 Col = 470px
6 Col = 570px
7 Col = 670px
8 Col = 770px
9 Col = 870px
10 Col = 970px
11 Col = 1070px
12 Col = 1170px

When it comes to fluid grids it is pretty much the same like with the cover slider, you need to find a good balance between quality and size. If you want to be sure you can also calculate the optimized values yourself. So for example if you want to deliver sharp and crispy images to a 1920 x 1080 screen and you are using a fluid grid you’ll need to divide the width by 12.

1920/12=160px per Column
3Col =160px*3=480px

Fullscreen Thumbnails

We can apply the same rules like for the Fullscreen Cover here except that the Fullwidth Thumbnails are limited to a height of 650px. So both 1920x650px and 2560x650px would be good values

Project Panel Thumbnails

These are always proportionally downsized to a width of 170px the height is variable. For example 170x170px would result in square thumbnails while 170x80 would be landscape and so on.

Images within the content

There is no real rule for this but just keep an eye on the same things like for all the other elements. If you are using a huge image inside a multicolumn 2 col element it’s just a waste of precious loading speed.

Automatically compressing images with TinyPNG

TinyPNG makes your website faster by compressing your JPEG and PNG images. This plugin automatically optimizes your images by integrating with the popular image compression services TinyJPG and TinyPNG. (https://tinypng.com/) - Especially useful if your working with a lot of large images. After installing the plugin navigate to 'Settings -> Media' and click the link to request an API key. After activating the plugin with your API key it automatically compresses every image you upload.

Please note that the automatic compression only gets executed after you upload an image so if you start using this plugin with an already full media library you can use this handy feature to compress them all at once. ‘Tools -> Compress all images’

Download: TinyPNG
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found