![\"settings-Images\"](\"\/data\/content\/doc\/wordpress\/accelerator\/settings-images-accel\/settings-images-en.png\" "\\"settings-Images")
\n<\/p>\n\n \n<\/p>\n
\n It is useful when images are changed in time. It forces to drop browser cache by appending time marker parameter to the image\u2019s URL.\n <\/p>\n
Note.<\/strong> If compression auto-redirection<\/a> is enabled then time marker will be used from the last modified compressed file.\n <\/p>\n<\/li>\n \n Process images at an early stage (before full <\/span>HTML of pages\u00a0is generated)<\/span>. This makes it possible to process images that are not placed in standard <\/span> Warning<\/strong>. <\/span>May be incompatible with some themes or plugins.\n <\/p>\n<\/li>\n \n Inlines small images into HTML and CSS to decrease request count to our server.\n <\/p>\n<\/li>\n \n Deinlines large images from HTML and CSS to decrease page size.\n <\/p>\n<\/li>\n \n Some servers ignore returning image type (MIME type) and cache without needed compression. This option can help to manage such cases.\n <\/p>\n<\/li>\n \n In case of unavailability of standard (server level) redirection mode this one can be used. It is a bit slower that the first one but allows to manage redirection image correctly. It replaces local images paths to special URL request, e.g. image path \n Enables compression of JPG, PNG, GIF and BMP images except animated GIF and PNG ones. It creates compressed images for original ones. If last modified date of original image is changed to larger value (i.e. file is updated to fresh version), then it will be recompressed again.\n<\/p>\n \n E.g. for Note<\/span><\/strong>. <\/span>To <\/span>exclude<\/span><\/strong> a file from compression (for example,<\/span> <\/span>WEBP<\/span>), you need <\/span>to create a file<\/span> <\/span> \n Enables creating of WebP compressed files for original ones.\n <\/p>\n \n Lower quality produces lower file size.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n \n Adds some directives into the \n Enables creating of Avif compression files for original ones. If Webp creation is enabled and Avif file is larger than Webp it won\u2019t be written. Compressing to Avif can take long time so it is disabled by default.\n <\/p>\n \n Lower quality produces lower file size.\n <\/p>\n<\/li>\n \n Lower speed produces lower file size but it can take a lot of time.\n <\/p>\n<\/li>\n<\/ul>\n Note.<\/strong> It is available from <\/span>PHP <\/span>8.1 and upper and if the \u2018GD\u2019 extension is built with AVIF support. Or if \u2018IMAGEMAGICK\u2019 PHP\u2019s extension is installed and supports AVIF. Or it is supported by special encoder from our side as a binary executable module (currently only Lunux x64 and Windows x64).<\/a> It is automatically downloaded when needed from our site and executed. So, if PHP \u2018proc_open<\/a>\u2019, \u2018proc_close<\/a>\u2019, and \u2018chmod<\/a>\u2019 functions are blocked, please, check your hosting PHP\u2019s configuration.\n <\/p>\n<\/li>\n \n Adds some directives into the \n Compression will be made in separate process and shown in processing queue<\/a> as separate item.\n <\/p>\n Note.<\/strong> If \u2018Detect changes\u2019 is enabled then might be need to reoptimize page that contain images to show corresponding compressed images.\n <\/p>\n<\/li>\n<\/ul>\n \n To enable auto-redirection to WebP and Avif<\/strong> version under NGINX<\/strong> the following directives should be added manually into the begin of \n And the Note.<\/strong> If external cache is enabled then images can be show with original versions. If so, please, clear the external cache.\n<\/p>\n Note.<\/strong> Compression is currently processed only for images that can be caught by content processing like HTML Note<\/strong>. <\/span>After changing the settings, you need to manually update the <\/span>NGINX configuration.\n<\/p>\n \n 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-, 992-, 1366-, and 1920-pixels wide screens.\n<\/p>\n \n All images with \n All background images that defined in styles<\/a> by \n Reduced images will be created not smaller than this defined size.\n <\/p>\n<\/li>\n \n Use Device Pixel Ratio.\n <\/p>\n<\/li>\n<\/ul>\n \n Adaptation (resizing and cropping) will be made in separate process and shown in processing queue<\/a> as separate item.\n <\/p>\n<\/li>\n \n Adaptation (resizing and cropping) will be made only while real request. It is enabled and \u2018Process asynchronously\u2019 disabled by default due to in most cases resizing and cropping are very fast.\n <\/p>\n<\/li>\n<\/ul>\n \n Element tags that are matching the specified XPath selectors<\/a> will not be processed. E.g. the selector <\/a>Note<\/strong>: Prefix \n Just adds the original image\u2019s width and height to the \u2018img\u2019 tag attributes.\n <\/p>\n<\/li>\n \n Enables this mode.\n <\/p>\n \n Don\u2019t use native \n Image tags that are matching the specified XPath selectors<\/a> will not be processed. E.g. to exclude first 5 images on all pages we should add Note:<\/strong> It applies to frames lazyloading<\/a> too excluding adapted placeholder.\n<\/p>\n Note<\/strong>: Prefix \n All external images\u2019 URLs that are matched with defined regular expression<\/a> patterns will be cached. It can be added multiple expressions at once by placing each on new line.\n<\/p>\nimg<\/code> tags<\/span> or styles.\n <\/p>\ndata\/test-img-01.jpg<\/code> becomes ?seraph_accel_gi=data%2Ftest-img-01.jpg<\/code>.\n <\/p>\n<\/li>\n<\/ul>\n\n Compression
\n<\/h2>\nimage1.png<\/code> will be created file image1.png.webp<\/code>. If compressed file can\u2019t be created or not needed (e.g. it is larger) then image1.png.webp.json<\/code> will be created with the reason inside.\n<\/p>\nimage1.png.webp.json<\/code> <\/span>next to this file (for example,<\/span> <\/span>image1.png<\/code> ) <\/span>with a date later than the file itself.<\/span> <\/span>If file <\/span>image1.png.webp<\/code> exists it should be deleted manually.<\/span>\n<\/p>\n\n
\n
.htaccess<\/code> file to redirect images to their WebP versions. E.g. if image1.png.webp<\/code> exists then image1.png<\/code> will be redirected to it.\n <\/p>\n<\/li>\n\n
.htaccess<\/code> file to redirect images to their Avif versions. E.g. if image1.png.avif<\/code> exists then image1.png<\/code> will be redirected to it.\n <\/p>\n<\/li>\nserver<\/code> directive:\n<\/p>\n# seraphinite-accelerator - Automatic redirection to Avif and WebP versions if they exist
include \/www\/wwwroot\/my-site.com\/seraph-accel-img-compr-redir.conf;<\/code>\n<\/p>\n\/www\/wwwroot\/my-site.com<\/code> should be replaced by your site\u2019s root filesystem path.\n<\/p>\nimg<\/code> tag and CSS url<\/code> attribute.\n<\/p>\n<\/a>Adaptation to screen sizes
\n<\/h2>\n\n
img<\/code> tag will be processed.\n <\/p>\n<\/li>\nbackground-image<\/code> or background<\/code> properties (inline or separated) will be processed.
Note.<\/strong> Exclusions for separated styles can\u2019t be added by item\u2019s basis.\n <\/p>\n<\/li>\n\n
\n Excludes
\n<\/h3>\n.\/style[contains(text(),'img-01.jpg')]<\/code> excludes all separated styles that contain img-01.jpg<\/code>. Or e.g. the selector .\/\/div[contains(@style,'img-02.jpg')]<\/code> excludes all div<\/code> tags with inline style that contains img-02.jpg<\/code>. It can be added multiple selectors at once by placing each on new line.\n<\/p>\najs<\/code> can be used to force load original images before loading main scripts. E.g. ajs:.\/\/div[contains(@style,'img-02.jpg')]<\/code>.\n<\/p>\n\n Lazy load
\n<\/h2>\n\n
\n
loading=\"lazy\"<\/code> attribute.\n <\/p>\n\n
\n Excludes
\n<\/h3>\n.\/\/img[position()<=5]<\/code> expression. It can be added multiple selectors at once by placing each on new line.\n<\/p>\najs<\/code> can be used to force load original images before loading main scripts. E.g. ajs:.\/\/img[position()<=5]<\/code>.\n<\/p>\n<\/a>Cache external
\n<\/h2>\n