10 most common errors for processing web images and their solutions

The 10 most common errors for processing web images and their solutions are the most important part for any modern website development. According to statistics, images account for 60% of the total bandwidth of the website. 10 most common errors in processing web images and their solutions

For any modern website development, images are the most important part. According to statistics, images account for 60% of the total bandwidth of the website. It is more obvious when dealing with cutting-edge website designs. Using a graph-like DingTalk layout on an image-rich social network, this number can be up to 85%.

Unfortunately, bandwidth is expensive. For high-traffic websites, bandwidth is likely to take the primary responsibility for your IT programmers and easily surpass the virtual host and storage costs. In addition, it may take a long time for visitors to browse your website and wait for the images to be loaded.

We listed the problems we often encounter every day and how they can (and should) solve them.

1. adjust the image size on the browser.

We often observe that one of the shortcuts used by developers is to adjust the image size on the browser side, instead of adjusting the image size on the server side ,.

The situation is often the same-the website has many thumbnails of specific sizes, and the graphic design changes. the new graphic design requires slight changes in the thumbnail size, while our developers are sometimes casual and sometimes deliberately using the original large-sized image, only adjust the CSS height and width for the browser to make the image look like a thumbnail.

In modern browsers, the final result is indeed the same, but the bandwidth used to load images is different. accessing your website wastes precious time loading an unnecessary image, and you waste extra bandwidth to transfer them. for older browsers, the problem is even more prominent, because the algorithm efficiency of their image size adjustment is lower than that of average water products.

This problem is more common than you think. it can be found in many websites we visit on a daily basis. for example, when you access the front page of Yahoo, you will notice that "hot news" all the thumbnail pixels loaded here are twice the size you see.

How to solve: for developers/designers-please ensure that the images you want to publish perfectly fit the size of their website. even for the same image, different sizes of thumbnails are used to adapt to different pages and create thumbnails of different sizes, instead of using the same large size image and relying on the browser to adjust its size, it is worth doing so.

2. unnecessary high-quality JPEG images

JPEG images have a revolutionary impact on the web. over the years, this lossy compression format allows web developers to load high-resolution images with high details at a lower bandwidth cost than any other competitor.

However, we continue to see that developers and graphic designers do not try to perform JPEG compression on the image. in fact, in most websites, you can safely reduce the quality of JPEG without significant loss of viewing quality.

While 85% of JPEG image quality seems to be very common, we see that the quality of many websites is generally 95%, and a lower quality water product, in fact, bandwidth can be greatly solved without compromising the overall experience. the final result is higher bandwidth consumption and the impact of network latency on user experience.

The quality of the above two images is almost the same. on the left side, the JPEG size of the quality of 95% is 34KB, while on the right side, the JPEG size of 80% is only 17KB. only half of the download time is required, the loading time is twice that of the former. it is worthwhile to have minor quality losses.

How to solve the problem: Do not be afraid to try JPEG with lower quality. for some websites, we find that using 50% JPEG quality can bring us a very reasonable result. higher quality JPEG always looks better, but the improvement in quality is not always worth the extra bandwidth and waiting time brought by high-quality images.

3. incorrect image file type

The current website is JPEG, PNG, and GIF. On average, JPEG and GIF accounts for about 40% of the websites, while PNG accounts for 20% of the remaining.

The good (or bad) aspect of these three formats is that each of them has a different role on the website. Incorrect image format is a waste of time and money for visitors.

In Cloudinary, the most common mistake is to use PNG to deliver photos. The common misunderstanding of PNG is that it is a lossless format and is considered as the most likely alternative to photos. Generally, this is true, and there is no need to optimize it. Only a small PNG file size is required to obtain high-quality JPEG images of considerable quality.

The left side is a PNG image with a size of KB. The right side is a JPEG image, which looks similar, but is only 15 KB in size.

