Why is it important to optimize images for your website?
They say a picture is worth a thousand words, which is one of the reasons images are so important e.g. in ecommerce. Without the customer being able to pick up, touch and inspect product, they rely heavily on the images to understand the color, the quality, and the story of the product.
So it goes without saying that your images need to be hi-resolution and crisp. But, this comes at a price. Large, high definition images can have huge file sizes. Put a few of these on your site and the customer experience of navigating can end up in long wait.
Not only will this cause visitors to bounce, but in time, Google will notice as well, and this can affect your SEO.
To omtimize all your Images for your webpresence the Crazy Web Studio recommends the image optimization tool RIOT.
What is RIOT?
RIOT stands for “Radical Image Optimization Tool” and is a very powerful, small and free image optimizer that will let you to visually adjust compression parameters while keeping minimum filesize.
A short tutorial how to use RIOT
Step 1
- Drag & drop the selected image into the RIOT window.
Step 2
- click “EDIT” & “RESAMPLE” in the menu bar
- set output Quality & method of Encoding (recommended “Progressive 85%“)
Step 3
- set the output Image width
-recommended image width:
-fullwidth: 1920 pixel width
-gallery images: 1024 pixel width
-module images: 650 pixel width
- if “Keep aspect ratio” is selected RIOT will automatically set the image hight
- click “OK”
Step 4
- click “Preview” in the right upper corner and the otimized image size will apear above the preview image
- click “Save” and choose the output folder on your device
Step 5
- to optimize multiple images in a single task open the “Batch optimizer”
Step 6
- drag & drop multiple images into the Batch optimizer window
- set the image width (as shown in STEP 3)
- set the output folder and click “Start”
Step 7
- If you like to use a custom image size open “Additional tasks” in the left upper corner and click “compress to size”
Step 8
- set the value in “Filesize treshold”
- click “Start”
Recommended Image Dimensions
Fullwidth Images
1920 pixel width
Gallery Images
1280 pixel width
Module Images
650 pixel width
