The 10 most common mistakes in processing web images and their solutions

The 10 most common mistakes in dealing with web images and their solutions

Images are the most important part of any modern website development. Currently, according to statistics, images account for 60% of the total website bandwidth. This is even more apparent when dealing with cutting-edge website design. On an image-rich social network using a pin-like layout, this number can be as high as 85%.

Unfortunately bandwidth is expensive. For high-traffic websites, bandwidth is likely to be responsible for your IT programmer costs, easily exceeding web hosting and storage costs. Plus, such a large amount of traffic takes time, so when browsing your site, visitors are likely to spend a long time waiting for images to load.

We’ve listed some of the problems we tend to encounter every day and how they can (and should) be solved.

1. The luxury of resizing images on the browser side

We often observe that a shortcut used by developers is to use the browser-side image resizing instead of resizing the image on the server side.

The situation is often the same – a website has a lot of thumbnails of a specific size, and then the design of the graphic changes. The new graphic design requires a slight change in the thumbnail size, and our developers, sometimes at random, Sometimes it is intentional, just use the original large size image, and just adjust the CSS height and width of the image for the browser to make the image look like a thumbnail.

On modern browsers, the final result looks authentic are the same, but the bandwidth consumed to load the image is different. Your website visits need to waste precious time loading an unnecessary pull image, and you waste extra bandwidth to transmit them. This problem will be more prominent for older browsers, because their algorithm for resizing images is less efficient than average.

This problem is more common than you think, and it can occur in our daily visits Found on many websites. For example, visit Yahoo's front page page and you'll notice that all the thumbnail pixels loaded here for "hot" news are twice the size you see.

How to Fix: For Developers / Designers – Please make sure that the images you want to publish perfectly fit the size of the website that requires them. Even if it is the same image, use different sized thumbnails to fit different pages, create different sized thumbnails, and Instead of using the same large image all the time and relying on the browser to resize it, it's worth it.

2. Unnecessarily high-quality JPEG images

JPEG images have truly revolutionized the web. Over the years Since then, this lossy compression format has allowed web developers to load high-resolution images with high detail at a lower bandwidth cost than any other competitor.

And we continue to see developers and graphic designers Don't try JPEG compression on your images. In fact, on most websites you can safely drop the JPEG quality a notch without significant loss in viewing quality.

And 85% JPEG image quality seems to be common , we see that the quality of many websites is generally 95%, and a lower quality level can actually greatly solve the bandwidth problem without damaging the entire experience. The end result is higher bandwidth consumption and network delay. The impact on user experience.

The quality of the two pictures above is almost the same. The JPEG with 95% quality on the left is 34KB in size, while the JPEG with 80% quality on the right is only 17KB. It only takes half the download time and loads It takes twice as long. This negligible loss of quality is worth it.

How to fix it: Don’t be afraid to try lower quality JPEGs. For some sites, we found that using 50% JPEG quality gave us a Very reasonable results. While higher quality JPEGs will of course always look better, the increase in quality is not always worth the extra bandwidth and wait time that comes with higher quality images.

3. Error The image file types

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

The good (and bad) thing about these three formats is that they each have a different role in a website. Using the wrong image format is a waste of your visitors’ time and your own money.

In Cloudinary, our most common mistake is using PNG to deliver photos. A common misconception about PNG is that it is a lossless format, and that it is the most likely replacement for photos. Generally speaking, this is true, and there is really no need to optimize. It only takes a fraction of the PNG file size to get high-quality JPEG images of comparable quality.

The PNG image on the left is 110KB in size. On the right is a JPEG image, which looks similar, but is only 15KB in size.

How to break: Always pay attention to which image format is suitable for content display. PNG should be used for computer-generated images (charts, logos, etc.) or if you need parts of the image to be transparent (image overlay). JPEG should be used to display captured images. GIF should be used when animation is to be displayed (using Jjax to load animation, etc.). Note that these are general guidelines, and PNG outperforms GIF in almost every aspect.

4. Post non-optimized images

We know that PNG is a lossless format, but did you know that it can be further compressed? Post images with the same precision, free PNG compression tools can reduce PNG size by up to 50%. The same detailed image, but half the size? Consider me mentally retarded. Unfortunately, many developers and website designers skip this step and publish non-optimized images.

How to break it: PNGCrush and OptiPNG are two open source image optimization libraries. If you haven’t used them yet, you really should. If you don't need the automatic optimization process, you can head to Yahoo's smush. It provides manual compression of PNG services.

The above is a Yahoo smush usage example. It worked.

5. Forget to take off image meta data

Many modern websites allow visitors to upload photos. Whether it's a profile picture of a user or a shared photo from a recent trip, these come with raw information from modern cameras, likely introducing a lot of meta information into the photo.

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

In most cases, stripping off meta information is a great idea. Great for privacy and file size reduction. Unfortunately, we rarely see developers take the time to clear meta information, which increases bandwidth and harms the user's browsing experience.

How to break it: Make sure you clear meta information from your images and user-uploaded photos. If this information is necessary, make sure it's available within the scope and not as part of your image. Tip: Even though image meta information is not required for your website, there is a piece of information, the original photographic orientation of the image, that is critical to displaying the photo correctly. When clearing Exif information, make sure you rotate the image to the correct orientation 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 of your website images are distributed to your visitors as quickly as possible.

One of the most common website problems in Cloudinary is that developers store images on their own servers, often on the same machine as their website. Two things are happening here: first, your server is busy publishing images instead of focusing on publishing your unique website content; second, you are missing out on one of the most amazing image delivery solutions - a content delivery network ( Content Delivery Networks).

