Image optimization for the web & How to?

Aug 21, 2017

Gear Teeth With The Word Optimization 2023 03 15 08 37 29 Utc (1)

Image Optimization Phuket Web Company

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

Riot Image Optimizer Tutorial 01

step 1

Drag & drop the selected image into the RIOT window.

Riot Image Optimizer Tutorial 02

step 2

click “EDIT” & “RESAMPLE” in the menu bar
set output Quality & method of Encoding (recommended “Progressive 85%“)

Riot Image Optimizer Tutorial 03

Step 3

set the output Image width

-recommended image width:
-fullwidth: 1920 pixel width
-gallery images: 1024 pixel width
-modul images: 540 pixel width

if “Keep aspect ratio” is selected RIOT will automatically set the image hight
click “OK”

Riot Image Optimizer Tutorial 04

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

Riot Image Optimizer Tutorial 05

step 5

to optimize multiple images in a single task open the “Batch optimizer”

Riot Image Optimizer Tutorial 06

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”

Riot Image Optimizer Tutorial 07

step 7

If you like to use a custom image size open “Additional tasks” in the left upper corner and click “compress to size”

Riot Image Optimizer Tutorial 08

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

Written by

Andrea

More articles