Seasons greetings to all those who have helped me in the last year.
I have a web site that when I display it on one of those large square flat displays it stretches the graphic banner (and the rest of the page I suspect but not so noticeable) upwards distorting the circles in the graphic. I think the screen size responsible is 1024 x 1278(?) but the physical profile of the device appears square and displays a square picture. Other screen sizes are OK.
My page is fixed at about 820px wide (I stretched it a bit to make it more readable on the basis that 600x800 is less popular now) but not in the verticle plane.
Putting the height and width in the HTML allows the browser to assign the space for the image as it builds the page. This helps the page load more quickly because otherwise other elements on the page (e.g. blocks of text) may have to be adjusted as the images appear.
Love the "skip to main content" - a big accessibility thumbs up. Also for the correct use of headings.
You have the same alt text for all the school buildings. They are all the Technology Lab!
In fact since each image has a text caption in close proximity you don't need to add any text to the alt attribute: make it a null value (alt=""). The reason is that a screen reader user will hear both the caption and the alt text so if they say the same thing it is a tad annoying. ("sports hall... image, sports hall)