10 most common errors and their solutions for working with web images

10 most common errors and their solutions for working with web images

Images are the most important part of any modern web site development. Currently, statistics have accounted for 60% of the total website bandwidth. is more noticeable when dealing with cutting-edge web site designs. Using a pin-like layout on an image-rich social network, this number can be as high as 85%.

Unfortunately, the bandwidth is very expensive. For high-traffic websites, bandwidth is likely to be a major responsibility for your IT programmers, easily exceeding virtual hosting and storage costs. In addition, such a large amount of traffic will take time, so when browsing your site, visitors will likely take a long time to wait for the image to be loaded.

We list the problems that we often encounter every day with how they can (and should) be solved.

1. The luxury of resizing the picture 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 – there are many thumbnails of a particular size in the site, and the design of the graphic changes. The new graphic design requires a slight change in thumbnail size, and our developers, sometimes casual, sometimes deliberately, use the original large-size image, just for the browser to adjust a piece of css height and width, so that the picture looks like a thumbnail image.

In modern browsers, the end result looks exactly the same, but the pieces that are consumed by loading the picture are different. Your website access this takes a precious time to load an unnecessary pull picture, and you waste extra bandwidth to transfer them. The problem with older browsers is even more pronounced, as their algorithms for resizing images are less efficient than average water supplies.

This problem is much more common than you might think, and it can be found in many of the websites we visit on a daily basis. For example, when you visit Yahoo's front page, you'll notice that all the thumbnail images loaded here are twice times the size you see in the "Hot Spot" news.

How to FIX: For developers/designers – make sure that the images you want to publish are perfectly fit to the size of their website. Even with the same picture, it is worthwhile to use different sizes of thumbnails to fit different pages, to create thumbnails of different sizes, instead of all using the same large size picture and relying on the browser to resize it.

2. Unnecessary high-quality JPEG images

JPEG pictures are really a revolutionary impact on the Web. Over the years, this lossy compression format has allowed Web developers to load high-resolution images with high-detail values that cost less bandwidth than any other competitor.

And we're still constantly seeing developers and graphic designers not trying to compress images in JPEG. In fact, on most websites, you can reduce the quality of the JPEG quality without noticeable loss.

While 85% of JPEG image quality seems to be very common, we see that many sites in the quality are generally in the 95%, while a lower quality of water products, in fact, can no longer damage the entire experience of the situation greatly solve the bandwidth. The end result is higher bandwidth consumption and the impact of network latency on the user experience.

The above two picture quality is almost the same, the left is the quality of 95% JPEG size 34KB, and the right 80% JPEG is only 17KB, as long as half the download time, and loading time is twice times the former. Such a negligible loss of quality is worthwhile.

How to fix it: Don't be afraid to try a lower-quality jpeg. For some sites, we found that using 50% JPEG quality can bring us a very reasonable result. Higher-quality JPEG of course always looks better, but the quality improvement is not always worth the extra bandwidth and wait time that comes with high-quality images.

3. Wrong picture file type

The current Web site is a JPEG, PNG, and GIF three-point world. On average, JPEG and GIF accounted for about 40%,png of the remaining 20% of the site.

The good (and bad) aspect about these three formats is that each of them has a different role in the site. Using the wrong picture format is a waste of your visitors ' time and your own money.

In Cloudinary, our most common mistake is to use PNG to post photos. A common misconception about PNG is that it is a lossless format and that it is the most likely substitute for photos. Usually it's true, and there's really no need to optimize. Just a little png file size to get a high quality JPEG image.

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

How to break: always pay attention to what the picture format is suitable for the content display. PNG should be used for computer-generated images (charts, logos, etc.), or you need to have some transparency in the image (Image overlay). JPEG should be used to display the captured picture. GIF should be used when animating (using Jjax to load animations, and so on). Note that these are the usual principles, and PNG trumps gif in almost all respects.

4. Publish a non-optimized image

We know that PNG is a lossless format, but do you know it can be further compressed? Publish the same fine image, the free PNG compression tool can reduce the PNG size by up to 50%. Same fine picture, and only half the size? When I'm brain-retarded. Unfortunately, many developers and web designers skipped this step and published non-optimized images.

How to break: Pngcrush and OptiPNG is two open source image optimization Library, if you haven't used it, you really should use it. If you do not need to automatically optimize the process, you can go to Yahoo Smush. It provides manual compression of the PNG service.

Above is a sample of Yahoo Smush use. It's working.

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 of a recent trip, these come with the original information of a modern camera and are likely to introduce many meta-messages into the photo.

Meta data includes a large number of camera and photo information in the EXIF/IPTC format, 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, taking off meta-information is a great idea. It's good for privacy protection and for reducing file size. Unfortunately, we rarely see developers taking the time to clear meta-information, which increases bandwidth and also undermines the user's browsing experience.

How to break: Make sure you clear the meta-information from your pictures and the photos that users upload. If this information is necessary, make sure it's available and not as part of your picture. Tip: Even though the meta-information of a picture is not necessary for your site, there is a piece of information that is the original photographic direction of the image and is critical for the correct display of the photo. When clearing EXIF information, make sure you rotate the picture in the correct direction based on the EXIF information.

6. Post pictures directly from the server

Once your site is in place, your next goal is to make sure that all of your site images are distributed as quickly as possible to your visitors.

One of the most common web site problems in Cloudinary is that developers store images on their own servers and are usually on the same machine as their website. Two things happen here: First, your server is busy publishing pictures instead of focusing on publishing your unique site content; second, you missed one of the most amazing image distribution solutions-content distribution Network (Delivery Networks).

