Recommandé
Contenu connexe
Similaire à AWS Re:invent - Top Ten Image Mistakes and How to Solve Them
Similaire à AWS Re:invent - Top Ten Image Mistakes and How to Solve Them (20)
Dernier
Dernier (20)
AWS Re:invent - Top Ten Image Mistakes and How to Solve Them
- 1. © 2016, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Robert Moseley - Engineering Top 10 mistakes when handling website images
- 2. What to Expect from the Session At Cloudinary we see how thousands of different websites and applications handle their image processing. In this session we will share the top ten most common mistakes we see and share strategies on how to solve them to ensure your delivering the most optimal experience to your users.
- 3. 1. Wasteful browser-side resizing Ex: -400x400 = 160k pixels -300x300 = 90k pixels (44% less) -200x200 = 40k pixels (75% less) This image is 26.77kb (77% smaller) when delivered at the rendered 504x36px.
- 4. 2. Unnecessarily high quality JPEGs 292.33KB JPG image. 80% quality:104.52kb (64.25% reduction) with no visible quality loss.
- 5. 3. Incorrect image file types 956.21KB PNG Image 136.76KB JPG(85.7% reduction)
- 6. 4. Delivering non-optimized images This image, still as a PNG, can be compressed to 635KB (34% savings)
- 7. 5. Ignoring more efficient, modern image formats
- 8. 6. Delivering static icons one by one
- 9. 7. Incorrect image cache settings
- 10. 8. Using a single size across all delivery mediums
- 11. 9. Using the GIF format Initial release of GIF format: 29 years ago Latest release of GIF format: 27 years ago <video autoplay loop> <source src=“/cat.webm” /> <source src=“/cat.mp4” /> <img src=“/cat.gif” /> </video>
- 12. 10. Assuming the best image quality setting This image from the previous Techcrunch article looks like this at various quality settings: 95%: 272KB 85%: 126KB 80%: 104KB 60%: 69KB 40%: 54KB
- 13. Awesome Stuff! But how do I do it?! Serverless Computing! +
- 14. Serverless Computing with AWS CDN +
- 15. Thank you!
- 16. Remember to complete your evaluations!
- 17. Related Sessions
Notes de l'éditeur
- Solution: using a dynamic resizing engine to ensure images are created at the correct sizes before delivery to end user. Examples: Building an application on AWS using something like ImageMagick/GraphicsMagick Using a service like Cloudinary
- Solution: Use ImageMagick/GraphicsMagick platform or a service like Cloudinary to ensure all web images are saved at a quality ~80% Cloudinary’s auto quality algorithm results in a 87.83kb file (70% reduction) with no visible quality loss.
- Solution: Search for data in the Alpha channel on any format that supports Alpha. If there’s no data, transcode to JPG. This image on this Techcrunch article is a PNG format but contains no transparency. It is better to use the JPG format in this case. Without any resizing, simply using the proper format reduces this image from 956.21KB to 136.76KB (85.7% reduction)
- Many, assuming that since PNGs are a lossless format, don’t bother to optimize even though significant savings can be made with tools like PNGCrush, OptiPNG, and Cloudinary.
- Solution: Convert images to the WebP and JPEG-XR modern formats, while also adjusting compression quality to balance between the formats. By detecting the visitor’s browser, you can ensure users receive the best images possible, in terms of visual quality and file size optimization. Even though Google has added support for its WebP image format to Chrome browsers, and Microsoft has done the same for JPEG-XR in most of their Internet Explorer and Edge browsers, developers have still not embraced them.
- Solution: utilize a CSS Sprite, a single image that contains all your smaller icons. Your web page is modified to download this single image from your server and the page’s HTML uses alternative CSS class names to point to the smaller images within the larger one. Now, instead of 80 images, Google's visitors download just a single image. Their browser will quickly download and cache this single image from Google's servers and all images will be immediately visible. A common mistake developers make is embedding these small icons as-is in their website. The time it takes for a modern browser to download so many images is quite large. While downloading an image, we suffer from a communication latency and since an average browser supports no more than ~6 images downloaded simultaneously, this latency is multiplied for every batch of images downloaded.
- Solution: Adding a fingerprint (md5, timestamp, etc.) to your images urls. By adding a fingerprint to your image URLs you make sure that when an image changes, so does its URL. Use aggressive caching for all your website images by setting your images HTTP 'Expires' header to as far in the future as possible. HTTP caching directives allows such images to be cached by your visitors' browsers and any other server along the way (CDN, proxies). Once an image is cached, the locally cached copy will be used. Correct cache settings improves user experience by reducing page load time while saving you costs by significantly reducing your website's bandwidth. The most common case is due to an unnecessary concern that a lengthy cache settings will mean that if images are updated, your website visitors will keep seeing old images instead of your new ones.
- Recent years saw a huge rise in mobile and tablet users and checking your website analytics should show a rising number of such visitors. In fact, it is the majority of visitors on a large number of websites today. With this has come the rise of responsive websites. We usually see developers taking thefast route here, namely, offering the same exact images across all device resolutions, using client-side resizing for the images. As we saw in Mistake #1, this leads to a huge waste in additional bandwidth load. Solution: Create your images in sizes that match your responsive breakpoints. An even better solution is offered by open source tool responsivebreakpoints.com which uses ”bandwidth breakpoints” instead of physical size breakpoints to ensure optimal bandwidth savings. On the front end, a JavaScript library can be used to detect the space available for each image and fetch accordingly, or you can use the ”srcset” attribute to inform the browser of its options. Lastly, browsers Chrome and Opera support “client hints” which send this information in the request headers.
- Most developers rely on the GIF image format to display short video clips on news sites, media sites and social sharing sites. While the GIF format is easy to use for embedding video clips using a simple HTML image tag, it is not efficient for captured movies because the files are huge and slow to load, especially on mobile devices, resulting in high bandwidth costs and high CPU utilization. Solution: There are several ways to deliver and embed the same clips and animations using modern file formats, such as Animated WebP for Chrome browser users. Another approach is to apply lossy compression of the GIF File, which results in a slight visual quality reduction but significantly decreases the file size. GIF files can also be converted to MP4 or WebM video formats, embedding the clips and HTML5 video tags instead of the image tag.
- A/B test image quality! Add segments to your test to find which segments prefer a faster loading site over higher image quality and vice versa. Tip: If you’re supporting retina images, you can often get away with lower quality without it being visibly noticable.
- With ImageMagick running on Lambda, you can build an auto-scaling, real-time image transformation service to solve all of the above problems. Connected to S3 storage you can automatically kick off functions to transform all high resolution originals into the various sizes, formats, and qualities you’ll need to optimize performance of your website and application.