I chose to optimise this image to be a hero image because it shows off the main building of the University of Cape Town. I felt it would work as a hero image because it is an important and easily identifiable landmark that would grab the attention of any user who chooses to view this site. I first cropped the image to an aspect ratio of 16:9 before saving the image as 1280 pixels by 720 pixels. This ensures that the image would not take long to load and deter users from viweing the website.
I chose to optimise this image to be a skyscraper banner because I felt that the visuals of the food would make for a good promotional image for a cafe or restuarant. Skyscaper banners provide an effective and visible space for any marketing messages to grab the attention of users browing through websites. It has a maximum width of 200 pixels and a maximum height of 500 pixels.
I chose to optimise this image to be a square image as I felt the visuals would match and it could be used across multiple platforms. I first cropped the original image to a sqaure, keeping the synage of "free food" along some of the visible food as the subject. Square images work because most social platforms are built around them, like profile pictures or product grids. It is also effective when viewing the image on mobile platforms. Square images would also load reliably across different devices. The aspect ratio is 1:1 with the width and height being 400 pixels respectively.
Page load times are important as users wish to view information as quickly as possible. If there is a delay, the chance of users leaving your site will increase. Large, high-resolution images are usually the main culprit of this as they are often the heaviest resource on the web. To identify the unoptimised images, I would employ the following tactics: saving the image as a JPEG as the format reduces file size significantly while saving its quality, compressing the images before uploading them, and finally testing my web page's performance by using a website speed test tool.