Pixelation widget and dimension

Based on the results of the Level 10 CFU, it seems my students are confusing dimension and sampling. I think part of this is due to the way that the pixelation widget is labeled. When you are choosing the sample size, you adjust the image width and height. So students are thinking that the larger the size of the image, the better digital approximation. Has anyone else run into this issue?

Yes, clarification needs to be added to the sampling versus dimensions and resolution. There is some confusion here.

Hi @johnsonl7169,

Thanks for bringing this up, and thanks to @cchristensen for chiming in!

Yes, code.org loves to hear from teachers about what’s working and what you think can be improved. If anyone else is experiencing a similar issue, or things seemed to work out, or maybe you anticipated this and tried something with your class that you think helped, please add to the discussion!

This is a recently revamped curriculum so we’re anticipating and hoping for feedback from teachers such as you. :slight_smile:


@johnsonl7169 I love this observation - I am replying here publicly so other teachers like @cchristensen can also see my response.

First, if your students are taking the AP test, students need to know the following about sampling:

  • Analog data can be closely approximated digitally using a sampling technique, which means measuring values of the analog signal at regular intervals called samples. The samples are measured to figure out the exact bits required to store each sample. (DAT-1.A.10)

Also, it is important for students to know the difference between analog and digital information. For the AP test, they will need to know the following:

  • Analog data have values that change smoothly, rather than in discrete intervals, over time. Some examples of analog data include pitch and volume of music, colors of a painting, or position of a sprinter during a race. (DAT-1.A.8)

  • The use of digital data to approximate real-world analog data is an example of abstraction. (DAT-1.A.9)

That being said, we know that those “Essential Knowledge statements” are more meaningful when connected to experiences which is what this lesson is doing. So, for the widget and the question you asked, there is some deeper learning that you could go into. I have outlined this below.

  • I below is an image that visually shows how taking more samples might effect the final digital image.

  • Essentially, taking more samples does increase the number of pixels in the image - it increases the resolution. You can learn more about the resolution of a computer screen in this video (https://www.youtube.com/watch?v=15aqFQQVBWU). Note that this is different than the resolution of an image, but it might help make sense of how pixels are connected to what is displayed in a digital image.
  • It is important to know that the size of the FILE will increase with more samples because you are storing more information in that picture file (you have more pixels, so you have more bits to store).
  • If you have students who are well-versed in photoshop (or maybe you are yourself), you have seen this issue of resolution and sampling come up when you re-size an image. I won’t get into it here, but it is interesting to play around with resampling and resizing images on photoshop to see how those different levers impact one another and the image quality.
  • Bigger pictures do not always have better resolution. In fact two pictures of the same physical size can have different number of pixels stored in the picture file. You can see an example below on how resolution of a picture effects the result of an image. This is the same image at 72‑pixels per square inch (ppi) and at 300‑ppi; inset zoom 200%. The one on the right has more pixels per square inch and is a crisper picture, although the physical size of the two images displayed on the screen is the same. Source: https://helpx.adobe.com/photoshop/using/image-size-resolution.html)

I hope that helps!

Hi Katie,

Thank you for sending these resources. My concern is more with the wording on the widget itself. I’ve included a screen shot. Using “Image width” and “Image height” equates the terms width and height with pixels. Increasing image width and image height in the widget actually increases the number of pixels, not the width and height of the image itself.


… hm. Ok, now I’m wrestling with this in my own head haha.

I’m starting to see how this can get confusing.

When we increase the image width and height, we are increasing the width and height of the image itself - this is evidenced by viewing the “Actual size” of the image. The scaled version helps us see the detail, but by scaling, obscures the concept of what’s actually happening.

To add more confusion, the scaled version in a way actually better illustrates the concept of sampling… but I’m not sure, because I’m uncertain about some assumptions I’m making. Is “sampling” in this case actually referring to… pixel density? We can have two images of the same thing, with same dimensions, but one can be “high-res”, the other can be “low-res”. This can kind-of be illustrated with the scaled display of the image, but as stated previously, that’s actually a false representation of the image in a way.

Sorry, not much help at the moment. I’ll have to keep thinking about how I would clarify this to students…


I’m going to backtrack some of what I said, now that I’ve read over the comments again.

I think @johnsonl7169, you’re right, the image width/height of a physical picture does not necessarily correlate with the dimensions in pixels. I think the confusion brought up by @johnsonl7169 and @cchristensen are exactly what have been confusing me throughout the conversation lol. And also the complexity that students need to understand and do not seem to be clearly identified in the tool.

So there’s several concepts involved here:

  1. Image dimension in pixels - Resolution? (“digital dimensions”?)
  2. Physical image dimension (ex: inches, when printed on paper)
  3. Samples - Number of digital “units” used to represent an analog piece of content - in this case, this number is equal to the total number of pixels in the image… right?

So the problem (as I interpret it), is that the tool shows #1 and #3 visually, but has a section with labels and inputs for #1 that can easily be misinterpreted/misconstrued/conflated with #1 or #2. Meanwhile, #2 is never explicitly mentioned in the tool, yet is a crucial concept in understanding this whole thing. I suppose #2 can be inferred by scaling up the resolution and comparing images of same physical dimension (using the scaled image) but different resolutions - I think that’s the original intent in the lesson ha. Maybe it can made more explicit somehow if it’s such an integral concept?

Seems like it may help to more explicitly label the dimension input (perhaps “Image width (in pixels)” or something). And/or be more explicit about mentioning “physical dimensions” as relevant in parts of the lesson and activity guide.

Or maybe it’s a needlessly uphill battle teaching how digital storage works almost at the same time as how it’s translated between analog. :thinking:

Thank you for all the thoughtful comments here! However, I am still a little confused regarding the lossy compression widget on Lesson 10 and what “SAMPLE SIZE” on the widget is referring to?

As you’ve mentioned, the more samples the better the resolution, however, in the widget the higher the sample size, the worst the resolution is. Please clarify, I may be misunderstanding here.

I have not taught this lesson yet so I had to think about this one for a while. If the sample size is 2 then I’m taking every other pixel in the row but also taking every other row. The result should be that the final size is the original size / sample size squared (give or take a few pixels). Does that help?

Yeah that makes sense. Even though it isn’t a perfect calculation it does work. I also thought of it as the “square size” in a sense, so a Sample size of 1, it’s a 1x1 square, with 2, it’s a 2x2 square.

Although, I really don’t like the use of the word “Sample” here as it confuses the students with what we did during the b&w images lesson where the more squares they had, the more they had to sample.