Responsive Images

Today we looked at how to create responsive images for use across multiple devices. As the variety of devices used to browse the internet becomes more diverse, it is increasingly important to have websites that scale content accordingly in order to provide the best user experience.
In order to have responsive images, I found an image and resized it so that it fit various different screen sizes. To make the images responsive, I used the tags, which function as a combination of the tags and media queries. This is the code from my website:

My responsive website, at nearly the full width of the screen

My website at a smaller width 

The second line defines the size that the image will appear on the webpage (500px), the third line defines what image to use and the number afterwards is the native size of said image. The fourth line is the media query, which will check for the screen size of the device, and if it matches the parameters then the code above will be carried out and the image loaded in.

This method of creating responsive images allows all the calculations to be carried out in the HTML document, as opposed to using media queries which require an external style sheet. This makes more sense, as when we think of the HTML as the structure and the CSS as the style, it makes sense that the structuring of the images across the page would be carried out in the HTML document.

This is a link to the website, hosted on Github.