Article directory [hidden]
Image optimization and its importanceHow to set performance benchmarkSuggestions on speeding up the loading speed of website pictures1. Choose the correct file format2. Use image compression tools3. Enable browser caching4. Forbid image link theft5. Use delay loading6. Consider using CDNconclusion
Image is very important to attract and keep readers’ interest. However, they are also one of the slowest loading elements on the network. Slow loading may cause visitors to give up your website, so it is particularly important to solve the problem of slow loading of pictures!
If you want a lighter and faster website, image optimization is a good starting point. Through optimization, you can continue to attract the audience’s attention with beautiful and high-quality visual effects without significantly increasing the page loading time.
In this article, we will share some ways to improve website performance through image optimization. Let’s get started!
Image optimization and its importance
Image optimization is to achieve a balance between reducing the size of image files and maintaining an acceptable level of quality. This can reduce the page loading time, and will not cause a negative impact on the visitor experience due to blurred or pixelated visual effects.
Visitors care about how long it takes for the page to load. Research shows that 40% of people give up websites that take more than three seconds. By optimizing the image, traffic loss can be avoided.
Page loading time also affects conversion times and revenue. Research shows that if your website earns $100000 a day, a second delay can cost you $2.5 million a year.
In addition, Google uses page speed as a ranking factor. By shortening the loading time of the website, you can improve the search engine ranking and increase the natural traffic.
By reducing the size of the image, it can usually help Google capture and index it faster. This can help you start attracting traffic from Google Image Search. This is particularly important for time sensitive visual effects, such as those related to current events or fast sales.
Last but not least, image optimization can reduce the size of website backup. This makes the process faster and produces smaller files. Depending on your hosting service provider and plan, this may even prevent you from exceeding your allocated storage space and incurring additional costs.
How to set performance benchmark
It helps to benchmark performance before any type of optimization. By testing your website before and after, you can determine the real benefits of all image optimization work.
Each site is unique, so some optimization techniques may produce better results than others. In order to identify the best ways to achieve the best results for your website, you may want to conduct a performance test after implementing each strategy. Then you can put the best performing technologies at the heart of your future work.
You can use tools like Google pagespeed insights, Pingdom or gtmetrix to measure the performance of your website. This is invaluable for evaluating the impact of each optimization technology on your site and tracking how the performance of your site changes over time.
Recommended reading: the best website performance testing tools: gtmatrix, pagespeed insights, Pingdom tool, webpagetest
Suggestions on speeding up the loading speed of website pictures
After creating a performance benchmark, it’s time to start making improvements. Here are six ways to optimize images and reduce page loading time.
1. Choose the correct file format
Before you start to optimize the image, it’s important to make sure you use the most appropriate image file format. You can use several methods, including some other options, such as JPEG, XR, and webp.
Although these can significantly improve the image loading speed, not all browsers support them. To ensure that your website is accessible, you usually need to avoid using more specific formats.
JPEG or jpg images can use both lossy and lossless optimization. This often makes it the best file format for images with multiple colors. You can also adjust the quality level. This can help you achieve the most important balance between displaying clear, clear images and reducing file size.
At the same time, PNG files can produce higher quality images, but the size is larger. You might be able to format a simple image as PNG without losing control of the file size. However, you usually want to avoid using PNG for more complex visual effects.
2. Use image compression tools
Compression can reduce the size of an image by deleting or grouping parts of the file. This compression can be “lossless” or “lossy.”.
Lossless compression reduces the size of the file without affecting the quality. Lossy compression can usually save more size, but it involves discarding parts of the file. This affects the quality of the image.
Generally, we recommend lossless compression for high quality visual effects such as photos. For simpler images, you may want to choose lossy compression to have a greater impact on performance.
You can use a variety of compression tools, including the free tinypng service. Tinypng uses lossy compression and selectively reduces the number of colors in the image. Despite the name, tinypng can compress both JPG and PNG.
There is also a tinypng plugin that automatically compresses all the images you upload to WordPress. It can also optimize any previously uploaded file. This is useful if your site already has a lot of visual effects, and manual compression of each image is not feasible.
Alternative image optimization plugins include optimole, imagine and smash pro.
Recommended reading: WordPress free image compression optimization plugin resmush.it image optimizer
3. Enable browser caching
Instead of downloading images directly from the server every time, the browser can store these files locally on the visitor’s computer. This kind of cache will greatly reduce the loading speed of subsequent pages.
You can use the WordPress cache plugin (such as W3 total cache & nbsp; or WP super cache) to enable browser caching
Alternatively, you can enable browser caching by editing the site’s. Htaccess file. This is an important file, so we recommend this method only if you are willing to edit the code.
If you do edit the. Htaccess file, it’s wise to create a backup first. This ensures that you can recover if you encounter any problems.
4. Forbid image link theft
When using images from other websites, it’s better to download the image first, and then upload it to your own server. However, this does not always happen because some websites are guilty of “hot link” problems.
Hot links occur when a third party links to images hosted on the server. Whenever the other party’s website loads this image, it will take up your bandwidth.
Hot links may degrade the performance of your website, and may not even provide you with any page views. Depending on your hosting service provider, hot links may even incur additional costs.
To prevent other sites from taking up your bandwidth, you can use plugins to disable hot links, such as all in one WP Security & firewall. After activating the plugin, you can find this function by navigating to WP Security > firewall > prevent hotlinks.
If you use Alibaba cloud OSS or CDN, or other third-party storage services, these platforms generally have relevant settings. You can view and open them. You can also Baidu about the “ban image link” to see more related tutorials.
Expand reading: 10 easy to use free WordPress security plugins
5. Use delay loading
Delayed loading is also known as lazy loading, that is, delayed loading of images in long web pages. Before the user scrolls to them, the image outside the viewport is not loaded. In contrast to image preloading, using delayed loading on long pages will make the page load faster. In some cases, it can also help reduce server load.
What are the benefits of delayed loading
First of all, it can improve the user’s experience. Just imagine that if all the pictures on the page are obtained and loaded when the page is opened, if the number of pictures is large, it is a disaster for the user, and there will be a “stuck” phenomenon, which will affect the user’s experience. Selectively request images, which can significantly reduce the pressure and traffic of the server, and also reduce the burden of the browser.
Recommended reading: 6 easy to use WordPress lazy loading plugins
6. Consider using CDN
When you choose to host and plan for your site, you may have to choose a data center location option. For example, your website might actually be on a foreign server.
When the data has to travel a longer distance, it causes a delay. In general, the longer the distance, the longer it takes for the site to load. If your host server is located in a foreign country, domestic visitors usually experience a longer load time than foreign visitors.
Content distribution network (CDN) can reduce the delay caused by geographical distance. By providing optimized images with CDN, you can greatly reduce the page loading time.
CDN is a network of servers located all over the world. These servers are sometimes referred to as point of existence (POP) hosts and provide copies of the site’s static content, including images.
Whenever someone visits your site, CDN uses geographic routing to detect the source of user requests. Visitors can then load images from the data center that is physically closest to the image.
There are many CDN providers, but popular choices include Sucuri, keycdn and cloudflare. It’s also worth checking the services of your existing hosting providers, as many of them offer CDNs. For example, alicloud has its own CDN service.
After purchasing CDN service, you can use WordPress plugin to integrate network, such as W3 total cache, Litespeed cache or CDN enable.
These beautiful high-resolution images may attract readers’ interest, but at the same time, they will slow down your website. By optimizing images, you can strike a balance between creating attractive, compelling content and providing high-performance websites.
In order to speed up the loading of images, we recommend the following operations:
Choose the right file format, use compression tools or plugins, such as tinypng, enable browser caching, prohibit image theft, use delayed loading, consider using content distribution network (CDN)
Finally, we recommend reading the following wonderful articles:
How to change the compression quality of JPEG image with WordPress resmush.it How image optimizer optimizes images to improve WordPress