The use of imagery is profound in websites, but takes a heavy toll on the loading times of websites. And this is even more true for smaller mobile devices, which often need to download the same images as their high definition counterparts. Although they can be scaled, their file size remains equal. Luckily enough, there is an HTML attribute for the image tag which can help to serve the right. It’s called srcset and sizes. Responsive images used to be about scaling the image proportionally to the width of a device. A desktop would serve the full size images, but […]

Website optimization is an important aspect of a web developers life, as website speed is a determining factor if visitors will stay. In this tutorial, we will look to one small aspect of website optimization, namely the use of image sprites. This will be done with the example of social media icons in svg, which we will render retina compatible with a .png fallback for IE8. What is an image sprite? Image sprites combine reusable images into one single image, thereby reducing the amount of http requests that have to be made. Using CSS and elements with a fixed height […]