Okay! Look at this triangle.
In a
raster image, which most image formats qualify as--png, bmp, gif, jpeg, etc.--this is basically encoded as a long list of pixels specifying whether each one should be black or transparent
(or something in-between, for the edges). The downside to this approach is that if you want to
resize the image, you get something like this:
The program doing the resizing, in this case your web browser, has no idea what the image is actually supposed to depict. It just knows there are a bunch of pixels in different places, and when trying to draw the image larger, it grabs one of those pixels (or multiple of those pixels, if it's blurring) and uses that. So that's one downside to raster images: they have a finite amount of detail, and when you try to display them at a size larger than their detail, it looks wrong.
Because raster images are essentially just lists of pixels, their filesize is hugely affected by their dimensions. A 32x32 image has far fewer pixels than a 1024x1024 image, for example, so it'll almost always be smaller. Depending on the specific image file format you're using, the complexity of the image will also play a role, but the dimensions will always be a factor.
Vector images (most commonly svg files) don't do any of that. The vector equivalent of that triangle image is basically, instead of a long list of pixels, a statement "there is a shape and it's black and it has three points and they are located here, here, and here." That's it! And each of those point locations would be expressed as a percentage of the image's overall width and height. So when you resize a vector image, it looks like this instead:
Perfectly smooth at any size. Vector image file formats generally let you specify a size the image should be displayed as by default, but really, the images themselves don't exactly
have dimensions, they're just lists of shapes. The filesize of a vector file will depend purely on the number and complexity of those shapes, but won't care in the slightest about dimensions.
So you might think, wow, vector images sound great, they have none of the downsides of raster images, let's use them for everything! Well, for triangles and stuff, sure. But look at this random picture:
It would take forever to reduce this to a list of shapes and their colors. The more textured the image, the more irregular the shapes, etc., the harder it gets to make a vector equivalent, and automatic software solutions remain fallible. So both rasters and vectors persist, because both do different jobs.