How image optimization works (and how to turn it off)

TeleportHQ optimizes your uploaded images automatically. When you publish or export your site, each image is resized to the size it's shown at on the page, so your pages load faster. If an image looks blurry on your live site, right-click it in the Assets Manager and choose Disable Optimisations. For even smaller images, turn on Advanced Image Optimisations in Project settings → Editor → Preferences → Advanced features.

Basic optimization (on by default)#

Basic image optimization in TeleportHQ is on for every uploaded image. When you publish or export:

• Each image is resized to fit the size it's displayed at on each page or component.
• An image with optimization turned off uses the original file, up to 4,500px wide.
• SVG images are never resized.

Image optimization is available on every plan.

Turn optimization off for one image#

Do this when a published image looks blurry or soft, for example a detailed product photo.

1. In the left sidebar, click the folder icon (tooltip Assets Manager).
2. Click the Uploads tab.
3. Right-click the image.

4. Choose Disable Optimisations.

   

5. Publish your site again. See How to publish your site.

To turn it back on, right-click the image and choose Enable Optimisations.

Turn optimization on or off for all images#

1. In the editor, press Ctrl+Shift+P (Cmd+Shift+P on Mac) to open the command palette with its commands. You can also press Ctrl+P (Cmd+P) and type >.

2. Type optimisations.

   

3. Choose Disable optimisations for all images or Enable optimisations for all images.
4. Publish your site again.

Advanced Image Optimisations#

Advanced Image Optimisations is a TeleportHQ project setting that makes images even lighter. In the app's words: "Enabling this feature will convert all your uploaded images to the modern WebP format when deploying or exporting your project. It will also resize images to fit the viewport being served. This will help improve your SEO performance."

It also creates smaller versions of each image for phones (500px wide) and tablets (800px wide), so small screens download less. To turn it on:

1. In the editor, at the bottom of the left sidebar, click the Project settings cog.
2. In the Project settings panel, under Editor, click Preferences.
3. Click Advanced features.

4. Click the switch next to Advanced Image Optimisations. It turns on and saves at once; there's no Save button.

   

5. Publish your site again.

See How to turn on Advanced Features.

Good to know#

• Changes apply the next time you publish or export. Your live site doesn't change until then.
• Turning optimization off for an image turns off both basic and advanced optimization for that image.
• Advanced Image Optimisations makes your exported project slightly bigger, because of the extra image sizes. It doesn't currently apply to Angular and HTML downloads.
• The same right-click menu has Edit Image…, which crops, adjusts or removes a picture's background and saves the result as a new file. See How to add and replace images.
• The app spells these options the British way: Optimisations.