Manual: Optimize image

The feature "Optimize image" of Visual SEO Studio, documented in detail.

Optimize image

Having web pages fast to load can improve dramatically your visitors' user experience, and indirectly permit better ranking in the search engines.
Images are often the heavy loads preventing to achieve the desired performances. Visual SEO Studio provides you a powerful tool to optimize image size directly within the program.

Choosing the right format can dramatically reduce file size
Choosing the right format can dramatically reduce file size
(93% of size saving in the example)

You can access the Optimize Image tool via context menu anywhere from the Images Inspector feature.

In order to have the Optimize Image tool available, the crawl session must have been set using the "Store images" option enabled, and the image should have downloaded properly with a HTTP "200 OK" response code, with no truncations.

URL

The address of the original image to be optimized.

Original

This pane summarizes the properties of the original image to be optimized.

Width

Width in pixels of the original image.

Height

Height in pixels of the original image.

Format

Original image format.

Supported formats for the original image are all those currently supported by the SEO spider:
BMP, TIFF, JPEG, GIF, PNG and WebP.

Preview

This pane permits you to set the properties of the modified image.

Width

Width in pixels of the modified image.
You can decide to keep the same width, or to shrink the size to a lesser value.

Height

Height in pixels of the modified image.
You can decide to keep the same height, or to shrink the size to a lesser value.

Maintain aspect ratio

When this option is selected, changing the Width or Height values will change the other accordingly to keep the same horizontal and vertical proportions as in the original image. Default value is "true".

Format

Format of the modified image. By default it is the same of the original image, when available.
You can achieve the best results in terms of compression and end quality by choosing the most appropriate format, which depends on the original image features.
Available options are:

  • JPEG
    The JPEG format uses a lossy compression that can degrade an image up to a certain degree without perceived quality loss.
    It is usually the best suited for photographs and paintings of realistic scenes with smooth variations of tone and color. For example, travel blogs prefer this format as it can provide high compression while keeping a good visual quality.
    It is not the best choice for images with sharp contrast and uniform colors, and does not support transparency.
    The program permits to change the compression by tuning the Quality parameter from 0 (lower) to 100 (higher).
  • PNG
    The PNG format normally uses a lossless compression and can represent both photographs and images with sharp edges, uniform colors and transparency.
    It's best usage is in case of screenshots, logos - where you need a rich color palette - or realistic photos with a uniform background or transparency, often used in e-commerce sites.
    Although the PNG format is normally lossless, the program can compress images significantly by reducing the color palette choosing a smart selection of colors that minimize the perceived quality loss. Tune the Colors parameter to choose the number of used colors from 2 to 256.
  • WebP
    The WebP format should offer the best of the two JPEG and PNG formats: high compression of photographic images and transparency.
    Today downside is its lack of support by Safari browser and in general by Apple devices.
    The program permits to change the compression by tuning the Quality parameter from 0 (lower) to 100 (higher).
    Note: this option in the Mac version is only supported on systems with macOS 10.14 or newer, otherwise it will appear disabled.

Quality / Colors

For JPEG and WebP images you can change the compression by tuning the Quality parameter from 0 (lower) to 100 (higher).
For PNG images you can tune the Colors parameter to choose the number of used colors from 2 to 256.

When the window first opens, it will find and set the maximum value that guarantees a better compression than the original file size.
This might not be the most efficient value in terms of quality and size ratio using the selected format, you should test lower values to see if the quality is still satisfactory.

Original image viewer

File size

The size of the original image, expressed with an easy to read format (in bytes, or KB, or MB... depending on the actual byte size).

Thumbnail

A viewer showing the original image.

When the image shown is bigger than the available pane - because is zoomed out, or because it is actually bigger - clicking on the image the mouse pointer will assume this shape and you will be able to move it to focus on the desired detail.

Zoom

Tuning this control you can zoom-in or zoom-out the original image thumbnail to check its detail level.

Fit image to panel

When selected, this option will zoom-out the original image to fit the thumbnail panel if more ample than the latter.

Preview image viewer

File size

The size of the modified image, expressed with an easy to read format (in bytes, or KB, or MB... depending on the actual byte size).

Thumbnail

A viewer showing the modified image.

When the image shown is bigger than the available pane - because is zoomed out, or because it is actually bigger - clicking on the image the mouse pointer will assume this shape and you will be able to move it to focus on the desired detail.

Zoom

Tuning this control you can zoom-in or zoom-out the modified image thumbnail to check its detail level.

Fit image to panel

When selected, this option will zoom-out the modified image to fit the thumbnail panel if more ample than the latter.

Padlock

The Padlock button permits to lock the two thumbnails to move and zoom them together.
By default the padlock is open, and the two images can be zoomed and moved independently.

  • Open padlock: the two images can be zoomed and panned independently.
  • Closed padlock: the two images will be moved and panned together, synchronously.

Its purpose is to let you compare the two images details with ease, to check whether the chosen format has preserved an acceptable quality level.

Comparing before-after details with the Padlock feature
Comparing before-after details with the Padlock feature

Closure buttons

Save

Saves the image optimized in the desired format.
The button will appear disabled if the chosen parameters would produce an image heavier than the original.

Cancel

Closes the window without saving the modified image.