How to solve: the content distribution network is very easy to use services, IT managers of your site's pictures, more than your site management of these images of the release of a lot faster. A CDN relies on a large number of servers, or "boundaries," that are spread all over the world. When visitors browse your site, they are automatically routed to the nearest border, so that the image is released as fast as possible, dramatically reducing latency. CDN based on the required bandwidth charges, slightly more expensive than the host service box, but today's CDN price has been affordable to quite worth a use.

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

7. Static icons separated by individual transmission

In addition to pictures and thumbnails, the site also has icons and secondary images (auxiliary image). Logos, arrows, stars, symbols, logos, these can improve the user experience of the website. Picture clips that make up buttons, shadows, borders, and other picture fragments allow you to dynamically create various widgets (widgets) based on the artist's requirements.

A small picture of a website is more than you can believe. Take Google's search results page. If you're a regular Google, you may still have an impression of its simple interface. You can barely see the icons, right? Wrong. Google Search results page of small icons 80 more than (!)

A common mistake developers make is to embed these small icons as they are in their website. Browsers need to spend quite a lot of time downloading so many pictures. When downloading a picture, we as a visitor need to endure the pain of network delay, because the average browser only supports downloading no more than 6 images at a time, so the delay is multiplied by the picture's download batch. Your visitors will need to wait for their browser to complete the download of all these images, and your Web server may become unresponsive due to the many download requests. Your visitors may even give up waiting to continue their daily browsing activities.

How to FIX: A simple solution is to use a CSS sprite (CSS sprite), a single image containing all your small icons. Your Web page is downloaded and modified from this single image on your server, and the HTML of the page uses an alternative CSS class name to point to the small picture inside the big picture.

Now, instead of 80 images, Google's visitors are only downloading a single image. Their browser will quickly download and cache these single images from the Google server, and all of the images will be displayed immediately.

8. Use the picture when you can use CSS3

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

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

Modern browsers support the use of simple CSS to implement shadows, rounded rectangles, and special fonts. However, we still see that many websites are still using picture-based buttons. This is a common type of error. For example, looking at this part of the CNN button--

This tip is a 61KB image that can be easily implemented with simple CSS instructions, increasing load times and user experience while reducing bandwidth consumption.

How to fix it: whenever possible, make sure to use CSS3. If your graphic designer can provide CSS3-based elements to use. If you want to support an older version of IE, you should also make sure that your interface is gracefully downgraded to at least the functionality that ensures that the design is available (although it does not show the original effect perfectly), or you can choose a CSS3 simulation scheme like CSS3 pie.

9. Incorrect picture cache settings

Generally your website picture culture rarely changes. The HTTP cache instruction allows the visitor's browser to cache the images, and any other service can do so (CDN, proxies, etc.). Once the image is cached, you will be using the cache instead of downloading it over and over again in future visits to your website.

Correct cache settings improve the user experience by reducing page loading time, while also reducing your website bandwidth and spending.

Unfortunately, I have seen many cases where the cache is not properly utilized. Most commonly, worry about long cache settings when updating pictures, because they think site visitors will see older pictures 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 URL of the image you can know when the image has changed and has its URL. When the URL changes, the browser forces the image to be re-read. The current Web development platform is able to automatically add such a fingerprint to all the images to solve this problem at the source.

How to FIX: We strongly recommend to use cache for full-site images actively, if you can set the image ' Expires ' HTTP header. In addition to the fingerprint of the image URL, this can immediately improve the performance of your site.

10. Use the same image size in all conveying media

Your website is being browsed by many different devices. In recent years, with the rise of mobile phone and tablet users, look at your site's traffic analysis, which shows a significant increase in the number of device visitors from here.

Whether the site has mobile visitors, or whether you plan to provide a mobile version of your site content, you still have one decision-how to send an image, the same image on the mobile device, but the desktop resolution is too low.

We often see developers save the hassle of providing the same image for different resolutions, scaling the image on the client side. Although the image looks good, the user is wasting time loading a large image, and you also have to pay an extra bandwidth charge. This is especially unfair to 3G users and roaming users, and they need to pay an extra fee for a large number of high-resolution images.

The relative situation is to use the lowest standard, using very low resolution images across all devices, which makes your site behave badly on newer devices with higher resolution.

How to fix it: The solution is simple-identify the guest's mobile device and resolution via user-agent or the client's JavaScript code. After obtaining the exact resolution, the server retrieves the most suitable image. This certainly requires you to provide a thumbnail of the original image. There are some good JavaScript packages that automate this process.

Summarize

The most common web image processing problems mentioned in this article are actually the most frequently encountered problems in cloudinary. This is not to say that there are only so many problems, we just try to put the impact of more efficient issues, and give a popular explanation, so that you can use this as a starting point for research to find the right solution.

If you haven't heard of Cloudinary, I'm happy to tell you that Cloudinary has solved the above mentioned problem. Each image uploaded to Cloudinary can be dynamically generated in any size, format, quality thumbnail. So you can find configurations that fit your site and meet your customers ' expectations in a variety of settings. Cloudinary provides easy-to-use, manageability-strong sprites. All images are automatically stripped (stripped), optimized for size, and configured with a reasonably high-speed CDN for caching, almost all of the best practices mentioned in the book. Finally, it is worth mentioning that Cloudinary's cloud dynamic image sizing ability perfectly adapts to the corresponding design.

