Tag: Static HTML

Client has a bunch of static landing pages that are mobile-friendly and need to remain that way. But what is to be done about srcset? Read on, oh reader, for the solution. First, I created a gulp build task which makes a bunch of different sizes. Install dependencies like this: npm install -D gulp-load-plugins gulp-responsive sharp. The task uses gulp-responsive to generate multiple image sizes from a source directory…

There're a lot of really complicated descriptions of srcset out there. As a result, I thought srcset was more complicated than it actually is. Here's the all-purpose srcset code I used in my static HTML. This covers 1x, 1.5x, 2x, and mobile optimization in a fine-grained way: Explanation In srcset, you're telling the browser the sizes of the images that you have to fill the hole. /images/myimage-100w.png 100w, describes the width of the image myimage-100w.png as 100px. In sizes, you're specifying the size of the image hole to fill based on media queries…