How to solve: A content delivery network is an easy-to-use service that manages the images on your website much faster than your website itself manages the publishing of these images. CDN relies on a large number of servers spread across the world, or Say "border". When visitors browse your site, they are automatically routed to the nearest border server so that images can be published as quickly as possible, significantly reducing latency. CDNs charge based on the bandwidth required, slightly less than Hosting service providers' boxes are more expensive, but today's CDN prices are so affordable that it is worth using.

There are many CDN service providers to choose from. Just sign up and you can start enjoying its benefits. Amazon's CloudFront is a good one Start.

7. Static icons are delivered separately

In addition to pictures and thumbnails, websites also have icons and auxiliary images. Logo, arrow, star, symbol, logo, these can improve the website User experience. Picture fragments that make up buttons, shadows, borders, and other picture fragments allow you to dynamically create various widgets according to the requirements of the artist.

There are so many small pictures on a website that you can’t believe it. Get Google As for the search results page. If you often Google, you may still be impressed by its simple interface. You can barely see the icon, right? Big mistake. There are more than 80 small icons on the Google search results page (!)

A common mistake developers make is to embed these small icons into their websites as they are. The time it takes for the browser to download so many images is considerable. When downloading a picture, we as visitors need to endure the network delay, and because the average browser only supports downloading no more than 6 pictures at the same time, the delay is multiplied by the download batch of the pictures. Your visitors will need to wait for their browsers to finish downloading all of those images, and your web server may become unresponsive from dealing with so many download requests. Your visitors may even give up waiting and continue with their daily browsing activities.

How to fix: A simple solution is to use CSS Sprite, a single image that contains all your small icons. Your web page is downloaded and modified from this single image on your server, and the page's HTML uses alternative CSS class names to point to smaller images within the larger image.

Now, instead of 80 images, Google’s visitors download just a single image. Their browser will quickly download and cache these single images from Google's servers, and all images will be rendered immediately.

8. Use images when CSS3 can be used

When we convert the design of a website into HTML elements, many developers still design buttons as images. Because old browsers do not support the use of CSS to implement shadows, arc corners, and special fonts, developers have been accustomed to using small images to achieve the above features in the past, that is, image-based solutions.

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

Modern browsers support the use of simple CSS for shadows, rounded rectangles and special fonts. However, we still see many websites still using image-based buttons. This is a common type of mistake. For example, look at this part of the CNN button -

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

How to Solution: Make sure to use CSS3 whenever possible. If your graphic designer can provide CSS3-based elements for use. If you want to support older versions of IE, you should also make sure that your interface can degrade gracefully to at least You can ensure that the designed functions are available (although the original effect cannot be perfectly displayed), or choose a CSS3 simulation solution like CSS3 PIE.

9. Wrong image cache settings

Generally, your website has very little image culture Change. The HTTP cache directive allows the visitor's browser to cache these images, as can any other service (CDN, proxies, etc.). Once the image is cached, future visits to your website will use the cache instead of downloading it over and over again.

Correct cache settings improve user experience by reducing page load times, while also reducing your website bandwidth and costs.

Unfortunately, I see many cases where caching is not utilized correctly. Most commonly, there are concerns about lengthy cache settings when updating images because they think website visitors will see the old image instead of the new one.

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's URL you can tell when an image has changed, as well as its URL. When the URL changes, the browser will force the image to be re-read. The current web development platform can automatically add such a fingerprint to all images, solving this problem from the source.

How to solve: We strongly recommend actively using cache for images throughout the site, and setting the 'Expires' HTTP header of the image if possible. In addition to fingerprinting image URLs, this can instantly improve the performance of your website.

10. Use the same image size in all delivery media

Your website is being viewed by many different devices. With the rise of mobile and tablet users in recent years, take a look at your website's traffic analytics, which show a huge rise in visitors coming from these devices.

Whether the website has mobile visitors or if you plan to provide a mobile version of your website content, you have one decision left - how to send the image, the same image on mobile devices but in a desktop resolution will be too low.

We often see developers trying to save trouble by providing the same image for different resolutions and scaling the image on the client. Although the images look great, users waste time loading large images and you pay extra bandwidth charges. This is particularly unfair to 3G users and roaming users, who need to pay extra for large amounts of high-resolution images.

The opposite is using the lowest standard and using very low resolution images across all devices, making your site perform poorly on newer, higher resolution devices.

How to solve: The solution is simple - identify the visitor's mobile device and resolution through user-agent or client-side Javascript code. After obtaining the accurate resolution, the best-fitting image is retrieved from the server. This of course requires you to provide a set of thumbnails of the original images. There are already some good JavaScript packages that automate this process.

Summary

The most common website image processing problems mentioned in this article are actually the most common problems we encounter on Cloudinary. It’s not that there are only so many problems, we just try to solve the problems that have a greater impact on efficiency. Put it forward and give a popular explanation so that you can use it as a starting point for research and find a suitable solution.

If you haven’t heard of Cloudinary, then I can happily tell you that Cloudinary has solved the problems mentioned above and not mentioned above. Every image uploaded to Cloudinary can be dynamically generated in any size, format, Quality thumbnails. So you can find a configuration that suits your site and meets your customers' expectations in a variety of settings. Cloudinary provides easy-to-use, manageable Sprites. All images are automatically stripped and optimized for size. And using high-speed CDN transmission with reasonable cache configuration, almost all the best practices mentioned in the book are used. Finally, it is worth mentioning that Cloudinary’s cloud dynamic image resizing ability perfectly adapts to the responsive design.