I optimised each image to fufil a different purpose on this webpage while trying to keep the file size as small as possible. The mountain image was cropped into a wide hero banner because it is a horizontal image and works well at the top of the screen. The free food image was cropped into a square so the centre of focus stays in the centre. The toast and coffee image was resized into a sky scraper banner. I exported all files as JPEGs and did not use a large file size to help webpages load faster without reducing image quality.
While working on this task I learnt the importance of checking the image size, quality and file format. if am image was not displaying correctly, I would first check that the file name, extension and file path in Visual Studio Code matched that of the actual image. I would also make sure the image had been exported in the correct format (JPEG). Testing the webpage after each change would help me identify my problems quickly.If an image did not look like it was fitted correctly I would resize it for example image 2 required me to addin the height and width requirements. This helped me to create a website that looks professional, loads quickly and provides a pleasant user experience.