Along with compressing images, resizing images can dramatically help speed up a slow loading page, especially if your site has a lot of images. For example, if you have an image on a page that is 400×600 pixels, but you have the HTML image width and height attributes set at 200×300, the larger image will be downloaded, even if it is smaller on the page. While it is always advisable to have image width and height set, it can often lead to longer page load times. And not setting the image width and height attributes set will cause the browser to load the page layout differently as the images load, so at a minimum, have the image attributes set. However, to avoid this unnecessary extra time to download the full-size image, it is recommended best practice from YSlow to simply resize the image to the appropriate size before adding it to the page. In this way, it is optimized appropriately and will reduce page load time.
Do not Scale Images in HTML
Considerations for Scaling Images
Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.
PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.