Use vector images in place of pixel adjusting?

SVG probably would be the way to go here, but at the time this video was made SVG support may not have been that well. The other reason which would be valid always is that treehouse tries to teach you multiple ways to do the same thing. Basically "legacy" ways to do something in case you find yourself on a project that is doing "legacy" things and for whatever reason it would be a big shift to change from raster to SVG or something.

Todd, it's been a long time since I went through it, but I think I remember it. Yes, more pixels should equal more clarity, assuming the image has enough pixels to support it. iOS retina displays came out with twice as many pixels in an inch of screen as what was standard. This basic effect as far as pixels go was just like if you took your image and doubled it's size. The image had to fill twice as many pixels in the same amount of space on a retina display.

This is why we had to create 2X versions of raster images. Basically doubling it's pixel density in the same amount of space. This would satisfy the extra pixels of the retina display, allowing the image to retain it's intended pixels per inch and stay crisp on retina display.

This is also the problem SVG solves.

Raster images are pixel based. That can't change. At some point, at some scale they begin to "pixelate". This is much more common in print. Many times print needs a resolution of 300 dpi. However, many computer screens are lower resolution, somewhere around 72 ppi so we generally don't see pixelated images as much on the web.

SVG are vector based. It's shapes and lines are drawn by the computer using math. This allows the computer or web browser to scale an SVG or vector images infinitely, without any pixelation or distoration. They are pixel independent. I could take a vector image or logo from a business card, and blow it up to put on the side of a huge skyscraper, and it would retain it's crispness and clarity; not even remotely possible with a raster image.