![]() For less important images, those not relevant to the page content, or those used for aesthetic purposes only, set these as background images via CSS and use the ‘background-size’ style property to display them appropriately based on the site layout. When producing in-page content images, use the new HTML element. ![]() ![]() There are a few techniques for displaying Responsive images on your website, allowing different images to be specified for different screen sizes and resolutions as appropriate for the device the site is being viewed on. It’s important to have a process in place to reduce image sizes for display on small-screen mobile devices. Loading more pixels than the screen can display means wasted data from these large files, and places additional pressure on the device’s GPU to resize the image appropriately. However, these do not solve the problem of displaying large-size images on small-screen devices. Image optimisation software such as ImageOptim for Mac and build tool tasks such as grunt-contrib-image-min for Grunt and gulp-imagemin for Gulp allow a reduction in image file size. There’s little point spending hours optimising relatively small HTML, CSS and JavaScript file contents if you then include a 500KB image on your homepage which takes several seconds to load. There are many articles written covering the many ways to reduce the size of HTML, CSS and JavaScript files by using different character-removal techniques, but the reality is they are only saving a small number of bytes compared to the overall size of the page. By minifying and uglifying our code, and ensuring our text-based site assets – HTML, CSS, JavaScript, etc – are served using gzip compression, we reduce the amount of data downloaded across the network, reducing the time taken to load. Heavy page weight is a big issue for mobile devices particularly, where the network connection may not be as fast as that for desktop devices. This ensures we don’t have to maintain different code bases for different device widths, and keeps the lightest page weight – the overall file size of the page – possible on each device. One of the key rules when building a Responsive website is to try to reuse as much of the HTML, CSS and JavaScript as possible, applying breakpoints and additional styles only as the layout breaks and the content requires it. I’ve spent a lot of time working with Grunt in recent months searching for the perfect workflow
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |