Website/image opinions wanted

Snader

[size=+1]original post[/size]
So I had an idea, and I made a mockup to test it.

Please take a look at this page and decide which of the three image sets looks best and fill in the poll. If you want to explain in more detail why you chose a set, please do. I'll explain what's going on with the pictures after a few replies, because I don't want to influence your perception.

Thanks in advance!


[size=+1]Update 1[/size]
As some of you have already guessed, I was scaling images.

My idea was to have an image that was 200% the resolution but much stronger compressed to compensate, which should look about the same at regular display size, but look noticably better (less blurry, but more artifacting) on high resolution devices like the iPad and the new Nexus 7 while not costing much more.

Two of the biggest issues with this are the subsampling/resizing causing hard pixel lines to be ugly (3rd image) and to have smooth gradients become somewhat blocky because of compression. Based on this I made another variation that was 150% the regular display size to kind of balance out the negatives and positives of both.

Based on response so far, the gradients being blocky isn't noticed as much as the resizing is.

kaptainkernals

I voted the first, largely as the images (mainly the last image) didn't show much in the way of aliasing, however the other two columns showed it (chrome specific - but it's the best all round method)

I saw what you were trying, so I'll let you mention to others what you're doing.

I'd just like to point out that this method you're trying is very browser dependent.

In chrome, the aliasing is terrible on the far right, however in firefox, there are almost no aliasing issues, i don't have safari, so i can't comment on the way that browser handles this, and IE, IE8 doesn't even display - displays the image as a fine line. (i don't use IE, so i don't even keep it up to date).

It's a pity chrome handles it so badly.

It's only really fine edges / lines that it's most apparent by the way

Link to comparison image to display what i'm talking about:
https://dl.dropboxusercontent.com/u/20917634/Polycount/comparison.jpg

Stinger88

Looks like i'm the first to say the right image looks best.

Seems like the sharpest image to me when you get up close. Especially for the first art image. Although there is some artifacting visible in the other 2 images I prefer sharp images over the blurred ones.

btw, im using chrome

kaptainkernals

Are you on firefox or chrome stinger?

Stinger88

Chrome

kaptainkernals

That's interesting, in my chrome, that right looks worst (last image).

First images aren't that discernible.

Stinger88

Here's a quick comparison of what i'm seeing. These are from screen grabs and I've uploaded using "cubeupload" which apparently doesn't compress the image. The upload looks the same as the image I have locally to me.

The left column is very blurred and the right has more artifacts. The middle is still a bit too blurry for me. I prefer the right image for the first 2 images but the middle one for the last. Overall the right side wins

http://cubeupload.com/im/I4FOz1.png



hope it helps whatever is being tested...

MM

looks like the images on middle and right are down scaled inside the html which is usually not a good idea because of aliasing issues like mentioned by kaptainkernals

in firefox they look sharper because of better image dithering than chrome i think, but still why down scale a larger image in html?

kaptainkernals

Yup, I'm imaging Snader is using firefox, and because of the improved dithering, he gets high quality images that can be displayed full res on high res screens, and display downscaled images on a smaller resolution screen, using media queries.

At least thats what I'm imagining this experiment to be about, I could be completely wrong though.

fatihG_

Im gonna be honest and didn't see any difference.

I voted middle though.. as it looked like the images were tilted a bit, I guess, since I was looking at my monitor from an angle. The ones in the middle looked "most straight" to me.

Now that I understand what was actually being tested. I dont really see much of a difference between the images. I use Firefox.

I also resize images on my portfolio website, for the sake of consistency. Have differently sized images be the same width/height, for example.

On the browsers I did test however, I didn't see any blatant artefacts.
I tested on Firefox, IE, and the default browser on my Samsung Galaxy Note I.

ZacD

2 and 3 have a lot of artifacts on the wireframe shot, so I picked 1. If there's a lot of solid colors PNGS are typically best without being much larger in file size. I would actively have different formats and compression just based off the image content.

Shiniku

I'm using chrome. To me, there's no huge difference in the first two without zooming in (which I'm assuming defeats the purpose of this experiment) but some aliasing artifacts are very visible in the rightmost images on of the picture with the wireframe. I voted left was best.

Snader

kaptainkernals - you're right it's browser dependent, and I hadn't even bothered to check older versions of IE. Oops! The line issue is fairly easily fixed, though, I believe it's because I set image heights to "auto". And I noticed the aliasing (my main browser is Chrome at the moment, previously Opera, never been much of a Firefoxer.)
I'm not using anything as complex as media queries, the idea is to make it a simple solution that solves a problem without requiring special attention. Using a specifically aimed trick tends to make things less futureproof. So I'm going for a more global thing where the browser just displays things however large it is, and the image simply adjusts.

Dustinbrown - I wasn't using a fixed set of settings. The first column was 80% or 90% quality, and the 150% and 200% resolutions were adjusted to be the same filesize in kilobytes.

Stinger - are you using a tablet or a PC zoomed in? And do you often use them as such or merely for testing this?

MM - there's no dithering in any of these images. I think what you mean is bicubic interpolation, or more accurately, a lack thereof. Like kernals said, I want to get highres images on the cheap so things won't be blurry on iPads and such.

bb0x - Our eyes tend to play funny tricks on us sometimes. Someone told me the vignette in some pics is stronger, and someone else said the colors were desaturated, both are things that should only very minorly be influenced by what I'm doing here. So yeah, them looking bent was probably because of your viewing angle.

ZacD - I'm not planning to do everything with the same settings. But I did in this case to get rid of as many variables as possible. The wireframes are indeed the most noticable difference (and not a positive one, either) and I'm looking at ways to solve this. Perhaps by simply having anti-aliased wireframes instead of harsh pixels - but I kind of love how crisp those are.

Shiniku - it depends. How often do you zoom in on a page? If never, then you indeed wouldn't notice the benefits of it with normal usage.