Images Inspector

Image search optimization - a branch of SEO that aim improving organic traffic from image search - needs a good understanding of your website image assets.
Images Inspector is a tool to audit all your website images, analyzing your img tags and destination images in depth.

To get the most from the feature we recommend selecting the "Crawl images" and "Save images" options before exploring the website, so that the program could compute image sizes and weights, and show image previews.

Summary

The Summary tab sheet give you an overall perspective of the reports available in Images Inspector.
You can quickly select it anytime, even when not it is not visible, by clicking on the Show Summary link.

IMG tags found

The total number of IMG tags found in all pages of the current crawl session.

Tab content

The Summary tab gives you a visual overview of the IMG tags analyzed with a set of 3D pie charts, each giving evidence to a particular aspect:

Images Inspector summary page

• Pages by image
• Images by domain
• Images by protocol
• Images by Status Code
• IMG tag and ALT attribute
• IMG tag and TITLE attribute

Like all 3D pie graphs in Visual SEO Studio, the charts can be zoomed, rotated, copied and saved at pleasure.

View details

When a summary graph has a corresponding tab sheet, below it a View details link, once clicked, will select the corresponding tab sheet.

IMG tag list

The list of all IMG tags is the core of the tool: not only it provides the full list of all IMG tags in your site, it also details the size (KB) and dimensions (pixels) of the pointed images.
A handy image viewer at the right will give you immediate understanding of the image.

Images Inspector main table (several columns are hidden)

IMG tag list: Toolbar

IMG tags found

The total number of IMG tags found in all pages of the current crawl session.

Show

Sometimes is better to "see less" in order to concentrate on a single aspect you want to analyze.
This option permits you to filter the IMG tags and only show a subset of them matching common scenarios to be investigated in order to find cases that could improve the overall website SEO.
Switching this option is instantaneous because you are just filtering the result set, not searching it again.

IMG tag list, filtering options

• All IMG tags
  It is the default option: no filter is applied and the table lists all IMG tags.
• IMG tags missing the ALT attribute
  The alt attribute should contain an alternative text for the browser to show when the image resource file cannot be downloaded, and for visually impaired users using screen reader devices.
  That being said, the alt attribute is also a good opportunity from an SEO standpoint to provide the search engine with a short text describing the concepts (or "keywords" and aliases) you want the image to position for in image search.
  Purely decorative images not conveying any contribution to the page mission can be left with the alt attribute empty.
• IMG tags with SRC attribute pointing to non-'200 OK' image
  This filter permits you to easily locate missing images due to wrong URLs or missing files, and redirected images, which normally go unnoticed, or mixed content issues after a HTTP to HTTPS site migration because image addresses were hard coded. In all such cases it means the src attribute of the IMG tag should be fixed.
  In case of a 5xx error the issue should be investigated on the server side.
• IMG tags missing WIDTH or HEIGHT attribute
  If the browser knows in advance the dimensions of the image file in pixel, it can speed up rendering by pre-computing the required size of the image box to display.
• IMG tags with wrong WIDTH or HEIGHT value
  If the actual image dimensions in pixel are different than the ones given in the HTML attributes, the browser will have to resize the image visualized. It takes computing time, the end result is not great, and you are likely download an image bigger then need.
• IMG tags pointing to images hosted on external servers
  External images could be licit, like your images hosted on a CDN, or tracking pixels like Facebook's, but sometimes they can be caused by hot linking. Other times they can be a forgotten temporary image on spaces like DropBox.

Shown

The number of IMG tags found matching the filter selected in the "Show" option.

It is shown as a ratio of two numbers: the number of IMG tags listed after applying the filter, over the number of all IMG tags.
When the selected filter option is "All IMG tags", it is normal that the two numbers are the same, equal to the first number shown in the "IMG tags found" field.

Content

Clicking on the Content button a drop down menu will appear with the following options:

• Source page
  The right side Content panel will show the HTML code of the web page containing the selected img tag.
  Other page-level auxiliary panels at the right or at the bottom will show content related to the same web page.
• Destination image
  The right side Content panel will show a preview of the image file pointed by the selected img tag.
  Other page-level auxiliary panels at the right or at the bottom will NOT any show content.
  In order for the preview to appear, the "Save images" crawl option should have had been selected before the site was visited.

Choose columns

Clicking on the Choose columns you will be able to show or hide columns of the table.

Export

Clicking on the Export button a drop down menu will appear with the following options:

• Export to Excel
  Permits to export the content of the shown columns to an Excel document.
• Export to CSV
  Permits to export the content of the shown columns to a CSV file.

Search Analytics

Clicking on the Search Analytics button a dialog window will to permit you adding columns with Google "Search Analytics" data related to the URL of the page containing the IMG tag.

Bing/Yahoo

Clicking on the Bing/Yahoo button a dialog window will to permit you adding columns with Bing/Yahoo "Page Traffic" data related to the URL of the page containing the IMG tag.

Mozscape

Clicking on the Mozscape button a dialog window will to permit you adding columns with data from Moz related to the URL of the page containing the IMG tag.

IMG tag list: Column headers

Page URL

The absolute URL of the web page where the img tag of the image was found.

Image URL

The absolute URL of the image resource file pointed by the src attribute.

SRC value

The value of the src attribute in the HTML markup of the image. Attribute src can contain a relative or an absolute URL.

ALT value