How to break through: always pay attention to what image format is suitable for content display. PNG should be used for computer-generated images (Charts, logos, etc.), or you need to make the images partially transparent (picture overwrite ). JPEG should be used to display captured images. GIF should be used to display animations (use Jjax to load animations, etc ). Note that these are common principles. PNG is better than GIF in almost all aspects.

4. publish non-optimized images

We know that PNG is lossless, but do you know it can be further compressed? With the same fine image, the free PNG compression tool can reduce the PNG size by 50%. The same fine image, but only half the size? It's my brain. Unfortunately, many developers and website designers skipped this step and published non-optimized images.

How to break through: PNGCrush and OptiPNG are two open source image optimization libraries. if you haven't used them yet, you should use them. If you do not need to automatically optimize the process, you can go to Yahoo's smush. It provides the manual compression PNG service.

The preceding is an example of Yahoo smush. It works.

5. forget to take off the image meta data

Many modern websites allow visitors to upload photos. Whether it's a user's profile or a shared photo on a recent trip, it carries the original information of a modern camera and is likely to introduce a lot of meta information into the photo.

Meta data contains a large amount of camera and photo information in EXIF/IPTC format, includes camera model, date and time information, aperture, shutter speed, focal length, metering mode, ISO, global positioning, and many other information clips.

In most cases, removing meta information is a great idea. It is good for privacy protection and file size reduction. Unfortunately, we seldom see that developers spend time clearing meta information, which increases bandwidth and damages users' browsing experience.

How can this problem be solved: make sure that you have cleared the meta information in your images and the photos uploaded by users. If this information is necessary, make sure it is available, not as part of your image. Tip: even if the meta information of an image is not necessary for your website, there is a piece of information, that is, the original photography direction of the image. it is critical to correctly display the photo. When clearing the Exif information, make sure that you rotate the image to the correct direction based on the Exif information.

6. publish images directly from the server

Once your website content is in place, your next goal is to ensure that all your website images are delivered to your visitors as quickly as possible.

One of the most common website problems with Cloudinary is that developers store images on their own servers and are generally on the same machine as their websites. There are two things happening here: first, your server is busy posting pictures instead of focusing on posting your unique website content; second, you missed out on Content Delivery network (Content Delivery Networks), one of the most amazing image distribution solutions ).

How to solve: content delivery network is an easy-to-use service. it manages images on your website, which is much faster than managing these images on your website. CDN relies on a large number of servers or "boundary" distributed all over the world ". when visitors browse your website, they will automatically route to the nearest boundary civilian, so that images can be published as quickly as possible, greatly reducing latency. CDN charges fees based on the required bandwidth, which is slightly more expensive than that of host service providers. However, the current CDN price is quite affordable.

There are many CDN service providers to choose from. as long as you register, you can start to enjoy its benefits. Amazon CloudFront is a good start.

7. separate transmission of static icons

In addition to images and thumbnails, the website also has icons and secondary images ). logos, arrows, stars, symbols, and logos can improve the user experience of the website. creating buttons, shadows, border image fragments, and other image fragments allows you to dynamically create widgets based on the requirements of the artist ).

There are many small images on a website that you cannot trust. for Google's search results page, if you often Google, you may still have an impression on its concise interface. Almost no icon is visible, right? A big mistake. There are more than 80 small icons on the Google search result page (!)

A common mistake developers may make is to embed these small icons into their websites as they are. The browser needs to spend a lot of time downloading so many images. When downloading an image, we need to endure the network delay as a visitor. generally, browsers only support downloading a maximum of six images at the same time, so the delay must be multiplied by the number of image downloads. Your visitors will need to wait for their browsers to download all these images, and your web server may become unable to respond to so many download requests. Your visitors may even give up waiting and continue their daily browsing activities.

How to fix: a simple solution is to use CSS Sprite (CSS Sprite). a single image contains all your small icons. Your webpage is downloaded and modified from the single image on your server, and the HTML of the page uses an alternative CSS class name to point to the small image inside the large image.

Now, instead of 80 images, Google's visitors only download a single image. Their browsers will quickly download and cache these single images from Google servers, and all the images will be immediately presented.

