When Phil wanted to inspire kids to indulge in the world of science and technology, he looked no further than to pique their interests with colorful stories in his online magazine at stargaze.science.
SVGs was his go-to for illustrating these stories. Drawing his content in Adobe Illustrator, things seem fine and it was smooth sailing.
That is, until he uploaded them to his website.
Brusnika is one of the largest housing developers in Russia, building and selling over 5,000 apartments for Russian families annually. They redefined how low cost housing should look like, by introducing architectural and urban innovations that used to be found only in elite housing projects in central Moscow.
The team embarks on a journey of changing people's lives for the better by offering quality accommodation at affordable pricing. By prioritizing on quality, the rest - innovations and reliability falls into place.
Staying lean while upholding quality, Brusnika transforms the way houses are sold conventionally by showcasing houses and floor plans on their website, to give their prospects a better idea of the houses before purchasing.
According to Google, your page should load within 3 seconds, otherwise 53% of mobile visitors would abandon your page. If it takes 6 seconds, the probability of bounce increases to 106%. In short, your website's performance has a direct correlation to your revenue.
Depending on who you ask, images constitute 68% of an average website, if there is such a thing as an average website. In terms of performance and speed, optimising images is the lowest hanging fruit, and it makes sense for this post to focus on optimising images.
Serving an image in three sizes using
SRCSET has generally been accepted as the norm, but since our website and blog contains mainly illustrations, meaning most of our images can be replaced with vector-based images using SVG, the big question is, can SVG improve page load time, and if so, by what margin?
There are a multitude of ways to embed SVG, each of them fraught with gotchas and compromises. In our quest to make SVG easier to use, we looked at different approaches and this is the story on why we build Nano.
When we produce a PNG image, we use an
<img> tag or a css background, and that's about it. It is dead simple and guaranteed to work.
Unfortunately, the same cannot be said for SVG, despite it's many advantages. Although you're spoilt for choice when using SVG in HTML, it really boils down to
<img>, all with serious gotchas and trade offs , see The best way to embed SVG on HTML (2020).
Wanted to know how Nano compresses SVG? Of course you do, so let's have a look at the long list of techniques we used to compress your SVG.
Please do note that these techniques are not exhaustive, and we will further improve nano with more techniques to ensure even smaller sizes.
The entire SVG will be scanned for used text elements. If none is used, no fonts will be embedded. If text are used, only used fonts are embedded, to ensure smallest of file size.