Images settingsAccelerator for WordPress

settings-Images

General#

  • Detect changes

    It is useful when images are changed in time. It forces to drop browser cache by appending time marker parameter to the image’s URL.

  • Inline smaller than

    Inlines small images into HTML and CSS to decrease request count to our server.

Compression#

Enables compression of JPG, PNG, GIF and BMP images except animated GIF and PNG ones. It creates compressed images for original ones.

E.g. for image1.png will be created file image1.png.webp. If compressed file can’t be created or not needed (e.g. it is larger) then image1.png.webp.json will be created with the reason inside.

  • Enable WebP

    Enables creating of WebP compressed files for original ones.

  • Auto-redirect to WebP version

    Adds some directives into the .htaccess file to redirect images to their WebP versions. E.g. if image1.png.webp exists then image1.png will be redirected to it.

  • Enable Avif

    Enables creating of Avif compression files for original ones.
    Note. It is available from PHP 8.1 and upper and if the ‘GD’ extension is built with AVIF support. Or if ‘Image Magick PECL’ extension is installed and supports AVIF.

    Warning: Compressing to Avif can take long time so it is disabled by default.

  • Auto-redirect to Avif version

    Adds some directives into the .htaccess file to redirect images to their Avif versions. E.g. if image1.png.avif exists then image1.png will be redirected to it.

To enable auto-redirection to WebP and Avif version under NGINX the following directives should be added manually into the begin of server directive:

# seraphinite-accelerator - Automatic redirection to Avif and WebP versions if they exist
include /www/wwwroot/my-site.com/seraph-accel-img-compr-redir.conf;

And the /www/wwwroot/my-site.com should be replaced by your site’s root filesystem path.

Note. If external cache is enabled then images can be show with original versions. If so, please, clear the external cache.

Note. Compression is currently processed only for images that can be caught by content processing like HTML img tag and CSS url attribute.

Adaptation to screen sizes#

It decreases images size on smaller screen sizes like mobiles. It is better to show smaller images on smaller screens to decrease network traffic and increase loading speed. Adaptation is made to popular 360, 480, 768, and 1366 pixels wide screens.

  • Backgrounds

    All background images that defined in styles (inline or separated) will be processed.
    Note. Exclusions for separated styles can’t be added by item’s basis.

Excludes#

Element tags that are matching the specified XPath selectors will not be processed. E.g. the selector ./style[contains(text(),'img-01.jpg')] excludes all separated styles that contain img-01.jpg. Or e.g. the selector .//div[contains(@style,'img-02.jpg')] excludes all div tags with inline style that contains img-02.jpg.

Lazy load#

  • Add original size

    Just adds the original image’s width and height to the ‘img’ tag attributes.

  • Enable

    Enables this mode.

Excludes#

Image tags that are matching the specified XPath selectors will not be processed.
Note: It applies to frames lazyloading too excluding adapted placeholder.

Cache external#

All external images’ URLs that are matched with defined patterns will be cached.

Leave a Reply