How to handle images (download remote, Webp, compress large images) to optimize page display speed in content settings?

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.AnQiCMS (AnQiCMS) provides us with 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, controlling image resources

During content creation, we sometimes refer to images from other websites.At this time, AnQi CMS provides an option to download remote images, which can help us automatically download images linked from external links to our own server.Selecting to enable this feature is undoubtedly the first step in improving website stability and loading speed.Imagine if the external image server we depend on responds slowly, or worse, if the external image link fails, our website pages will show failed image loading or blank display, which will severely harm the user experience.After localizing the remote images, we can completely control these images, not only will the loading speed be faster, but we can also 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 superior to 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

The choice of image format has a direct impact on the loading speed of the page.The traditional JPG, PNG images are indeed universal, but in terms of compression efficiency, the WebP format often performs better.Aqie CMS is well-versed in this, providing the option to 'enable Webp image format'.Once we enable this feature, the system will automatically convert newly uploaded JPG, PNG images to WebP format.WebP images can provide smaller file sizes at the same quality, which means users will download less data when accessing web pages, thereby significantly speeding up page loading speeds.It is worth noting that this setting only takes effect for images uploaded after it is turned on.Don't worry, Anqi CMS also kindly provides a WebP batch conversion tool, allowing us to conveniently convert existing non-WebP format images on the website to WebP in batches, achieving lightweight images for the entire site.

Intelligent compression of large images, say goodbye to bulky loading

Modern devices have increasingly powerful camera functions, a casual photo can be several MB, even tens of MB, and uploading it directly to a website without processing is undoubtedly a huge killer of page loading speed.The 'Whether to automatically compress large images' feature of AnQi CMS is the tool to solve this pain point.After enabling, the system will intelligently judge when uploading images, automatically compressing images that exceed the preset size.By default, the system compresses to a width of 800 pixels, but we can also customize this value according to the website design and actual needs in the 'Auto-compress to specified width' option.This feature can greatly reduce the storage space occupied by images, and 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 large images and remote images, the reasonable setting of thumbnails is also crucial for the display speed and layout aesthetics of the page.The Anqi CMS provides fine-tuned 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 to the longest sideThis method will display all sides of the image completely and will resize it proportionally based on the maximum side length set, ensuring that the image does not distort.
2. Fill the longest sideIf you need a uniform fixed-size thumbnail but also want to display the entire image content, this option is very suitable.The image will be centered, and any parts that are too small will be filled with white blocks to the specified size.
3. Trim according to the shortest edgeThis method ensures that the thumbnail fills the entire specified area, the system will crop the image centrally, based on the shortest side, which may result in part of the longest side being cut off.

We can choose the most suitable way based on the layout and image content characteristics of the website.

Secondly, the thumbnail size allows us to customize the specific width and height, ensuring that the thumbnail perfectly matches the website template, reducing the image size, and speeding up the page rendering speed.If some documents on the website do not upload thumbnails, the Anqi CMS also provides a setting for 'default thumbnails' to ensure that the content display will not be empty even without a dedicated image, maintaining the visual consistency of the page.

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 fast.

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

Frequently Asked Questions (FAQ)

1. I enabled the WebP image format conversion on the AnQi CMS backend, why haven't the previously uploaded images been converted to WebP?Answer: The WebP image format conversion feature is enabled by default only for new images uploaded after you turn on the option.If you want to convert existing non-WebP images on your website to WebP format, you can use the "WebP Batch Conversion Tool" provided by AnQi CMS for one-time conversion, which is usually located at the bottom of the "Content Settings" page.

2. How many pixels should the 'Auto-compress large image to specified width' setting be set to be appropriate?Answer: The width value depends on the design layout and target audience of your website.The default 800 pixels is a good balance point for most blog posts or news detail page images, as it ensures image clarity while effectively reducing file size.If your website's main content area is wide or the image needs to show more details, you can adjust it appropriately, such as 1200 pixels or 1600 pixels.Please test according to the actual page width and the purpose of the image, find the width that is most suitable for your website, and avoid excessive compression affecting the visual effect or too large a size affecting the loading speed.

3. What are the differences between the three modes of "Picture thumbnail processing methods" - "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 to the longest sideThis method maintains 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.It is suitable for scenarios with high requirements for the integrity of image content and where the layout does not require high accuracy for thumbnail size.
• Fill the longest sideThis mode generates a fixed-size thumbnail, centers the image after full scaling, and fills the part of the image that is smaller than the thumbnail size with white.This ensures that all thumbnail sizes are uniform, but may leave white space around the images.Suitable for designs that require strict uniform thumbnail dimensions and accept whitespace around the images.
• Trim according to the shortest edgeThis method will also generate a fixed-size thumbnail, but it will crop according to the shortest side to ensure the image fills the entire thumbnail area.This means that part of the image content (usually the edge of the longest side) may be cropped off.Suitable for those who have a very high requirement for the uniformity of thumbnail size, and where the central content of the image is most important, willing to accept the edges being cropped.

The choice depends on the specific design requirements and content display focus of your website.For example, e-commerce product images usually choose to "crop to the shortest side" to fill the frame, while article list images may tend to "scale proportionally to the longest side" to maintain the integrity of the image.