Replicating a JPEG using pure HTML & CSS

24/02/2016

Ever wondered if you could recreate an image you’ve seen with pure CSS and HTML? Well so have I, until today when I decided to step up to the plate.

The image you can see to the right of this paragraph is a 114kb JPEG which was created in photoshop. As a JPEG it can be made mobile responsive simply by expanding its width to take up a parent container and allowing its height to adjust automatically. Typically you would then set a maximum width on the parent container to prevent the image from stretching too far and becoming distorted.

Cartoon Macintosh image

The HTML and CSS

Actually putting this together required the ability to get over a two hurdles which don’t come up very often in day to day layout building.

The finished image

The result is a recreation of the original image which can be scaled to any size, large or small without becoming distorted at any point because it relies on HTML and CSS rather than pixels to generate an image.

It is also worth noting that unlike the original image which came it at 114kb, this version is a mere 5kb. So the load placed on bandwidth when loading a page is considerably less.