Images

Increase revenue, productivity, and customer satisfaction/loyalty with 7x faster page load time. Decrease cost with 50% less bandwidth and energy.

 

How It Works

Each <img /> element in the HTML output that contains a src attribute is replaced with the following:

<img src=”%1″ style=”background:url(%2) %3px %4px;”/>

The content of the resource pointed to by the src attribute is added to a single consolidated resource.

%1 = a reference to a 1×1 clear GIF
%2 = a reference to the single consolidated resource
%3, %4 = X, Y coordinates of the content in the single consolidated resource

As a result, request headers and response headers are sent for a single consolidated resource instead of X (29 on average) number of resources.

Compression of the single consolidated resource is greater due to the need for only one gzip or deflate wrapper instead of X (29 on average) and the likelihood that Website images share a “look and feel” which leads to more repeated RGB/ARGB values in a single consolidated resource, taking advantage of the dictionary that has already been created.

 

Fine Tuning

In some cases, you may need to fine tune a page. Squash Compression allows you to enable/disable image processing at the page level and even at each <img /> tag. Please help us make Squash Compression better by sharing with us any situations where you have to do this!

 

Enabling on a Web Page

You can enable image processing at the page level.

If you installed Squash Compression in “On” mode, there is nothing extra that you need to do.

If you installed Squash Compression in “Off” mode, then add the following at the top of the page (don’t worry, it won’t be emitted in the final output):

<!--sc_image_on-->

 

Enabling on a <img /> Tag

If you need tighter control, you can enable image processing per <img /> tag.

If you installed Squash Compression in “On” mode, there is nothing extra that you need to do.

If you installed Squash Compression in “Off” mode, then add the following attribute and value to the <img />l tag (don’t worry, it won’t be emitted in the final output):

sc_image_on=”1″

For example:

<img src=”image.png” sc_image_on=”1″ />

 

Disabling on a Web Page

You can disable image processing at the page level.

If you installed Squash Compression in “Off” mode, there is nothing extra that you need to do.

If you installed Squash Compression in “On” mode, then add the following at the top of the page (don’t worry, it won’t be emitted in the final output):

<!--sc_image_off-->

 

Disabling on a <img /> Tag

If you need tighter control, you can disable image processing per <img /> tag.

If you installed Squash Compression in “Off” mode, there is nothing extra that you need to do.

If you installed Squash Compression in “On” mode, then add the following attribute and value to the <img /> tag (don’t worry, it won’t be emitted in the final output):

sc_image_off=”1″

For example:

<img src=”image.png” sc_image_off=”1″ />