1 / 5

Image Optimization Tips For Improved Performance

Image optimization tips and tricks to ensure your website is available for everyone even with metered bandwidth, less memory, and limited networks

InstartLogic
Download Presentation

Image Optimization Tips For Improved Performance

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IMAGE OPTIMIZATION TIPS FOR IMPROVED PERFORMANCE

  2. Media assets, making up over 75% of the average web site’s download size, are vitally important to optimize. If you have video on your site, with the average video coming in at 317kb per asset, videos are the most important file type to optimize. However, most websites don’t have many videos, if any. So, even though video files are usually much larger than image assets, images account for 66% of a web page’s download size on average. Optimizing images is often the lowest-hanging fruit in terms of web performance. Optimizing for image size, image resolution and image format can lead to huge improvements in performance. The fewer the assets and the smaller their file size, the faster your assets will download and the sooner they’ll get painted to the screen. Your users will enjoy a better user experience both on their device, and, for those with limited bandwidth, in their wallets. GZip GZip works best for text-based content, while providing little to no byte shrinkage on previously-compressed assets. SVG is a text-based image format. Minifying and GZipping SVG image and font files can greatly reduce their SVG file size. Minify first. Then Gzip. Remove Image Metadata Cameras and software often add metadata to images that is not seen by the web user. This metadata can actually be a security risk by exposing geographical data. There’s free software that will strip EXIF metadata from multiple images at a time. Resize Images Serve the smallest image file for the screen size and resolution. Optimize your HTML with the <picture> element or the srcset attribute, and load your background images in CSS to serve the smallest image. If you still support Internet Explorer, consider using the Clown Car Technique for responsive foreground images. I prefer the Clown Car Technique as a fallback over Picturefill, as the latter requires JavaScript. Make sure you serve images scaled for the browser. Requiring the browser to resize images not only leads to downloading unneeded pixels, especially in the case of large images, but resized images take longer to decode and paint.

  3. Optimize Images Serving the smallest image size for the screen size and resolution, as mentioned above, is a good start. This can be done manually or automated via PhotoShop, image-resizer, or a plethora of plugins likely available to you server-side or in your development environment. The images themselves, no matter the size, should be compressed as much as possible without noticeably degrading the quality. You can reduce your image file weights with desktop image compression programs like ImageOptim or ImageAlpha for pngs. This process can also be automated in the cloud with services like Instart Logic’s own SmartVision, which employs machine learning to maximize the optimization based on the content of the image. Use the Right Image Format Image types include SVG, GIF, JPEG, PNG, and WebP. If you have a palette of less than 256 colors, like a comic, or if you need animation, GIF may be the right choice. If you need animation, and you need the image to be scalable, SVG might be a better choice (even if you don’t need animation). If you need transparency, a PNG-8 is usually smaller than a GIF, but if you need more than 256 colors, a PNG-24 might be the best option. Unfortunately, PNG-24 can lead to huge file sizes, so consider a JPEG. You can play with the quality settings when saving JPEGs to reduce the file size. If you need a high resolution transparent PNG which can lead to huge file sizes, consider serving a JPEG with a CSS mask: this may add an HTTP request, but can greatly reduce the number of total bytes, and is supported in most mobile browsers. WebP has all the benefits of animation, transparency, and resolution, but is only supported in Blink browsers including Opera and Chrome. For Edge there is JPEG-XR. You can test for WebP or JPEG-XR support, or use an image serving tool, like SmartVision. Reduce the Number of Images You can reduce the number of HTTP requests by spriting the plethora of smaller images your site might need. You can also reduce the number of bytes by reducing the actual number of images your page requires: is your image worth 1,000 words or does your site work better without it?

  4. Leverage CSS Leveraging CSS to reduce image size and number of images could be a blog post in and of itself. Maybe I’ll write one soon. In the meantime, the list of tips includes: Image Masking: use image masking when you need a “transparent JPEG” and don’t want the huge file size that comes with alpha transparent PNGs CSS Effects: use CSS properties like gradients, borders, outlines, rounded corners, shadows, etc. to create resolution-independent effects that only require a few lines of minifiable and gZippable text Sprites: until HTTP/2 is fully supported the use of image sprites and background-position can be used, to reduce the number of requests Animation: when animating GIFs, consider CSS animation using the steps() timing function and sprites as an alternative Filters: use CSS filter effects instead of multiple versions of the same image if you want filters applied. This saves bytes, HTTP requests, and time Media Queries: Use media queries to serve hi-res images to hi-res devices By reducing the download size, your site will be available to more people: it will be more accessible to those with metered bandwidth, less memory, and limited networks. Ensure your site is accessible to everyone – including screen reader users and bots – by including thealt attribute on all your foreground images, with an empty alt attribute being appropriate for purely decorative images.

  5. Instart Logic makes application delivery fast, secure, and easy. Instart Logic provides the first cloud application delivery service in the world to extend beyond the limited backend-only cloud architectures of the past with an innovative, intelligent end-to-end platform delivered as a service.Our end-to-end platform combines machine learning for performance and security with a CDN for delivery. Designed for DevOps and mobile-first applications. Interested in learning more? Try it on your site by creating an account for our free Starter Edition service Preview our image optimization capabilities in the Playground Contact Sales

More Related