Swift`s Settings – Media tab

You are here:
Estimated reading time: 6 min
In this article

Images

This feature is available only in Pro version.

Optimize Images on Upload – Enable this if you would like to optimize the images during the upload using the our Image Optimization API service. Increase your website’s SEO ranking, number of visitors and ultimately your sales by optimizing any image automatically when you upload them to your website.

Image Optimizer – The control room of the Image Optimizer. With Image Optimizer you can optimize every images on your site. It will scan the whole site, and pick up every image from themes, plugins and upload folder. Regarding that Image Optimizer is unlimited (no additional fees), you can save a considerable amount of money. You can select images individually, and run batch optimization. Default image quality can be specified in plugin settings, however you can overwrite it before starting the optimization on selected images.

You can choose between Lossless, Slightly Lossy, Moderate and Aggressive or fine tuning quality manually. Lossless, Slightly Lossy, Moderate or Aggressive – which one is the best for me and what does compression? In the most basic definition, compression algorithms attempt to find and reduce redundant pixels within an image. Of course, the more aggressive you are with this, the more pixels you’ll strip from the image, reducing quality.
Lossless (100/100) is the best option for the most users. The images processed with Lossy algorithms are the smallest optimized images you can get. So, if the speed of your site is paramount and you want the best balance between optimization and picture quality, we recommend you to continue to use Lossless optimization. offers the best compression rate.
Slightly Lossy (85/100) is the best choice if you still care about Google Insights but you believe that a slight loss of page speed is an acceptable compromise for a top notch image quality.
Moderate (70/90) optimized images are almost identical with the originals, but they offer a smaller size reduction compared to either Lossless or Slightly Lossy processed files. In most cases a human can’t see the difference. If you want your images remain untouched, then select this option.
Aggressive (65/70) Aggressive compression is most powerful, so the picture quality will be reduced. The weight of the image will be much less.

Resize Large Images – If this option is enabled, you can specify maximum image width in px. The plugin will resize images on upload which are larger than the specified maximum width. Previously uploaded images can be resized with the Image Optimizer. If you don’t need really big images, only web images you can resize uploaded images which are too large.

Maximum Image Width – Specify maximum image width (px). This feature can reduce your hosting storage by changing the sizes of your uploaded pictures. Each time you add an image WordPress automatically generates a number of thumbnails which are deployed in your webpages. Your original pictures are rarely shown to your visitors, but they take a lot of your hosting space.

Keep Original Images – If you enable this option you will be able to keep and restore original images. Of course it will use some extra space on your server. You can bulk remove/restore original images in Image Optimizer. It is recommended to keep original images on first try. If you realized that optimized images quality is not good enough, you can restore original images with one click, and reoptimize them on higher quality. I you would like to save some space, you can also delete easily original images if you are satisfied with the optimization quality.

Generate WebP – WebP – a modern image format created by Google, that provides superior lossless and lossy compression for images on the web. WebP images can be up to three times smaller than PNGs and 25% smaller than JPGs.

Serve WebP – Starting with version 2.0.21, you’ll be able to display WebP versions of the images in your WordPress website’s pages: Altering the page code. Now you can use the WebP format by simply checking the corresponding “Altering the page code, using the <picture> element” option in the settings tab and all your <img> tags will be replaced with <picture> tags that include also the .webp images, thus letting the browser chose the best version according to its capabilities. The <picture> tag contains also a Generate WebP markup tag for fallback reasons, thus also allowing the styles to remain in place. In some rare cases – when the styling of your images relies on positional queries ( :first, :nth-child selectors or “>” direct child reference ) you might encounter style problems when activating this option and you will need to use the rewrite option. Rewrite option (via .htaccess) will insert a new block of code into the .htaccess file, which will make sure that: A. if your browser supports WebP images and B. if you have both jpg/png and WebP versions of an image, then the server returns the WebP instead of the jpg/png. This has the benefit of serving directly WebP files without altering any of the page code.

In general, If you are not using CDN or Cloudflare, you can use rewrite mode, otherwise you should always use <picture>

Inline Small Images – You can specify a file size limit, under this limit images will be base64 encoded and inlined. It will be applied for <img> tags, and background images as well. You can reduce the number of HTML requests with this feature.

Lazyload – If you enable this option, images will be replaced with a low quality (blurred) version, and only images in the viewport will be loaded fully. Lazy load images to improve page load times. Howver, sometimes a theme or plugin already has build-in lazyload functions. In that case, this can generate conflicts on the frontend of your website. Fastest solution is to turn this feature off in Swift. If Lazyload is enabled following features are visible in your dashboard.

    • Exclude Images – It is good practice to exclude logo, and other small images which are important for the design or the user
    • Load Images on User Interaction – Enable if you would like to load full images only on user interaction (mouse move, sroll, touchstart). In most cases you won’t need that feature, however if you already excluded manually images “above the fold” from lazy loading, you can enable this option.
    • Inline Lazy Load Images – Regarding that the low quality version of images are pretty small files you can inline them instead load them separately. With this option you can reduce number of requests.

Exclude Images – It is recommended to exclude logo, and other small images which are important for the design or the user experience.

Load Images on User Interaction – Enable if you would like to load full images only on user interaction (mouse move, sroll, touchstart) In most cases you won’t need that feature, however if you already excluded manually images “above the fold” from lazy loading, you can enable this option.

Inline Lazy Load Images – The most common lazy loading candidates are images as used in <img> elements. When we lazy load <img>elements, we use JavaScript to check if they’re in the viewport. If they are, their src (and sometimes srcset) attributes are populated with URLs to the desired image content. Regarding that the low quality version of images are pretty small files you can inline them instead load them separately. With this option you can reduce number of requests.

Lazyload Placeholder – The selected placeholder will be loaded until the image is not fully loaded. Standard is this feature set to Blurred (effect), but as some people don`t like this way of (lazy)loading, you can also choose for transparent placeholder.

Force Responsive Images – Fix theme/plugin generated images and force all images to use srcset attribute if it is possible. You will need this option only if your theme (or some of your plugins) is using images incorrectly, which is very rare. If you enable this option it will append srcset for all images which has multiple sizes in media library.

Lazyload Background Images – If you enable this option, background images will be blocked by default, and only elements in the viewport will load the background image. If you have background images at the top of your page, eg in viewport then you should be careful to activate this feature. Always test the frontend or your site if there are no negative effect for your visitors.

YouTube Smart Embed – Load Youtube videos only on user interaction. Load only thumbnail image for Youtube videos with a pseudo play button, and load the video and the player only on click/touch. YouTube Smart Embed is an incredibly fast, simple, yet powerful, feature of embedding YouTube videos into your WordPress site. This  feature is improving page performance dramatically. This feature is available only in Pro version.

Lazy Load Iframes – Some embedded content (like Youtube videos) loads additional assets which are not necessary on initial pageload. You can lazyload them, so iframes will be loaded only before they arrives in the viewport.

Exclude Iframes – Unfortunately some iframes can be broken if they are lazyloaded. You can exclude them with this option if you enabled Lazy Load Iframes feature.

Load Iframes on User Interaction – Enable this feature if you would like to load iframes only on user interaction (mouse move, sroll, touchstart). If you don’t have any iframes in the “above the fold” section you can load them very last, when the page was fully loaded and the user made some interactions as well. It does’t only speed up the page load, but also can save some bandwidth if it is important (eg for mobile users).

Was this article helpful?
Dislike 0 1 of 1 found this article helpful.
Malcare WordPress Security