The value of the alt attribute in the HTML markup of the image.
The alt attribute should contain an alternative text for the browser to show when the image resource file cannot be downloaded, and for visually impaired users using screen reader devices.
That being said, the alt attribute is also a good opportunity from an SEO standpoint to provide the search engine with a short text describing the concepts (or "keywords" and aliases) you want the image to position for in image search.
Don't just stuff a series of keywords, it should be a brief and descriptive text.
Purely decorative images not conveying any contribution to the page mission can be left with the alt attribute empty.

title

The value of the optional title attribute in the HTML markup of the image. Browsers usually use the title attribute value as a tooltip. Search engines can occasionally use the title value to associate a text to the image, in particular when no alt attribute is present.

WIDTH value

The value of the optional width attribute in the HTML markup of the image.
Must be an integer without a unit. The width attribute tells the browser the desired width in pixel to display the image. A good practice is indicating the real measure without trying to resize the image because it would slow down rendering time and distort the image. On the contrary giving in advance the browser the correct size permits to speed up rendering time. Using a properly sized image can also help reducing download time.

HEIGHT value

The value of the optional height attribute in the HTML markup of the image.
Must be an integer without a unit. The height attribute tells the browser the desired height in pixel to display the image. A good practice is indicating the real measure without trying to resize the image because it would slow down rendering time and distort the image. On the contrary giving in advance the browser the correct size permits to speed up rendering time. Using a properly sized image can also help reducing download time.

Image width

The actual width in pixel of the image, read from the image file.
The images need to be downloaded with the proper crawl option (default value for a normal site crawl) in order to gather this piece of information.

Image height

The actual height in pixel of the image, read from the image file.
The images need to be downloaded with the proper crawl option (default value for a normal site crawl) in order to gather this piece of information.

Bytes

The size of the image in bytes.

File size

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

Status (image)

The HTTP response code received from the web server upon requesting the image file.

Response codes can be summarized in five standard classes:

• 1xx Informative response – request was received and its processing is going on (it is very unlikely you will ever see a 1xx response code)
• 2xx Success – request was received successfully, understood, accepted and served (it is the response code you normally want to see).
• 3xx Redirection – the requested resource is no longer at the address used
• 4xx Client Error – request has a syntax error or cannot be honored
• 5xx Server Error – web server were unable to honor an apparently valid request

Status Code (image)

The textual description of the HTTP response code received from the web server upon requesting the image file.

Line

The line in the HTML file where the image tag was found.
The cell is an active link; clicking on it will highlight in the Content or DOM side panel (depending on what you choose from the resulting context menu) the image tag.

Position

The horizontal coordinate in the HTML file where the image tag was found.
The cell is an active link; clicking on it will highlight in the Content or DOM side panel (depending on what you choose from the resulting context menu) the image tag.

IMG tag list: Context menu

The IMG tag list table provides a context menu you can trigger by right clicking with the mouse on a page row:

• Copy page URL
  Copies in the clipboard memory the URL of the page containing the selected IMG tag.
• Browse page
  Navigates with the default browser the URL of the page containing the selected IMG tag.
• Copy image URL
  Copies in the clipboard memory the URL of the image pointed by the selected IMG tag.
• Browse image
  Navigates with the default browser the URL of the image pointed by the selected IMG tag.
• Show in code
  Selects the Content side panel and there highlights the IMG tag.
• Show in DOM
  Selects the DOM side panel and there highlights the IMG tag.
• Optimize image...
  Opens the image pointed by the IMG tag in the "Optimize image" tool.

Pages by image

Suppose you want to delete or resize an image, you need to know which pages use it. This is the go-to tool for finding it out. It groups all pages by image used in a img tag.

IMG tags by domain

This report groups all img tags by domain - actually by "property", it includes protocol and subdomain - to permit you easily spotting img tags for cases like:

• IMG tags that still point to an image URL with the wrong protocol after a HTTP->HTTPS migration
• IMG tags that still point to an image URL with the wrong domain after a domain migration
• IMG tags pointing to URL in temporary spaces like DropBox, which are not conceived to respond to many concurrent requests so that users may often not visualize the image
• IMG tags hot-linking to external resources
• IMG tags pointing to temporary subdomains

IMG tags by protocol

This report groups all img tags by protocol, to let you easily spot img tags causing mixed content issues (i.e. in a HTTPS web site, some resource are served with the unsafe HTTP protocol).

IMG tags by status code

This report groups all img tags by HTTP Status Code, including resouces that were not crawled.

Possible grouping keys are:

• Not crawled - resource not visited because of various possible reasons: external resource, Data URI image, resource blocked by robots.txt, etc.
• 1xx Informative response – request was received and its processing is going on (it is very unlikely you will ever see a 1xx response code)
• 2xx Success – request was received successfully, understood, accepted and served (it is the response code you normally want to see).
• 3xx Redirection – the requested resource is no longer at the address used
• 4xx Client Error – request has a syntax error or cannot be honored
• 5xx Server Error – web server were unable to honor an apparently valid request

Distinct images

This list of unique image URLs is particularly useful to sort images by weight, by image width in pixel and by image height in pixel.
In order to have such properties computed, the "Crawl images" crawl option should have had been selected before the site was visited.
Like in all other Visual SEO Studio grids, the table content can be exported using the context menu you get by clicking (on Windows) on the most upper left corner of the table, or (on Mac) right clicking any cell of the table.