As website operators, we all know the importance of website loading speed for user experience and search engine rankings.Especially on content-rich websites, images are often a key factor affecting page speed.The AnQiCMS provides several very practical image processing functions in the content settings, allowing us to flexibly optimize images and significantly improve the display speed of the website.

Remote image localization, control image resources

During the process of content creation, we sometimes refer to images from other websites.This, the Anqi CMS provides an option of 'Whether to download remote images', which can help us automatically download images linked from external links to our own server.Choose to enable this feature is undoubtedly the first step to improve website stability and loading speed.Imagine if the external image server we rely on responds slowly, or worse, if the external image links fail, our website pages will show failed image loading or blank display, which will severely damage the user experience.After localizing the remote images, we can fully control these images, not only faster loading speed, but also to avoid the problem of image loss caused by external factors.Of course, if your website already uses a high-performance CDN or a dedicated image hosting service to manage images, and its performance is better than that of the local server, then you can also choose not to download remote images to avoid duplicate storage and transmission.

Embrace the new format: WebP images, lightweight and fast

Intelligent compression of large images, goodbye to bulky loading

Modern devices have increasingly powerful camera functions, and a photo taken at any time can be several MB or even tens of MB. Uploading it directly to the website without any processing is undoubtedly a huge killer of page loading speed.The 'Automatically Compress Large Images' feature of AnQi CMS is exactly the tool to solve this pain point.Enable this option to have the system automatically compress images that exceed the predefined size when uploading pictures.By default, the system will compress to a width of 800 pixels, but we can also customize this value in the 'Auto-compress to specified width' option according to the website design and actual needs.This feature can greatly reduce the storage space occupied by images, more importantly, it can avoid users downloading unnecessary large-sized images, allowing the page to appear rapidly in front of visitors while maintaining visual quality.It should be noted that image compression is based on the image width for judgment and execution.

Flexible thumbnail management, enhancing content display efficiency

In addition to the large image and remote image, the reasonable setting of thumbnails is crucial for the page display speed and layout aesthetics.The AutoCMS provides fine-grained thumbnail processing options, allowing us to manage image display with ease.

Firstly, in the 'thumbnail processing method', the system provides three strategies:

  1. Scale proportionally by the longest sideThis method will display all sides of the image and scale it proportionally according to the set maximum side length to ensure that the image does not deform.
  2. Scale proportionally by the longest side with paddingIf you need to display thumbnails of uniform fixed size while showing the entire image content, this option is very suitable.The system will center the image display, and any insufficient part will be filled with white **blocks to the specified size.
  3. [en] : Crop to the shortest edge.This method ensures that the thumbnail fills the entire specified area, the system will center-crop the image based on the shortest edge, which may result in the loss of part of the content on the longest edge.

We can choose the most suitable processing method according to the layout and image content characteristics of the website.

Finally, after adjusting the thumbnail size or processing method, you can use the 'Batch regenerate thumbnails' feature to update all existing thumbnails on the site with one click, without manual operation, convenient and quick.

In summary, the image processing strategies provided by the Anqi CMS in the content settings, starting from the source, through localization, new formats, intelligent compression, and fine management, provide us with comprehensive and powerful support for optimizing website images.Reasonably utilizing these functions can not only make our website load faster and enhance user experience, but also give us an advantage in search engine optimization, which is a win-win situation.

Common Questions (FAQ)

1. Why haven't the images I uploaded before been converted to WebP format after I enabled the WebP image format conversion on the Anqi CMS backend?答：WebP图片格式转换功能默认只对您开启该选项后新上传的图片生效。If you want to convert existing non-WebP images on the website to WebP format, you can use the "WebP Batch Conversion Tool" provided by Anqi CMS for a one-time conversion. This is usually located at the bottom of the "Content Settings" page.

2. How many pixels is appropriate for the 'Auto-compress to specified width' setting when automatically compressing large images?答：This width value depends on the design layout of your website and the target audience.The default 800 pixels is a good balance point for most blog posts or news detail pages' images, as it ensures clarity while effectively reducing file size.If the main content area of your website is wide, or if you need to display more details in the images, you can adjust it appropriately, for example, 1200 pixels or 1600 pixels.Suggest you test based on the actual page width and image usage, find the most suitable width for your website, and avoid over-compression affecting visual effects or too large size affecting loading speed.

What are the differences between the three modes of 'thumbnail processing method' - 'proportional scaling by the longest side', 'filling by the longest side', and 'cropping by the shortest side', and how should I choose?Answer:

  • Scale proportionally by the longest sideThis method will maintain the original aspect ratio of the image, scaling based on the longest side to ensure the image is displayed completely without distortion, but the thumbnail size may not be consistent.Suitable for scenarios with high requirements for the integrity of image content and where the accuracy of thumbnail size in page layout is not high.
  • Scale proportionally by the longest side with paddingThis mode generates thumbnails of fixed size, scales the image to fit completely while centered, and fills the parts of the image that are smaller than the thumbnail size with white.This ensures that all thumbnail sizes are uniform, but it may leave some blank space around the images.Suitable for designs that require strict uniform thumbnail sizes and accept designs with white space around the images.
  • [en] : Crop to the shortest edge.This method will also generate a fixed-size thumbnail, but it will crop based on the shortest side to ensure the image fills the entire thumbnail area.This means that part of the image (usually the edge along the longest side) may be cropped off.Suitable for those who have extremely high requirements for the uniformity of thumbnail sizes, and where the central content of the image is the most important, allowing for the edges to be cropped.

The choice of method depends on the specific design requirements and content display focus of your website.For example, e-commerce product images often choose to be cropped 'by the shortest side' to fill the frame, while article list images may prefer 'proportional scaling by the longest side' to maintain the integrity of the image.