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

iOS

Posted by Tristan Duncan
Tristan Duncan
1,266 Points

Retina images are not twice the size, they are just twice the dimensions.

Hey everybody. just joined today, I'm a Designer learning some iOS skills.

I'm loving Treehouse so far, lessons are so easy to follow along.

BUT something irked me in the part about Retina Displays. Images for Retina displays ARE NOT twice the size, they are four times the size. They are technically twice the pixel dimensions, but definitely not twice the size.

As a designer the incorrect use of the terminology bugged me, sorry. And I got the answer wrong on the quiz because of it o_O

Just having a quick whinge, still bitter about tarnishing my score with one wrong answer :) All done now.

Like I said absolutely loving everything else about treehouse so far.

Cheers!

5 Answers

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

"Size" is in reference to the "size of the asset" in pixels, not the "file size of the asset" . Apple references this as @2x. I understand where you are coming from, but it all depends how you define size.

If I asked "What's the size of that .png?" some people would give me the file size and some would give me the size in pixels.

When I'm designing, I look at how Photoshop even defines "Size":

@2x

"ARE NOT twice the size, they are four times the size."

This is false because you can use a completely different asset entirely. Some of the file sizes of my @2x assets were less than the regular sized assets. This is similar to Android how you can specify different assets, but the image doesn't have to be the same at all.

Here is the example where my asset was "twice the size" in pixels but the "file size" was a lot less.

Tristan Duncan
Tristan Duncan
1,266 Points

You are right, it is down to the way I interpret size. I know Photoshop calls that size aswell, which also bugs me hahaha.

I have always interpreted size as the area, when comparing sizes of things. I don't know if it stemmed from my background in the Signwriting/print industry, or just what was drilled into me by maths teachers.

I've always called the width and height either exactly that (width and height) or dimensions.

So when I say Retina images are actually four times the size, I mean size as in area. Like this:

retina image sizing

So sorry for the confusion, it seems I am the one who needs to adapt to the terminology used in the dev sphere :)

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

Every sphere has it's own terminology. You're not alone!

Thomas Anthony
seal-mask
.a{fill-rule:evenodd;}techdegree
Thomas Anthony
iOS Development Techdegree Student 22,352 Points
Thomas Anthony
.a{fill-rule:evenodd;}techdegree
Thomas Anthony
iOS Development Techdegree Student 22,352 Points

Welcome to Treehouse Tristan.

I am going to assume that you are interpreting the meaning of 'size' to be the size of the image on disk and not the dimensions of the image. As Ernest Grzybowski pointed out, 'size' is a reference to the dimensions of the image in terms of its width and height in the context of 2D graphics as opposed to 'file size' or 'image size' being the size of the image on disk. Ernest does a good job of explaining this in his response; I simply wanted to throw in my two cents just to clear up some confusion.

Images that are scaled for the Retina display on the iPhone are twice the width and height of the same image for non-Retina displays. By extension, images scaled for Retina displays on the iPhone are four times the pixel density because the LCD display contains four times the pixels per square inch. I can see that you are thinking along these lines; the confusion stems from the terminology we use. Dimension and size essential describe the amount of pixels in which the image will be displayed on screen expressed in width and height. Pixel density, resolution and ppi (pixels per inch) refers to the relationship of the pixels within a given dimension. The image file size, on the other hand, is the amount of pixel data contained within the image file expressed in some unit of data (bytes, kilobytes, etc). This number does not necessarily describe the size of the image directly as the number is different across several formats due to different image data compression algorithms and such. You may have an image that is four times the image file size when doubled in size within the same format, but depending on the quality of the image, color depth and other factors this number can be different as Ernest pointed out.

Tristan Duncan
Tristan Duncan
1,266 Points

Hi Thomas,

Thanks for the reply, you are right I was getting the terminology wrong and referring to size as the area the pixels cover.

As explained in my reply to Ernest, the confusion stems from me being an old school designer, starting in print, then in signwriting, then into digital. I still occasionally refer to the filesize as "weight" as did some of the old school developers I worked with :)

Tristan Duncan
Tristan Duncan
1,266 Points
Tristan Duncan
Tristan Duncan
1,266 Points

Thanks everyone for the replies, it's very friendly and professional in here :) A welcome change to other forums.

It seems I just need to get used to "size" terminology.

Just as I had to get used to devs talking about point sizes in CSS (fellow print designers will feel my pain there)

Thanks for putting up with my whinging!

Cheers

Thomas Brushel
Thomas Brushel
11,713 Points
Thomas Brushel
Thomas Brushel
11,713 Points

Lots of good points stated

Bryan Zavestoski
Bryan Zavestoski
12,475 Points
Bryan Zavestoski
Bryan Zavestoski
12,475 Points

I noticed this too and think that it is a really great point. As images are often the largest part of a site already, multiplying them 4x can have a real impact on performance.

However, there are some great things you can do to manage image quality and still have retina images. One technique is to make the image large and set the quality very low. You can read more about this here. Scott Jehl's Picturefill is a good way of only serving images on the device that you need them on, without having to use background images in media queries. Until there is something in the HTML spec that does this, Picturefill is a great alternative.

Tristan Duncan
Tristan Duncan
1,266 Points

Hey Bryan,

Thanks for the reply but I was actually talking about the pixel area, not the filesize.

But you are right with the techniques for reducing retina image filesizes. Because the Retina displays are so dense, they actually hide alot of the cruddy artifacts you get from compressing images.

So you can actually save most retina images with a much greater level of compression, and get the filesize down to the same - and sometimes even less - than the original non-retina image.

Bryan Zavestoski
Bryan Zavestoski
12,475 Points
Bryan Zavestoski
Bryan Zavestoski
12,475 Points

Sure, I just meant that with everything else held constant, 4x the amount of pixels is going to be roughly 4x the file size.

The point I was trying to make is that regardless of how we define 'size', it is closely linked to performance, and balancing 'size'/performance with image quality is really the main concern when it comes to building retina-ready sites. Terminology can be a funny thing, but I think we're all just trying to build the best websites we can, given the constraints.