In today's website operations, images are not only an important part of content presentation, but also a key factor affecting website loading speed and user experience.If image processing is not handled properly, it may lead to slow page loading, which in turn can affect search engine rankings and user retention.AutoCMS (AutoCMS) knows this well, therefore it has built-in various practical image processing functions to help us easily optimize the front-end display and improve website performance.

Intelligent thumbnail generation and fine management

  • Scale proportionally by the longest sideThis method will fully display all sides of the image while ensuring the image ratio remains unchanged, and stops scaling when the width or height reaches the preset value.
  • Scale proportionally by the longest side with padding：The image will be centered within the specified size, and the insufficient part will be filled with white to ensure the fixed thumbnail size.
  • [en] : Crop to the shortest edge.System will center-crop the image to ensure the shortest edge is fully displayed and the longest edge may be cropped to achieve the desired size.

Optimization of image format and intelligent compression

To further improve website performance, AnQi CMS supports optimizing images into more efficient formats and performing intelligent compression:

  • WebP format conversion
  • Large image automatic compressionFor images that are too large, Auto CMS can achieve automatic compression.Enable this feature and we can set a maximum width, such as the default 800 pixels.System will automatically compress images exceeding this width to the specified size during upload, effectively reducing storage space and bandwidth usage.
  • Remote image localization

Lazy Load support

To reduce the page load burden on the first load, Safe CMS also supports lazy loading of images.This means that the images will load gradually as the user scrolls the page, rather than loading all at once when the page is initially loaded.lazy="data-src"Such properties can be combined with front-end JavaScript to implement the picture lazy loading effect, significantly improving user experience.

Image copyright protection and multi-scene applications

In addition to performance optimization, Safe CMS also focuses on image content management and copyright protection:

  • Image watermark：System built-in image watermark function, which can effectively prevent the infringement and plagiarism of original content, protecting our image copyright.
  • Rich image application scenariosIn the content editing process, we can easily select images from the image library or upload new images.Whether it is an article, product details page, or category page banner image and thumbnail, AnQi CMS can provide a convenient picture upload and management entrance, meeting various content display needs.

Through these meticulous image processing methods, Anqi CMS helps us not only present high-quality visual content, but also ensure efficient and smooth display on the frontend, providing users with a better browsing experience and laying a solid foundation for website SEO optimization.

Common Questions (FAQ)

Q1: After enabling the WebP format conversion, will the images I previously uploaded be automatically converted to WebP?A1: By default, images will only be automatically converted to WebP format after you enable the WebP conversion feature.For images that have been uploaded previously, Safe CMS provides a 'WebP Conversion Tool' to help you batch convert them for unified optimization of the entire site's images.

Q2: If I modify the thumbnail size settings, will the existing thumbnails be updated immediately?A2: Simply modifying the settings will not immediately update all the thumbnails that have already been generated.You need to use the 'Batch regenerate thumbnails' feature on the 'Content Settings' page so that the system can batch update the thumbnails of the entire site according to the new size settings.

Q3: How is the lazy loading of images implemented, do I need to install an additional plugin?A3: The image lazy loading feature of the Anqi CMS is mainly realized by adding specific attributes to image tags in the template, for examplelazy="data-src".This method usually requires front-end JavaScript code to cooperate with detection of these properties and delay loading of images.The AutoCMS itself provides this tag support, but the specific front-end lazy loading effect may require the template you are using or the JavaScript code you write to complete the image loading logic.