Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages Media Queries Device-Specific Media Queries: Part 2

Todd Squitieri
Todd Squitieri
8,001 Points

Use vector images in place of pixel adjusting?

I'm not sure I understand this particular lesson. The problem, as I understand it, is that images (in this lesson, "Mike the Frog") often appear too grainy in larger resolutions. Is this correct?

If this is correct, couldn't you just make your own vector image to solve this problem rather than to futz with dpis? O_O

Also, I'm not sure what Guil refers to when he speaks of "red eye."

Any clarity would be awesome.

Thanks so much,

Todd

6 Answers

Kevin Korte
Kevin Korte
28,149 Points

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.

Scott Easter
Scott Easter
7,148 Points

I believe the issues wasn't with larger displays, but it is the fact that it is a smaller screen (like an iPhone) with more pixels, and so everything from "Mike the Frog" is doubled, slightly distorting the image.

I don't really know much about vector images, but from what I've read I believe it would work, but perhaps Guil is trying to show:

  1. What he believes is best?
  2. What he believes is easiest for this level?

I'd have to rewatch the video to hear about the "red eye", so I won't comment on that.

Todd Squitieri
Todd Squitieri
8,001 Points

It seems counter-intuitive to me. Shouldn't more pixels = more clarity (assuming clarity is what's at issue here) ? Is this a raster issue?

I think I'm distorting the issue here (haha). I'm sure it's a lot simpler than I'm making it out to be.

Thanks for the reply!

Todd

Todd Squitieri
Todd Squitieri
8,001 Points

Very clear, Kevin. Thank you so much for clarifying. And yes, for the record, I meant to type "retina," rather than "red eye."

Anyway, thanks again for this information. I really appreciate it.

Sincerely,

Todd

Kevin Korte
Kevin Korte
28,149 Points

You're welcome. Glad it made some sense to you. It's a big world to untangle, been there myself.

Mauricio Zambrano
Mauricio Zambrano
14,849 Points

Yo can use your svg as a font, so could be a better way to use them

Todd Squitieri
Todd Squitieri
8,001 Points

It's funny you mentioned that because I was totally thinking of going in that direction for my next project. After taking that web typography course, fonts are all I ever think about these days (at least in terms of graphics).

Thanks so much for the feedback!