8. use images when CSS3 is available

When we convert the design of a website into an HTML element, many developers still design the button as an image. Because the old browser does not support the use of CSS to implement shadows, arc angles, and special fonts, developers used to use small images to implement the above features, that is, the image-based solution.

Unfortunately, this solution requires a large number of images, which ultimately damages the user experience and is difficult to manage, added the time and cost required for development (think about how to change the text embedded in an image ).

Modern browsers support shadow, rounded rectangle, and special fonts with simple CSS. However, we still see that many websites are still using image-based buttons. This is a common error. For example, look at the buttons of this part of CNN --

This tip is a 61KB image that can be easily implemented using simple CSS commands, improving loading time and user experience while reducing bandwidth consumption.

Solution: Always make sure to use CSS3. if your graphic designer can provide CSS3-based elements for use. if you want to support the old version of IE, you should also ensure that your interface can be elegantly downgraded to at least ensure that the designed functions are available (although the original effects cannot be perfectly displayed ), or select a CSS3 simulation solution like CSS3 PIE.

9. incorrect image cache settings

Generally, the image culture of your website is rarely changed. The HTTP cache command allows the visitor's browser to cache these images. any other service can do this (CDN, proxies, and so on ). Once images are cached, they will be cached instead of downloaded over and over again when you visit your website in the future.

Correct cache settings increase user experience by reducing the page loading time, and reduce your website bandwidth and costs.

Unfortunately, I have seen many cases where cache is not properly utilized. Most often, they worry about long cache settings when updating images, because they think that website visitors will see old images instead of new ones.

This seemingly tricky situation can be easily avoided by adding a fingerprint (MD5, timestamp, etc.) to the image URL. By adding a fingerprint to the image URL, you can know when the image has changed and its URL is already in use. When the URL changes, the browser forcibly reads the image again. The current Web development platform can automatically add such a fingerprint to all images to solve this problem from the source.

How to solve: We strongly recommend that you use caching for images throughout the site. if you can, set the 'expires' HTTP header for the image. In addition to the image URL fingerprint, this can immediately improve the performance of your website.

10. use the same image size in all transport media

Your website is being browsed by many different devices. In recent years, with the rise of mobile phone and tablet users, looking at the traffic analysis on your website shows that the number of visitors from devices has increased significantly.

Whether the website has mobile visitors, or whether you want to provide a mobile version for your website content, you have a decision-how to send images, the same images on mobile devices are too low in desktop resolution.

We often see that developers do not need to worry about providing the same image for different backup resolutions and scaling the image on the client side. Although the image looks good, you are wasting time loading large-sized images, and you have to pay extra bandwidth fees. This is especially unfair to 3G users and roaming users, who need to pay additional fees for large numbers of high-resolution images.

Relatively low-resolution images are used on all devices with the lowest standard, making your website very bad on devices with higher resolution updates.

Solution: The solution is simple-identify the mobile device and resolution of a visitor through the user-agent or the client's Javascript code. The most suitable image Retrieved on the server after obtaining accurate resolution. Of course, you need to provide a set of original image thumbnails. There are already some good JavaScript packages that automate this process.

Summary

The most common website Image processing problems mentioned in this article are also the most common problems we encounter on Cloudinary. this is not to say that there are only so many problems. we just try to put forward the problems that have a great impact on efficiency and give a general explanation so that you can use this as a research start and find a suitable solution.

If you have never heard of Cloudinary, I am happy to tell you that Cloudinary has solved the problems mentioned above. each image uploaded to Cloudinary can dynamically generate any size, format, and quality thumbnail. therefore, you can find the configuration that suits your website and meets your expectations in various settings. cloudinary provides easy-to-use and manageability Sprite. all images are automatically stripped (stripped), optimized by size, and configured with cache for high-speed CDN transmission. the best practices mentioned in the book are almost used. finally, it is worth mentioning that Cloudinary's cloud dynamic image size adjustment capability perfectly adapts to the corresponding design.