Pixelated web image issues on 15" rMBP?

[SRatha]

Hi guys,
I have an LG display here on my 15" rMBP
I recently noticed a bad pixelation problem on mine.
Before it was fine with crystal clear images from the web etc.

http://seriouswheels.com/2010/bc/2010-Brabus-Mercedes-Benz-G-V12-S-Fog-Lights-1024x768.htm

for example this picture on rMPB looks disgusting on mine.

However I am fine with the pictures I have already downloaded from before, they are super crystal clear.

Is there any suggestions? should I return mine? I got mine about 3 months ago I think.

Ratha

 

[andy9l]

That's an extremely small image, only 1024x768 compared to your 2880x1800.

The image is not being used as 2x resolution, either. The code for that website is simply outputting a 1024x768 image (see below):

<img border="0" src="../../pics-2010/bc/2010-Brabus-Mercedes-Benz-G-V12-S-Fog-Lights-1024x768.jpg" width="1024" height="768">

If it was this code:

<img border="0" src="../../pics-2010/bc/2010-Brabus-Mercedes-Benz-G-V12-S-Fog-Lights-1024x768.jpg" width="512" height="384">

It would be smaller, but retina sharpness.

Most of the current imagery on the web will look quite poor on any high PPI display - Apple or not. You don't seem to understand this. You have no grounds upon which you can return it, you bought something that's arguably somewhat ahead of its time.

 

[cbs20]

That's an extremely small image, only 1024x768 compared to your 2880x1800.

The image is not being used as 2x resolution, either. The code for that website is simply outputting a 1024x768 image (see below):



If it was this code:



It would be smaller, but retina sharpness.

Most of the current imagery on the web will look quite poor on any high PPI display - Apple or not. You don't seem to understand this. You have no grounds upon which you can return it, you bought something that's arguably somewhat ahead of its time.

What andy9 is trying to say is not all websites have been optimized for the retina display. That comes down to the web developer of each individual website. Nothing is wrong with your computer the website isn't retina ready.

 

[NMF]

Yeah, your computer is fine. The website in question simply hasn't been updated to support retina displays. It's "stretching" the image to 2X it's actual size in order to fit correctly on your screen.

First gen blues! It never pays to be an early adopter.

 

[SRatha]

OK guys, there is something wrong. I am not sure what it is. not this retina ready crap, but an actually problem.

I have this picture as my wallpaper - this is the same size and file

http://seriouswheels.com/2010/bc/2010-Brabus-Mercedes-Benz-G-V12-S-Front-Angle-2-1920x1440.htm

This picture was downloaded 2 months ago which the image was clear.

When I download this exact picture today, there is a noticeable difference in sharpness. Not much, but enough to ask yourself why the heck did I buy this rMBP for? my school windows desktop display has more details.

Andy is right, I don't understand this very much, but I want to ask the question is why all of the sudden my screen loses sharpness?

 

[andy9l]

There is not a problem.

That image is NOT large enough to be seen clearly on a retina display, unless you're looking at it in a window that is half the size of that image. In the case of your laptop, that would not be full screen.

Think of it like this:

Your laptop has a resolution of 2880x1800. That picture is 1920x1440. That means that the image is short of 2,419,200 (~2.5 million) pixels. If the original image was 2880x1800...you'd see an extremely sharp image on your retina display.

In the case of this particular website, the website is outputting the image to the page in its original size. It's not being crunched down by a factor of two. The lack of resizing means that every pixel in the image is becoming 4 pixels on your retina screen, and it looks shoddy. If it were being scaled down, the 1920x1440 image would become 960x720 in "retina quality" (which would equate to about 2/3 of your screen).

It's a non-retina-ready website, with non-retina-ready images. Your laptop is cutting-edge with regards to pixel density. You, along with anyone else with a "retina" screen, are going to have this "poor quality" web imagery problem for a few years to come. Website designs simply haven't caught up yet - it'll take years.

I'm a web developer. Trust me. Your rMBP display is absolutely fine. The web, however, is lagging behind.

 

[SRatha]

Andy,
bear with me here...
another example, let me know if this is ok?

http://www.wallpapersdesign.net/wallpapers/2012/10/Bugatti-Veyron-Sports-1800x2880.jpg


I have made an attachment of how it looks from where I am.

 

[andy9l]

Once again, the image is not wide enough for your screen. Regardless, that image looks just as terrible on my non-retina 2009 MacBook Pro.

That particular example was a poor quality picture to start with - retina can't help that

Edit: As an example, try setting this as your desktop background: a very random background image. That should be sharp.

 

