Properly Size Images

Too often large images are being used that what a page actually needs to render the image for a user. Unwarranted image sizes can vastly slow down page load.

Even when a image is sized properly for desktop viewports, the same image is used for smaller screen sizes.

Ways to optimize image size

Google suggests several ways to serve images in viable sizes:

• Making your images responsive -- creating different image file sizes to fit different viewport sizes -- aids in speeding up page load in these instances. You can make your images responsive by editing your code through media queries or differentiating screen sizes.
• Use vector-based formats like scalable vector graphics (SVG). SVGs can scale to any size without changing the size of the code to make it. SVGs are especially useful for logos and icons.
• Some browsers can read what are called client hints. Here the browser communicates the screen size and the server interprets the proper image size to serve.