Spotify SVG (version 2) by José Manuel Pérez CodePen. I created a codepen so you can switch between the 2 versions and see it more clearly. The resulting image is visually almost identical to the original one. I managed to get the logo down to 1,859 bytes, or 62,7% reduction from the original image. You can read more about it on a post I wrote. I spent some time optimizing the Spotify logo following Andreas' tips. If you are interested in this topic, I recommend you to read this series of posts by Andreas Larsen: Same thing with the position of the points in the paths. For example, instead of having a viewbox of 566.93 x 170.04 we could convert it to 567 x 170. We can achieve further improvements by simplifying paths and rounding the numbers. That is 4,383 bytes, amounting to 11,6% savings respect the original image. Passing the image through the tool, keeping the same shape precision, gives us this code: Optimizing SVGs by hand can be tricky, but fortunately there are tools like SVGOMG that will make these and more changes for us. If you take a close look at the SVG code for the Spotify logo you will see an id and style that are not needed. Stylesheets are part of the critical path, so any savings here means that the page will render faster. navbar-logo CSS rule, which is not being applied to this specific page.Įven though gzip helps with the size of the CSS, a better way would be to include it just once in a CSS class that can be reused as needed. If that wasn't enough, it is inlined a third time in the. Inspecting the Spotify logo in the footer. The same logo is inlined a second time for the footer, applied to the. 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |