Images account for the majority of data attached to websites. The less a computer has to load the quicker the website will load. It is important to understand what type of image to use and when to use images.

• Eliminate unnecessary image resources
• Leverage CSS3 effects where possible
• Use web fonts instead of encoding text in images
• CSS effects (gradients, shadows, etc.) and CSS animations can be used to produce resolution-independent assets that always look sharp at every resolution and zoom level, often at a fraction of the bytes required by an image file.
• Web fonts enable use of beautiful typefaces while preserving the ability to select, search, and resize text – a significant improvement in usability.
• Vector graphics use lines, points, and polygons to represent an image.
• Raster graphics represent an image by encoding the individual values of each pixel within a rectangular grid.
• Prefer vector formats: vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high-resolution world.
• Minify and compress SVG assets: XML markup produced by most drawing applications often contains unnecessary metadata which can be removed; ensure that your servers are configured to apply GZIP compression for SVG assets.
• Pick best raster image format: determine your functional requirements and select the one that suits each particular asset.
• Experiment with optimal quality settings for raster formats: don’t be afraid to dial down the “quality” settings, the results are often very good and byte savings are significant.
• Remove unnecessary image metadata: many raster images contain unnecessary metadata about the asset: geo information, camera information, and so on. Use appropriate tools to strip this data.
• Serve scaled images: resize images on the server and ensure that the “display” size is as close as possible to the “natural” size of the image. Pay close attention to large images in particular, as they account for largest overhead when resized!
• Automate, automate, automate: invest into automated tools and infrastructure that will ensure that all of your image assets are always optimized.