In website operation, images are an important element to attract users and convey information.However, unoptimized images may also be the culprit for slow website loading, which in turn affects user experience and search engine rankings.【en】The AnQi CMS understands the importance of image optimization and therefore provides a variety of refined image control features to help you achieve a perfect balance between website performance and visual effects.
【en】One: WebP: The Smart Choice for Light and Fast Images
WebP is a modern image format that is typically 25-34% smaller than JPEG in terms of visual quality and 26% smaller than PNG.This means faster loading speed and less bandwidth consumption.
In AnQi CMS, enabling the WebP feature is very convenient.You just need to go to the 'Content Settings' page in the website backend, find the 'Enable Webp Image Format' option, and set it to 'Enabled'.When you upload JPG, PNG, and other image formats, the system will automatically convert them to WebP format, achieving automatic upgrade of image formats for new content.
For the images already on the website, Safe CMS also provides a solution.In 'Content Settings', you can find the 'WebP Conversion Tool'. Using this tool, you can batch convert all non-WebP format images that have been uploaded to the website, so that all the images on the website can enjoy the optimization benefits brought by WebP.
【en】Two: Auto Compression for Large Images: Say Goodbye to Redundancy, Save Resources
【en】Three: Thumbnails: Fine Control, Multi-Scenario Adaptation
Thumbnail is an indispensable element in scenarios such as website content lists and recommended positions, which can quickly preview the image content and optimize the page layout.The AnQi CMS provides a variety of thumbnail generation and management features to meet different display needs.
In the 'Content Settings', you can choose the 'thumbnail processing method' that best fits your website design style:
- Scale proportionally by the longest edge:This method will resize the image proportionally based on the maximum side dimension you set, ensuring that the image is displayed completely without distortion.The width or height of the thumbnail will be fixed, and the other side will be adjusted proportionally.
- Pad by the longest edge:If you need a thumbnail with a fixed aspect ratio and do not want any part to be cropped, this method is very suitable.The image will be centered displayed, and the insufficient area will be filled with white to make the thumbnail reach the specified precise size.
- Crop by the shortest edge:When you have strict requirements for the thumbnail size, this method can center crop the image.The shortest side will be displayed in full, while the longest side will be cropped to match the shortest side, which may result in the loss of the original image's edge content.
After selecting the appropriate processing method, you can enter the required width and height under "Thumbnail Size", for example, set it to300x200Pixels. Precise size settings help maintain the consistency of page layout and improve loading efficiency.
In addition, the Aiqi CMS also allows you to set a "default thumbnail".When the thumbnail is not specified, the system will automatically use this default image for display, which is very helpful for maintaining the consistency of the overall visual style of the website.
If you adjust the thumbnail size or processing method, the existing thumbnails will not be updated immediately.You can use the 'Batch Regenerate Thumbnails' feature at this time.This feature will update all thumbnails on the site according to your latest configuration in bulk, saving you the trouble of manual operations.
It is also very convenient to call thumbnails in front-end templates. Usually, you can through{{ item.Thumb }}or{{ item.Logo }}Retrieve the thumbnail address of the article or category directly. For more flexible scenarios, it can also be combined withthumbFilter, such as{{ item.Logo|thumb }}for further processing and display of the image address.
Through these fine-grained image control features, Anqi CMS not only helps you efficiently manage and optimize website image resources, but also significantly improves the user experience, page loading speed, and lays a solid foundation for search engine optimization.Reasonably utilize these tools to make your website both captivating and efficient.
Common Questions and Answers (FAQ)
Question: Will my previously uploaded images be automatically converted to WebP after enabling the WebP format?Answer: No.After enabling the WebP feature, only newly uploaded images will be automatically converted to WebP format.For the images already existing on your website, you need to manually go to the 'Content Settings' under the 'WebP Conversion Tool' to perform batch conversion.
Question: When setting the image auto-compression width to 800 pixels, will it only compress the width or will it also shrink the height proportionally?Answer: When you turn on automatic compression for large images and set a specific width (such as 800 pixels), the system will resize the image proportionally based on this width.This means that if the original image width is greater than 800 pixels, it will be resized to 800 pixels wide, and the height of the image will also be reduced in proportion to the original width and height to maintain the visual proportion of the image without distortion.
What: I modified the thumbnail size in the background, but the thumbnail on the website front-end did not change. Why is that?