SVG vs PNG images: Which are best for your website?

Do you have a lot of images on your website? Here's how to choose between SVG and PNG image types for the greatest effect.

Get started growing your business with a B12 website.

No credit card required
SVG vs PNG images: Which are best for your website?

Resources

Transcript: I'm gonna go over how what the differences are between working with an SVG file in Cricut design space versus working with a PNG file in Cricut design space is there are some big differences so we're gonna go over that because the files that I sell in my Etsy shop include both of those formats so I want to make sure that everyone knows exactly what the capabilities are of each one of those formats so we're gonna go ahead and get started I have a file here that is a zipped file this is how old when you when you purchase an SVG from Etsy shop Tamara s designs your download will be a zip file what you'll need to do once you get that zip file downloaded is you'll need to put it on your desktop so you'll take it out of your downloads folder and move it onto your desktop you'll then right click hit extract all and click extract that's going to put a separate folder on your desktop that is not zipped up so when you see that you can go ahead and delete... See more →

Transcript: In this video I'm gonna explain about different formats of images before I jump into the topic I request you to subscribe to my channel and click the bell icon so that you won't miss any of our future updates first one we have is jpg or jpg joint photographic experts group this term may sound alien to you you just don't need to remember this term jpg is a 24-bit image format which is a lossy image compression thus leading to smaller image file sizes because JPEG is a saucy image compression every time you walk on any jpg image and save it you will lose the quality and size of the image itself so obviously for a period of time that image becomes useless so when you are working with JPEGs I strongly recommend you to save original copy in some other location JPEG supports millions of colors so it is ideal for general uses and pics that have different colors number 2 PNG portable network graphics it is also a 24-bit image format but it is lossless image compression leading to large file sizes and also PNG support transparency I mean if... See more →

Transcript: In this video I'm going to show you the difference between the PNG image and a vector-based image so what's the primary difference first of all the vector-based image is completely editable and is not affected with the high resolution but in contrary to that the PNG gets blurry as you go beyond the sizes for example if you need a image for print printing purpose you won't be needing a PNG you need a vector file for that so that's why we created every design vector based and people on fiber and all all around the world pay a lot for these vector images so let's go ahead and I'm going to show you how to differentiate it let's import two images I have over here first of all this image over here and this time a jewelry Just Cause fine decrease the size okay so these port images are here on the canvas what's the difference right side we have a vector image and on the left side we have a PNG image we can't do stuff to this PNG image it's not editable it's not built with parts it's just a pixel based camera... See more →

Transcript: We are gonna talk about the difference between the SVG and a PNG file I get most of my SVG and P and file PNG files from Etsy or either well web sites at the seller sell online the first thing I don't talk about ever see a little bit it see I'm open to my EDC and then basically when you look at when you when you purchase files from them make sure you have an eps account and then you go into um if you purchase them you go to you basically you purchase the images from a seller I'm not gonna go through all that you can figure it you know try to go and obscene just look around and see the different people that sells different files but as you do purchase it you pay for it and then you I'm they sent it to you your if your FC account so you go to you right here... See more →

Key quotes:

  • "Unlike raster formats such as JPG, GIF, and PNG, an SVG image stay crisp and clear at any resolution or size"
  • "SVG is much lighter than raster formats, which positively affects the performance of the site"
  • "SVG is the preferred format for images like user interface controls, logos, icon and vector-based illustrations"
  • "With SVG you can make three types of graphic objects: — Vectorial geometric elements like paths with their straight, curves and area between them"
  • "— Images — Text There are two ways to create SVG file: — In graphic editor such us illustrator (paid app) or Inscape (free app)"
  • "Image taken from webdesign.tutsplus Here you can find a list of SVG tags for draw objects in code editor"
  • "One of the greatest things about SVG (aside from their being infinitely scalable without quality loss) is that once you know the fundamentals you can hand-code simple shapes quite easily, without needing to open a graphics application"
  • "In spite of few disadvantages, SVG is a great image format for websites, and if you still don’t use it, you need to do it right now because it will not only improve your site performance, but it will also make your life easier."
    Read more →

Key quotes:

  • "The SVG graphic format was developed to be used to represent an image and its elements, which may include objects, drawings, and figures in XML"
  • "SVG image element files are smaller than if the image were present in a raster format"
  • "However, when using SVG, you need to remember that if an object in the image contains many small elements, the size of the file can grow very fast"
  • "Developed by Adobe, PDF is a file format that can be used to provide an electronic image of text or text and graphic that looks the same as a printed document"
  • "With a JPG, the graphic is compressed to make the file small"
  • "The PNG format offers a better quality graphic than a GIF with better compression and a wider range of color without loss of detail"
  • "PNG is used almost exclusively for images used on websites"
  • "Because of the size of a PNG file, this format is not recommended for photos as JPG is unless file size is not an issue"
  • "This makes the PNG format suitable for web images like logos that you want to include transparency and fading effects too."
    Read more →

