Disabling image optimization and resizing

How to stop my images from being blurry/distorted/pixelized.

In this article

Image optimization and resizing is on by default to help with SEO and load speed. This document will walk you through disabling or adjusting those settings should an image need to not be optimized or resized.

Images within a component

  1. Click on the image you'd like to adjust the optimization/resizing settings for, this will launch the media modal where, within the right sidebar, you can adjust those settings via a dropdown.
    select-image
  2. Now, simply select one of the following options for your settings:
    - Resize/nextgen-optimize (what's this?)
    - Resize/optimize (what's this?)
    - Resize only (what's this?)
    - Do not resize or optimize (what's this?)
  3. Click the purple Save button to save these optimization settings. However, for this change to go live, you'll need to (re-)publish the page.

    save-button

Background images

  1. Click on the image icon within the toolbar then, within the sub-toolbar that appears click "Swap" to open the media modal so you'll have access to the toolbar where the optimization settings dropdown exists.
    switching-from-wordpress

    image-options

  2. Now, simply select one of the following options for your settings:

    - Resize/nextgen-optimize (what's this?)
    - Resize/optimize (what's this?)
    - Resize only (what's this?)
    - Do not resize or optimize (what's this?)
  3. Click the purple Save button to save these optimization settings. However, for this change to go live, you'll need to (re-)publish the page.

    save-button-1

What do the options mean?

  • Nextgen-optimize - will generate multiple formats of images, including WEBP, a next-gen media format and serve them in a source-set that allows the browser to choose the best-supported mime type, it will also do "optimize" and "resize"
  • Optimize - will convert the image to the most optimal format (e.g. it may change from PNG to JPG or vice-versa), to minimize the size without impacting the quality of the image. It will also "resize' the image
  • Resize only - will keep the image in its original encoding, but will resize it to fit the dimensions of the placement where it's being used