Semplice is optimized to make your site as fast as possible, but it's extremely important to upload images optimized for the web. To ensure your work is presented in the best quality possible, Semplice does not automatically compress your images when you upload them. 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 treatments.
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 most graphics or photographs, the image file format should be JPG.
- You can use PNG for graphics with transparency or flat blocks of color.
- For vector graphics and logos, SVG file format is best due to low file size and lossless image quality. Semplice fully supports SVG images.
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 a 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 the correct sizes in the first place. Smaller dimensions result 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 crisp images to a 1920 x 1080 screen and you are using a fluid grid, you’ll need to divide the width by 12.
Example:
1920/12=160px per Column
3Col =160px*3=480px
General content images
For images used in your page content, the same general rules apply. If you are using an image with large dimensions set to a width of two columns, it’s a waste of precious loading speed.
Image optimization
A fantastic way of decreasing load times on your site is to use an image compression tool. These tools will optimize and compress your images without losing quality, and cut down on image filesize.
There are a few great plugins out there that can do this for you. You can use them to optimize and compress images you've already uploaded to your site.
EWWW and TinyPNG is popular image compression plugins.
Troubleshooting
My images are appearing grainy or low-quality, despite being high-quality when uploaded
This can happen if you have image compression enabled in your hosting server. Typically, these plugins or services will serve compressed versions of your images depending on device width. If you are using Wordpress Jetpack, you will need to ensure image optimization features are turned off. You may need to get in touch with your hosting provider to see about disabling such features.
With the introduction of Wordpress 5.3, large images that exceed 2560px in dimension will automatically be compressed.
To disable this Wordpress core feature, you can create a child version of Semplice and add a line of code to your Semplice 'functions.php' file:
add_filter( 'big_image_size_threshold', '__return_false' );You can it right after the 'misc functions' line of code:
// -----------------------------------------
// misc functions
// -----------------------------------------