Logo CWS PNG Long
CONTACT
START A PROJECT
SERVICES
MARKETING
E- COMMERCE
Close Icon Menu
EN
Logo Crazy Web Studio Phuket Dark

Image optimization for the web & How to?

Aug 21, 2017

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
-module images: 650 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

Issara Phuket Restaurant Website Design By Crazy Web Studio
Mar 25 2024

Issara Unveiled: Mastering Restaurant Website Design

Take a look at our recent project for Issara Restaurant, setting a high mark in restaurant website design and achieving 400+ booking requests in just 3 months.Issara...
Mao Mao Group Product Page List
Jan 24 2024

Custom Website Design for MAO MAO GROUP

Revolutionizing Online Presence: Custom Website Design for MAO MAO GROUPIntroductionIn an era where digital presence is pivotal, MAO MAO GROUP, a renowned leader in...
Crazy Web Studio Team In Patong Office Meeting Room High Resolution 1920px
Dec 18 2023

We are Hiring 2 Positions at Crazy Web Studio

Hiring in Paradise!🌟 Join Our Team at Crazy Web Studio Co., Ltd. in Beautiful Patong Beach, Phuket! 🌴 Are you ready to take your talent to an exotic paradise? Crazy Web...
Luxury Villa Nautilus In Patong Sea View
Nov 14 2023

Digital Elegance Nautilus Luxury Villa Phuket

Nautilus Luxury Villa Phuket -A Synthesis of Sophistication and Technology Welcome to the unveiling of Project Nautilus, a beacon of digital innovation for the esteemed...
Supersurf Kata Phuket
Aug 18 2023

Super Surf Kata: Where Web Design Meets Waves

In the bustling beach town of Phuket, Super Surf Kata stands as a haven for surf enthusiasts and beach lovers alike. When it came to creating an online presence as...
Go High Thailand Article
Jul 20 2023

Go High Thai: A Masterpiece cannabis directory

When it comes to crafting a modern, visually stunning online platform for marijuana dispensaries, the synergy between Go High Thai and Crazy Web Studio is nothing short...
Tann Beach Club Cover Foto
May 19 2023

TANN Terrace Beach Club: A Seamless Fusion of Design and Functionality

When it comes to creating an exceptional online presence for entertainment venues, the collaboration between TANN Terrace Beach Club and Crazy Web Studio stands as a...
Blue Tree Backgoround
Mar 19 2023

Crazy Web Studio Transforms Blue Tree Phuket’s Online Presence

Crazy Web Studio recently completed a comprehensive website design project for Blue Tree Phuket, an all-in-one entertainment hub. The project involved creating a custom...
Cafe Del Mar Website Header
Dec 02 2022

Café Del Mar Phuket – A Full Web Solution for Premier Beach Club

Our latest website design project at Crazy Web Studio involved working with one of Phuket’s most exciting and exclusive beach club – Café del Mar. Located in Kamala,...
CWS HIRING
Oct 06 2022

We are Hiring!

Crazy Web Studio Co.,Ltd., is hiring a secretary for their new office located in Patong. The requirements are easy, the work atmosphere is nice, the benefits are great....