4 ms·
That "Rust Evangelism Strike-Force" logo is fantastic. Tucking it away for future use.
by brundolf 6y ago
That "Rust Evangelism Strike-Force" logo is fantastic. Tucking it away for future use.
- chrismorgan 6y agoHowever, it shouldn’t be 1.5MB. As a web developer, here are some tips on how this could be improved. It’s being served as an 1832×1465 PNG, but on screen it’s capped to 400×320, so the substantial majority of the pixels are wasted. Reducing it to a 2× image, 800×640, still PNG, drops the size by about 1.1MB. If you wanted to get fancier you could go lossy WebP and easily bring it below 50KB, but you’d probably still want the PNG as a fallback for older browsers (and even recent-but-not-quite-current Safari). At these sizes it’s probably not even worth splitting 1× and 2× into different files with srcset, though you could if you wanted to. The full markup with both of these techniques and four image files would be this: <picture> <source srcset="resf.webp, resf-2x.webp 2x" type="image/webp"> <img src="resf.png" srcset="resf-2x.png 2x" width="400" height="320" alt="“Rust Evangelism Strike Force” logo, in vaporwave aesthetics"> </picture> But the first step is the most important, just shrinking the PNG from its original size to the size that you actually want to use it at. The rest is just sugar coating to make things even better, at a certain cost to you the developer if you haven’t got tooling to automate it.