Key quotes:

  • "An image can be described in terms of vector graphic orraster graphic An image stored in raster form is sometimes called a bitmap"
  • "Here are some advantages and disadvantage of JPEG, PNG, GIF, and SVG"
  • "JPEG is a graphic image file produced according to a standard from the Joint Photographic Experts Group, an ISO/IEC group of experts that develops and maintains standards for a suite of compresion algorthms for computer image files"
  • "PNG Potable network graphics is a raster graphic file format that support lossless data compresion"
  • "PNG was most effective than JPEG for web element"
  • "GIF GIF images are compressed using the Lempel–Ziv–Welch (LZW) lossless data compression technique to reduce the file size without degrading the visual quality"
  • "GIF file describes a fixed-sized graphical area (the “logical screen”) populated with zero or more “images”"
  • "SVG Scalable Vector Graphics (SVG) is the description of an image as an application of the Extensible Markup Language (XML)"
  • "Any program such as a Web browser that recognizes XML can display the image using the information provided in the SVG format"
  • "Advantages : Disadvantages : There is nothing better or worse between jpg, png, gif, or svg"
  • "All files depending on the file function if need for icon use svg or png."
    Read more →

Key quotes:

  • "Here are a few questions to ask yourself that may help you plot a basic map of one tiny corner of the image room — whether to use PNG, JPG or SVG image formats"
  • "JPGs can contain millions of colours and have much smaller file sizes, but are best for photos where there are no crisp lines or text"
  • "For pictures with crisp lines or text (e.g"
  • "a graph), stick with PNG and compromise on the number of colours you use"
  • "JPGs are lossy meaning they lose quality when compressed or saved, plus they are raster-based meaning they don’t scale well"
  • "SVGs are vector-based and scale incredibly well, remaining sharp at any size, but aren’t suited to photos or more complex graphics"
  • "JPG — lossy and raster-based, use for photos and images with loads of colours where crisp lines aren’t absolutely essential"
  • "PNG — lossless and raster-based, use for images that need crisp lines or text (but do not need to scale), need transparency, have few colours"
  • "There are PNG8, 24 and 32 — research the best to use for your specific case (see this great article) SVG — vector-based, use for flat line drawings, icons, logos that’ll scale to any size while file size remains small."
    Read more →

Key quotes:

  • "It would'nt be fair to use 'object' or other tags that allow our SVG to reference external CSS and fonts to save file size, where PNG images cannot do so"
  • "After passing through SVG optimizers, Nano offers the lowest file size at 2.72KB for savings of 42.7%"
  • "After optimization, again Nano has the smallest file size at 82.7KB, while still bigger than PNG @1x, one could argue that a single SVG image renders beautifully on all resolution, while PNG would require 3 files, @1x, @2x and @3x to cover the same, resulting in a more complicated workflow and penalizing users with high resolution"
  • "If you have not turned on transfer encoding on your servers, then you should, because even for a complex SVG, the file size and bandwidth savings are substantial when using SVG compared to using PNG, in addition to a reduction in workflow complexity"
  • "What this means is that you can have a single SVG file that will render beautifully on all resolutions, without resorting to multiple PNG and a complicated workflow, and still have a file size that is arguably smaller than equivalent PNG size, saving substantial bandwidth and resulting in speedy loading of your images."
    Read more →

What customers & experts say

Jia Junaid
Jia Junaid Founder and Attorney

“I love that B12 prompts me to update certain features and add integrations like online scheduling to increase efficiency in my law firm. ”

Brian Bohley
Brian Bohley Founder and Accountant

“B12 was easily able to include several integrations, such as Calendly and Drift, that facilitate communication with my clients. The experience was seamless, unlike my previous website design experience.”

Ron Matten
Ron Matten Founder and Attorney

“I feel like they are part of my team”

Leroy Maxwell, Jr.
Leroy Maxwell, Jr. Founder and Attorney

“I would recommend B12 to any company that wants a team to manage and grow their website while they focus on growing the business. ”

Jill Burgess
Jill Burgess Mortgage lender

“ B12 provides the best ROI for a small business owner.”

Brett Packard
Brett Packard Operations

“We finally have a website we’re proud of”

The best way to grow your business online

B12 is an all-in-one platform for business owners. Manage every facet of your company online, including your website, SEO, online scheduling, email marketing, blog posts, invoices, and more.

Get a website in minutes
This website uses cookies to ensure you get the best browsing experience.  Learn more
I agree