YOWCT/yowct.github.io

Minify and optimize images for the web

lchski opened this issue · 9 comments

lchski commented

The home page comes in at 1.9 MB on first load, 1.7 MB of which are images. Can minify and optimize the images for the web. Depending how they’re used, it’d be worth employing a responsive image technique if possible.

lchski commented

(I’m happy to take this on in the next week or two, just wanted to leave an issue in case someone else has more time.)

xander-miller commented

Sounds good. 🎃

Your article went into a lot of detail but it seems the best way to do this is use the srcset property of the img tag and let the browser do the work.

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

Responsive Images: If you’re just changing resolutions, use srcset

lchski commented

Yup, that’s probably the best method. No art direction in our case, so that’s really all we need.

  • 👍1
xander-miller commented

Why is nothing ever simple? The largest images are in the background CSS. And the equavalent CSS function to srcset is not supported by firefox or edge. Chrome and Safari support it and they are most of the mobile device market so I'm just going to use the CSS function anyway.

xander-miller commented

disregard I found a better way to do it.

xander-miller commented

Interesting but a whole .js script sees a little overkill.

I'm just going to use media queries, here is the intro header image as an example.

@media(max-width:1199px) {
    .intro-header{
        background: url(../img/intro-bg-md-1200.jpg) no-repeat center center;
    }
}

@media(max-width:767px) {
    .intro-header{
        background: url(../img/intro-bg-sm-768.jpg) no-repeat center center;
    }
}
xander-miller commented

@lchski I think 20526b0 should resolve this issue. The page is now under a 1 Mb on a mobile load.

lchski commented

🎉 Nice!