navbar-logo, which is the one shown in the header. The screenshot shows the style applied to. It's not huge for an image, but we'll see there are ways to improve it. The size of the image, not compressed, is 4,960 bytes. If we inspect it we get this code for the logo: Inspecting the Spotify logo in the header.Ĭhrome Developer Tools doesn't show the whole code for the logo. In the case of the Spotify logo above it is inlined in CSS, setting it as a background-image: SVGs can be inserted on web pages in different ways. In this post I want to explain some improvements that can be applied to the Spotify logo and the way it is served. There are still ways to misuse SVGs or not take advantage of its capabilities. They look crisp on every screen, are usually small in bytes, are compressible, stylable through CSS, scriptable through JS… What's not to like? This vector format is ideal for drawings and icons. Spotify's home page on The logo is shown in the header and the footer. In addition the Spotify circle logo might appear somewhere in the middle. It is usually shown in the header of the page, and also in the footer. If there is something that all Spotify sites have in common, it's the Spotify logo. In this post I am going to explain some issues I found on Spotify's website, where the same SVG is inlined several times and where a responsive SVG logo could save additional network requests.
In a past post I also explained how to optimize a SVG with several tools that remove unneeded code and simplify shapes.Įven if we optimize our SVG assets, we can still make mistakes delivering those to the browser. SVGs also have other useful applications, such as placeholders for lazy loaded images and animations. Scalable Vector Graphics (SVG) are ideal to show logos and drawings on the web due to their small size. Optimizing SVGs is great for performance, but can we go beyond? In this post I will show some common issues with inlined and responsive SVGs applied to a real website.
0 kommentar(er)