[SRatha]

Andy,
I am truly lost for words, that is indeed a sharp image. and I am truly lost for words how bad the rMBP performs for other images...
Thanks!

 

[mykem]

Andy,
I am truly lost for words, that is indeed a sharp image. and I am truly lost for words how bad the rMBP performs for other images...
Thanks!

It's not about sharp or not sharp- it's about resolution. The last image you showed hardly fit the screen of an iPhone 5 (1136 x 640) and it was full of compression artifact.

Here's an example of 2880 x 1800p image: http://img3.themebin.com/retina-display/pluvia-2880x1800.jpg

 

[Stetrain]

Andy,
bear with me here...
another example, let me know if this is ok?

http://www.wallpapersdesign.net/wallpapers/2012/10/Bugatti-Veyron-Sports-1800x2880.jpg


I have made an attachment of how it looks from where I am.

Looking at your linked image on my (non-retina) screen, it has clearly been resized from a smaller resolution up to 2880x1800. There are jagged edges and signs of image compression.

I think what you're seeing is how low quality of a lot of web images really are. Low resolution and high compression are common in web images to make pages load faster and reduce bandwidth costs.

 

[Ploki]

Andy,
I am truly lost for words, that is indeed a sharp image. and I am truly lost for words how bad the rMBP performs for other images...
Thanks!

http://www.mad4wheels.com/webpics/h..._Bugatti_Veyron_16.4_Super_Sport_005_6209.jpg
http://www.mad4wheels.com/webpics/h..._Bugatti_Veyron_16.4_Super_Sport_015_0571.jpg

here you go.


all the pictures you linked are bad. The last one was 2880*1800 upscaled from something. It's not a "retina problem" its an image problem. Your retina is fine.

Also, it doesnt perform bad. Bad images just look bad compared to native retina stuff going on on the screen.

 

[NT1440]

Andy,
I am truly lost for words, that is indeed a sharp image. and I am truly lost for words how bad the rMBP performs for other images...
Thanks!

Those have NOTHING to do with your computer as many here have tried to explain to you. This isn't performance, it's you not understanding a thing about resolution.

 

[SRatha]

I think I might have found the culprit. I am using my tethered hotspot from my iPhone on a mobile network. Somehow that is making the resolution looks very pixelated. now using my ipad tethering (with different network provider) seems to be better now...

thanks guys! its back to what it used to be now...

I don't know how it could effect the resolution but it does...

 

[andy9l]

Tethering doesn't affect resolution, but it does affect image quality through image compression. Another thing entirely. It's usually dealt with by your network provider, so not much you can do about it.

I don't think you're understanding this, so what you should take from this thread is that your retina screen is fine, but you need some pretty damn big images to utilise its potential. That's true for any retina screen.

The logo on this forum is a good example. Look at it now, then look at it via this link. It's bigger on that link, right? Bigger and lower quality on your display. The HTML code on this forum defines that the "big" version should be squeezed into a container exactly half its width and height.

The resolution of the logo file is 500x142. The size of the container is 250x71. Your MacBook has 500x142 pixels per 250x71 that we have. That means the full sized image can be displayed in extremely crisp quality on your display. For the rest of us, the image is scaled by the browser.

It's hard to explain. Basically 500x500 for us = 250x250 for you, but only for imagery.

 

[SRatha]

I gotta admit these technical words are kinda confusing but I am lucky I don't work in this field. I am just happy to have known the reason now..

But thanks Andy, I will try to think about your post above when I have time.

 

[Ploki]

I gotta admit these technical words are kinda confusing but I am lucky I don't work in this field. I am just happy to have known the reason now..

But thanks Andy, I will try to think about your post above when I have time.

Computer graphics: You have vector graphics, and you have bitmap graphics.

Vector graphics can be scaled indefinitely, and among many the ones you are probably most familiar with are fonts. You can also have image vectors. They don't have pixels, but are rather "rendered" on the spot with an "instruction set", meaning you always get sharp edges.

Bitmap graphics use pixels, among many the ones you are probably most familiar with are photos. Each little dot has a color value. On the old 15" MBP, to fully fill the pixels on your screen, you need a 1440*900 image, or around 1,2 million pixels.

On the Retina MBP, to fully fill the pixels on your screen, you need at least a 2880*1800 image, or around 5,1 million pixels. Thats 5x more pixels, meaning 5x more size as well. That's why most of pictures still aren't ready for retina mac. It takes a fast connection to load them, you need more server space, better server speed and more monthly transfer etc etc.