![]() The higher ups tell him it needs to look good on large screens as the district governor will be looking at it on a 2560x1440 monitor, but it also needs to look good and work well on a phone or tablet, as that is the medium used by most prospective parents. Let’s say this website needs to have a handful of images, some text, and a few links. ![]() Gary is a web developer working to create a website for a school in Pittsburgh. To best illustrate what responsive images are, let’s describe a situation where Responsive Images are not used, and identify the problems. If you know what responsive images are, skip to the next section - otherwise, read on. I’m also going to be leveraging this lazy loading library to painlessly lazy load our img tag content too, as our method to alter the markdown-generated img tags to add the resolution-switching makes it easy to add lazy loading too. ![]() I already detailed how to automatically optimise images without plugins on Jekyll, and this post is going to build upon the process I used there to also create responsively-sizes images for use in resolution switching. I want to be able to take advantage of Responsive Images and Lazy Loading, so have devised a solution using Git Hooks and clever manipulation of liquid logic. Plugin-based solutions already exist for responsive images and lazy loading, but for many people who use GitHub for their site, these solutions are not workable as GitHub does not support the plugin(s). As I have been adding more and more images to my website, images have become a bigger and bigger problem for me. There are a lot of strategies being employed on the web right now to reduce this cost, like optimising images, forcing all images to a reasonable size, lazily loading images, or making images responsive. HTTP Archive currently shows that 50% of the bytes transferred on a typical site are for images. In modern web development, the biggest resources that the client has to load to render a website are typically the images. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |