This repository includes the code examples used in 'The Ultimate Guide to Responsive Images on the Web' article, published on the DebugBear Web Performance Blog.
An online version of the demos is available, too.
To run the code examples, it's recommended that you upload the code to a local web server (such as WAMP, XAMPP, MAMP, etc.) so that you can check the performance implications in the 'Network' tab of your DevTools. Alternatively, you can also open the index.html
files simply in your web browser, however in this case, you won't have access to the performance data.
To make it easier to test the code, enable responsive device mode in your browser (e.g. Ctrl + Shift + M
in Firefox) or use a responsive design browser extension.
For the tests, open a new browser window in incognito or private mode.
The photo used in the code examples is authored by Pietro de Grandi (Unsplash).