How to automatically compress images based on size and display them on the front-end?

In website operation, images are an important element to attract visitors and convey information.However, large, unoptimized images often become the 'killer' of website loading speed, not only affecting user experience but also possibly dragging down search engine rankings. 幸运的是，AnQiCMS in the field of image processing provides very intelligent and practical functions, which can help us easily cope with these challenges, making images display clearly and quickly on the front-end.

Intelligent compression, say goodbye to the trouble of manually adjusting large images

Have you also encountered such a situation: in order to maintain image quality, you directly uploaded large-size images given by the camera or the designer, resulting in the website page loading as slow as a snail?The AnQi CMS is very considerate in dealing with this issue. It has built-in features for automatically compressing large images, which optimizes the images we upload in the background without affecting the front-end display.

To enable this feature, we just need to go to the background and find“Global Settings”below"Content Settings". Here, you will find an option named"Should large images be automatically compressed". After checking it, you can further set it up“Automatically compress to the specified width”. For example, if you set the width to800像素Then, for all images uploaded, as long as the width exceeds 800 pixels, the system will adjust the width to 800 pixels while ensuring the image perception, and accordingly reduce it proportionally to greatly reduce the image volume.

This means that even if you upload a large image with thousands of pixels, the system will quietly process it into a size more suitable for web display, without the need for you to manually adjust it with tools like Photoshop.This not only saves server storage space, but also significantly improves page loading speed, allowing visitors to see beautiful image content without long waiting.

Flexible thumbnail generation and management

In addition to the automatic compression of large images, the Aiqi CMS also handles thumbnails with great professionalism. In the same"Content Settings"page, you will see“Thumbnail processing method”and“Thumbnail size”. These settings allow us to flexibly generate and call different sizes of images according to the needs of different areas of the website.

AnQi CMS provides three thumbnail processing methods to meet various design needs:

• Scale proportionally to the longest sideThis method maintains the original aspect ratio of the image, scaling the longest side to the specified size, and the other side is scaled proportionally. This is the most commonly used method and can retain the image content to the maximum extent possible.
• Fill the longest sideIf you need a fixed-size thumbnail but also want to display the entire image content, you can choose this method.The system will resize the image proportionally to fit the size, and the insufficient part will be filled with white (or a configurable color) to center the image.
• Trim according to the shortest edgeWhen you want to make sure that the image fills the entire area in a list or grid, this method is very practical.The system will crop the shortest side to the specified length based on the center of the image, which may cut off part of the image edge.

Define these rules and the system can intelligently generate and display thumbnails of corresponding sizes when calling images in the front-end template. For example, you may need to call thumbnails in article lists or product display pages, just use something like{{ item.Logo|thumb }}Such a template tag, or directly call as{{ archive.Thumb }}Such a field, the system will automatically output the image address processed according to the rules you set.

Additionally, if your website needs a unified style, or if some images do not have a separate thumbnail set, "Default thumbnail"The function can be put to use, allowing all missing thumbnail positions to have a unified placeholder. If you adjust the thumbnail settings halfway through,“Batch regenerate thumbnails”The feature can help you update all existing image thumbnails with one click, saving a lot of repetitive operations.

Upgrade Experience: WebP Image Format

Do you want to load images faster while not losing too much quality?WebP is the ideal choice. WebP is an image format developed by Google, which is usually smaller than JPG or PNG image files, but can maintain similar, if not better, visual quality.

In"Content Settings"In, you can enableWhether to enable Webp image format. Turn on this option and new uploaded JPG, PNG and other image formats will be automatically converted to WebP format for storage and display.This means that your website images will load in smaller size, further enhancing the website's response speed and user experience.

In general, Anqi CMS provides a smooth workflow for image optimization.You just need to make a simple configuration in the background, then upload the pictures as usual, and the system will automatically complete subsequent tasks such as compression, cropping, format conversion, etc., so that the image display on the front end of the website is fast and beautiful, thus providing visitors with a better browsing experience and indirectly helping the website's SEO performance.

Frequently Asked Questions (FAQ)

Q1: Will all the images I upload to AnQi CMS be automatically compressed?A1: Not all images will necessarily be compressed. If the original width of your image exceeds the"Content Settings"you have set in“Automatically compress to the specified width”And you have checked to enable it"Should large images be automatically compressed"Then the system will automatically compress it. In addition, whether the original large image is compressed or not, the system will always compress it according to your settings“Thumbnail size”and“Thumbnail processing method”Generate thumbnails of different sizes automatically for the front-end to call.

Q2: How can I display images of different sizes on the front-end page or call compressed images?A2: You can directly call in the template like{{archive.Logo}}or{{item.Logo}}Get the original image address (if automatic compression is enabled, this is the compressed address). If you need to call a specific thumbnail size, please use{{item.Logo|thumb}}This kind of filter. The system will"Content Settings"The thumbnail rules configured, automatically generate and provide the image address of the corresponding size.Thus, you can flexibly display pictures of different sizes according to different scenarios such as article detail pages, list pages, special theme pages, etc.

Q3: Will the existing images on the website be automatically converted to WebP after enabling the WebP image format?A3: Enable WebP format after, only youNew uploadAn image will be automatically converted to WebP format. For images that have already been uploaded, they will remain in their original format.If you want these old images to also be converted to WebP, Anqi CMS provides'Webp conversion tool'(Can be found on the "Content Settings" page, or accessed through other paths), you can use this tool to batch convert all the images on the site to WebP format.