How to set up automatic image compression in Anqi CMS to speed up page loading?

Optimize images, accelerate website: AnqiCMS Automatic Image Compression Settings Guide

Website loading speed is one of the key factors in user experience, as well as an important consideration for search engine optimization (SEO).And large images are often the main culprit for slowing down website loading speed.Fortunately, AnqiCMS, as a fully functional content management system, built-in a series of powerful image optimization features, helping us easily deal with this problem, while keeping the website smooth in providing rich visual content.

Today, let's take a detailed look at how to set up automatic image compression and other image optimization options in AnqiCMS to speed up page loading.

One, enable automatic compression of large images, intelligently manage image size

Preventing large images from being directly uploaded to the website, which occupies too many server resources and slows down page loading speed, is the first step in image optimization.AnqiCMS provides a very practical feature——auto-compression of large images.

This feature is located in the 'Content Settings' on the backend. First, log in to your AnqiCMS backend management interface, find 'Backend Settings' in the left menu bar, click 'Content Settings'.In the content settings page, you will see an option named 'Whether to automatically compress large images'.

Select this option and AnqiCMS will intelligently detect the image size when uploading images.If the size of the image uploaded is too large, the system will automatically compress it, thereby effectively reducing the file size of the image, reducing the server's transmission pressure and the user's bandwidth consumption, and significantly improving the page loading speed.By default, the system will compress the detected large image width to 800 pixels.

Of course, this default value is not unchangeable. Below, there is a 'Auto-compress to specified width' input box, where you can flexibly adjust this value according to the actual design needs and content area width of the website.For example, if the maximum width of the content area on your website is 1200 pixels, setting this value to 1200 will ensure that the uploaded images are both clear and perfectly adaptable to the layout, while avoiding unnecessary large sizes.In this way, even users who are not familiar with image processing can ensure that the uploaded images will not become a burden on the website.

Two, start WebP image format, improve loading efficiency

Other than directly compressing the image size, using a more efficient image format is also an effective means to improve the website loading speed.WebP is a modern image format developed by Google. Compared to traditional formats such as JPEG, PNG, and others, it provides smaller file sizes at the same quality, thereby further speeding up image loading and saving storage space.

In the same 'Content Settings' page, you will also see an option for 'Whether to enable WebP image format'.After enabling this feature, all new uploaded JPG, PNG, and other image formats will be automatically converted to WebP format in the background.It should be noted that this setting only takes effect for new images uploaded after it is turned on, and old images uploaded to the website will not be automatically converted to the new format.

If you want to convert all the historical images on the website to WebP format for comprehensive optimization, AnqiCMS also provides a convenient 'WebP conversion tool'.You can use this tool to batch convert existing images after enabling the WebP feature, to optimize the images on the entire site and further accelerate the website.

Three, optimize thumbnail processing, unify beauty and speed

Under many website scenarios, such as article lists, product display pages, or category pages, the original large image is not displayed directly, but a thumbnail is shown instead.Setting thumbnails reasonably not only ensures a unified and beautiful display of website images but also significantly speeds up page loading, as thumbnail file sizes are usually much smaller than the original images.

The 'Content Settings' feature, including 'Thumbnail Handling Method' and 'Thumbnail Size', is exactly for this purpose. You can choose one of the following three thumbnail handling methods according to your actual needs:

• Scale proportionally to the longest sideThe image will maintain its original aspect ratio, scaling based on the longest side to ensure the image is fully displayed.
• Fill the longest side: The image will fill the blank area while maintaining the aspect ratio to reach the set size, suitable for scenarios where a fixed-size picture frame is needed.
• Trim according to the shortest edge: The image will be cropped based on the shortest edge to ensure the image fills the set size, but some content may be cut off.

After selecting the processing method, you can set a uniform width and height in the 'thumbnail size'.After you adjust the thumbnail size, you can also use the 'Batch Regenerate Thumbnails' feature to generate thumbnails for all uploaded images according to the new size and method, ensuring consistency and **performance** in the website display.

By combining these image optimization features of AnqiCMS, you can build a website that is both rich in content and fast to load, providing users with an excellent browsing experience and laying a solid foundation for the website's search engine performance.Remember, image optimization is a continuous process, regularly checking and adjusting settings will help your website maintain good performance.

Frequently Asked Questions (FAQ)

Q1: After enabling the WebP format, can old browsers still display images normally?A: The compatibility of WebP format is already very good, mainstream modern browsers (such as Chrome, Firefox, Edge, Safari, etc.) have already supported.For a very few old browsers that do not support WebP, AnqiCMS usually has a built-in fallback mechanism, or you may need to make some compatibility adjustments in the template, but most users will not encounter display issues.

Q2: After setting the automatic compression of the large image width, what should I do if I need to display the original size of the image?A: The automatic compression feature is mainly aimed at images uploaded to the content editor, with the purpose of optimizing page loading.If certain scenarios indeed require displaying the original size of images, you can choose not to enable this feature, or upload the original size of the images to another place (such as a dedicated image bed) and then introduce them through external links.However, for website performance, it is usually not recommended to directly display oversized, unoptimized original images on the page.

Q3: What are the differences between the three thumbnail processing methods, and how should I choose?A:

1. Scale proportionally to the longest sideThe advantage is that the image content is the most complete, and it will not be cropped, but the final size may not be completely consistent. Suitable for lists that require high image integrity and do not need strictly uniform sizes.
2. Fill the longest sideThe advantage is that it can strictly maintain the uniform size of thumbnails and ensure the completeness of the image content, but white edges may occur. It is suitable for scenarios that require fixed width and height display and do not mind white edges.
3. Trim according to the shortest edgeThe advantages are that it can strictly maintain the uniform size of thumbnails, and the image can completely fill the area without any white edges, but it may cut off the edge content of the image.Suitable for scenes with high visual impact, where the image content is centered and the edge information is not important. Choose the method based on the design style of your website and your specific requirements for image display.