# Hyperflow Image Optimization

## Goals

* Optimize all images
  * HTML Images ( src )
  * HTML Media sercset images ( srcset )
  * Background Images
* Domain consistency for SEO 
* Edge-cache non-optimized images
* Minimal monthly hosting costs for optimization and caching

## Features

### Coverage

|            | Present                                   | Future                                                                           |
| ---------- | ----------------------------------------- | -------------------------------------------------------------------------------- |
| Coverage   |                                           | CSS Background Images                                                            |
| Asset URLs | `https://assets-global.website-files.com` | <ul><li><code><https://assets.website-files.com></code></li><li>Others</li></ul> |
|            |                                           |                                                                                  |

### Options

|                         |              |                                             |
| ----------------------- | ------------ | ------------------------------------------- |
| Multiple configurations |              | <p>Applied by;<br>- Custom attributes</p>   |
| Ignore image            |              | <ul><li>No proxy, no optimization</li></ul> |
| Quality                 | Fixed at 90% |                                             |
| Transform types         | Auto         | <ul><li>From and to types</li></ul>         |

* Images
  * Automatically detect and optimize all HTML-referenced images on the site
    * HTML Images ( `src` )
    * HTML Media srcset images ( `srcset` )
  * Configure the from and to formats
    * e.g. which to WEBP convert, which not to for animation purposes&#x20;

## Future

* Proxy other image types like PDF
* Possibly optimize them&#x20;
* CSS-referenced images such as background images&#x20;
* Ability to zone and classify image rules;
  * By page
  * Page section ( attributes )
  * Custom attributes override directly on image&#x20;
  * &#x20;

`https://assets-global.website-files.com`

`https://assets.website-files.com`

\`HTML Images ( `src=` )

HTML Media srcset images ( `srcset=` )

CSS background images

Future

alt domains

user images?&#x20;

uploaded images?&#x20;

/\*\*

* OPTIONS
* normalize zone string to [www](http://www).
* convert jpg to webp
* convert png to webp
* convert gif to webp
* convert svg to webp
* convert webp to webp
* questions regarding animation support
* quality
* cache settings - infinite
* added features like watermarking
*
* eliminate responsive images
* standardize responsive images
* fix 1vw's
*

\*/

## Configurations

### &#x20;<a href="#enable-transformations" id="enable-transformations"></a>

<br>

## Cassette

assets.sygnal.com

<https://1assets-global.website-files.com>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperflow.sygnal.com/hyperspeed/additional-notes/hyperflow-image-optimization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.