DEV Community

Raghavendra
Raghavendra

Posted on

PNG vs SVG for Logos and Icons

In most of the applications, Icons will appear after a delay of 1 to 2 seconds. This is bad for the User Experience. There are multiple ways to improve the performance of icon rendering.
The streategies are

  • Using CDN
    • Reduces the network latency in fetching the image. Still there can be a latency for first load or less frequently used images
  • Using Sprite and CSS
    • All icons are loaded in one image so there will be a delay till the sprite image is loaded for the first time
  • SVG embedded into HTML
    • SVG can be embedded into HTML. This eliminates the extra fetch for the image.
    • In many cases the size of the SVG is smaller comparable to other image formats
    • The latency issue is still persist if SVG is loaded as a separate image file

Here is the example I tried to load the Logos and icons in different formats. Embedded SVG is loaded as part of HTML while the other formats loads after a delay.

Example of SVG Image Performance

The source code is at https://github.com/sodaru/icon-performance-demo

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay