Semplice is optimized to make your site as fast as possible, but it's extremely important to upload images optimized for web. We don't change your images at all when you upload them to Semplice, so if you upload big images, they will slow down your site.
There are many places and uses for images in Semplice. Different uses and types of content require different sizes and treatment.
General rule of thumb
The most important part in balancing quality and file size is knowing exactly when to use which image format.
Your image size and dimensions highly depend on the content itself but generally, following these rules will ensure your images are crisp and clear without compromising loading time:
- Image file size should be under 1mb (unless it's an animated GIF)
- For photographs, image format should be JPG
- For logos or images with blocks of flat color (and no gradients), use GIF or PNG8
- For images using effects such as drop shadows or glows (which require transparency), use PNG24
If you want to learn more about different format options and when to use them, this straightforward guide will help.
Choosing the right image size
A common mistake is uploading one huge version of your image and using it for the cover slider, project thumbnails, the project panel and the content. With this approach, your portfolio grid will grow to way too large and take a long time to load. Instead, follow this guide for uploading images to different places in Semplice:
Cover slider and full screen covers
It depends on the graphic, but since the average 27” display is either 1920 x 1080 or 2560 x 1440, we recommend using one of the two sizes and always keeping an eye on the file size.
Non-fluid portfolio grids
If you are using a non-fluid grid with gutter, the sizes are pretty straightforward. The height is variable and completely up to you, but the thumbnails will always be proportionally scaled down to these widths. So the best method is to upload correct sizes in the first place. Smaller dimensions results in smaller file sizes, which is good!
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
Fluid portfolio grids
When it comes to fluid grids, the approach is similar to the cover slider: You need to find a good balance between quality and size. If you want to be sure, you can 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
We can apply the same rules as the Fullscreen Cover here, except that the full-width thumbnails are limited to a height of 650px. So both 1920x650px and 2560x650px are safe values.
Project Panel thumbnails
These are always proportionally downsized to a width of 170px, while the height is variable. For example, 170x170px would result in square thumbnails while 170x80 would be landscape and so on.
General content images
For images used in your page content, the same general rules apply. If you are using a huge image inside a multicolumn 2 col element, it’s a waste of precious loading speed.
Automatically compressing images with TinyPNG
The TinyPNG plugin makes your website faster by compressing your JPEG and PNG images. The plugin is especially useful if you're working with a large batch of bit images.
After installing and activating the plugin, navigate to Settings > Media in WordPress and click the link to request an API key. After activating the plugin with your API key, it automatically compresses every image you upload.
If you already have a full media library, you can still use the plugin to compress them all at once. Just go to Tools > Compress in WordPress to do this.