Image Appearance Variation across Desktop Viewers and Websites

I’ve been taking photographs, editing them on my laptop and posting them to several websites for a while now, and I’ve noticed that there are variations in the appearance of an image, mostly richness, sharpness and grains, among some common methods of viewing. These may be different image viewers on your computer, setting the image as your wallpaper, or different websites where you post the image. The differences may be subtle (if they were not, it would be a really big deal that wouldn’t persist till now), but to photographers, graphic designers and in general to people whose work or passion is to deal with images, I deem these are still big differences that may often cause problems. I do not know what causes these differences, but only wish to demonstrate them so that in case such subtle differences matter to you as they do to me, you will not waste frustrated hours trying to track down the problem to where it does not lie, such as your photography, editing or design.

So here’s a series of screenshots of the same photograph that I’ve taken, across various viewing methods, showing the variation. I have ordered them so that similar-looking appearances are clumped together. Within brackets are my ratings for how well I think they reproduced the image.

1. Photoshop (10/10)

PS

In my experience, the best reproduction. Colours are rich and the image appears sharp and without any additional noise.

6. Windows Photo Viewer (10/10)

Windows Photo Viewer

This is the default image viewer in Windows 7 that I use. Pretty much the same as PS. No complaints.

2. Windows Explorer Preview (9/10)

By that, I mean the large image preview that you get in Explorer in Win 7. Here’s a screenshot to explain what I mean:

Windows Preview

The image itself looked like this:

Windows Preview 1

Notice immediately that the image is slightly duller and not as sharp as PS or Windows Photo Viewer. In its defence though, this is not even an image viewer we are talking about, and to me this is good enough for a quick preview.

2. Facebook (9/10)

facebook

This is more or less similar, perhaps a tad duller.

3. Flickr (9/10)

flickr

Almost the same as Flickr. The sharpness is returning though.

5.Picasa (6/10)

Picasa

Disappointingly dull. I used to get pretty frustrated when after working long in PS on a photo to get the richness and clarity I like, I would save the image and see this kind of output in Picasa, my default image viewer. Then I realized that it is a fundamental difference between their respective image reproducibility that I can do nothing about, and shouldn’t worry about. No real richness has been lost. However, this being a dedicated image viewer that many people install and use over the default viewers, it is unpardonable on part of the developers at Google.

6. Windows Desktop Wallpaper (5/10)

Wallpaper

This one’s a disaster. Not only is it even duller than Picasa, the moment you set any image with the slightest of rich colour as your desktop background, there suddenly arises a lot of grain. At this size on this blog it is perhaps not visible, but you can click the image to view the full size and compare with the others, when the grain will be clearly discernible.

I have often happily set my photographs as the desktop background, only to disappointedly revert because of the grain. The default Windows wallpapers are rigged somehow so that they appear smooth. I think they had absolutely no grain to begin with. But if an image has the slightest grain, it is greatly amplified upon setting as the desktop background.

Javascript Slideshow Code

I prefer writing all my web-design code from scratch. So I use only text editors to write HTML directly, and raw JavaScript (no jQuery etc). While working on a javascript slideshow for Artarium, I came across a lot of problems in transitioning the images. My javascript was changing the src for the image, but I needed to also resize it to the dimensions of the new image before displaying it. Finally, after a lot of time, effort and fruitless migrations to online tutorials and troubleshooters, I came up with the exact configuration that works. On a transition the image disappears, resizes, then reappears. In between this, if the next image takes too long to load, you could display some loading animation, as I did. Just put an animated gif there permanently with a lower z-index than the photo. This will cause it to show between transitions. For the transitions itself you could use a CSS3 transition of opacity as I did and not have to worry about further code for transition effects.

Here is the JavaScript code with some explanatory comments. I have added a preloading function and keyboard navigation. I have not explained everything in detail as I have assumed the user will have standard web-designing experience, in which case this should very well suffice.

JavaScript:

function keyNavigate(e) //to enable slideshow navigation using right and left arrow keys
{
    if(e.which==39)
         pre_next();
    else if (e.which==37)
        pre_previous();
}

var i=0,imax=n; //put the # of slideshow images as n here

function imagearray() //prepares things on page load and starts preloading images
{
    preloader=new Image()
    var j=0;
    captions = new Array();
    captions = ['caption1', 'caption2', ... 'caption n'];
    document.photo.src="directory/photo1.jpg"; //assumes photos are in 'directory'
    document.getElementById('navigation-count').innerHTML="0/"+(imax); //sets slide number
    for(j=1; j    {
        filename="directory/photo"+j+".jpg"; //assumes photos are 'photo1.jpg', 'photo2.jpg' etc
        preloader.src=filename;
    }
}

var imgHeight;
var imgWidth;
var newImg;

function resize() //to resize as image changes
{
    imgHeight = this.height;
    imgWidth = this.width;
    if (imgWidth/imgHeight < 2.25) //any desired criterion
    {
        document.photo.style.height='355px'; //or whatever else
    }
    else
    {
        document.photo.style.width="95%";
    }
    document.photo.style.opacity=1; //photo appears only after it has been resized
    document.getElementById('caption').innerHTML=captions[i-1]; //caption changes
    document.getElementById('caption').style.opacity=1; //caption appears
    document.getElementById('navigation-count').innerHTML=(i)+"/"+(imax); //slide count changes
    return true;
}

function pre_next() //to ensure resizing occurs after picture disappears
{
    document.photo.style.opacity=0;
    document.getElementById('caption').style.opacity=0;
    setTimeout("next()",500);
}

function next()
{
    if (i==imax)
    {i=0;}
    i++;
    newImg=new Image();
    newImg.src="directory/photo"+i+".jpg";
    document.photo.src=newImg.src;
    newImg.onload = resize; //resize function is called
}

function pre_previous()
{
    document.photo.style.opacity=0;
    document.getElementById('caption').style.opacity=0;
    setTimeout("previous()",500);
}

function previous()
{
    if (i==1)
    {i=imax+1;}
    i--;
    newImg=new Image();
    newImg.src="directory/photo"+i+".jpg";
    document.photo.src=newImg.src;
    newImg.onload = resize;
}

This JavaScript alone does not suffice. Here’s some things you need to do with the HTML for this to work:

  1. The image element which changes in the slideshow should have a name=”photo” attribute (used on line 17 etc. of the JavaScript).
  2. Add <body onload = “imagearray(), next()”  onkeydown=”keyNavigate(event)”>  to the HTML body. The next() is required to display the first photo and initialize the caption and slide count.
  3. The slide transition occurs by pre_next() and pre_previous() functions. So any event that you want will trigger a transition should call these functions (as used in the keyboard navigation part), not next() or previous().
  4. The ‘caption’ div in the HTML holds the caption, while the ‘navigation-count’ div holds the slide number. Place them as you require.

You can find this code at work in any gallery at Artarium, unless I change it in the future. If you hit a block using this code, there’s nothing a couple of Google searches won’t clear for you. If there’s a problem that persists even after you have done your research thoroughly, leave a comment (be specific) with your e-mail and I promise to try to help.

Photoshop Tutorial: Add texture to flat image

This will be a short Photoshop tutorial that will explain how you can make an image richer by adding a texture to it.

We start with this image that can be found on the internet:

HD Wallpapers of Violin - High Resolution Backgrounds of Guitar 3000 x 2000

Then we straighten and flip it in Photoshop using Image > Image Rotation options:

photoshop-1

There is a more or less flat backdrop to the guitar. We want to introduce a texture here. You can download textures from the internet, like this crumpled paper texture that I chose:

crumpled_paper_7_insight_designs

Insert it into the document as a layer, like so:

photoshop-2

Resize it so that it fills the entire area, in this case:

photoshop-3

Now comes the magic. Set the blend mode of this layer to overlay. You can experiment with some of the other modes too to get your desired result:

photoshop-4

This is the result:

photoshop-5

Not quite finished yet. The overlayed texture has fallen on the entire image, including the guitar. Although in this case it is not very conspicuous, I still prefer the smoother, softer original look of the guitar. Also, in other cases it might not do to have the texture sprawl over the entire image, but only lie over a specific area of it. For this we must remove the texture from the unneeded region. This we shall do via a layer mask.

Apply a layer mask to the texture layer by Layer > Layer Mask > Reveal All:

photoshop-6

Now choose a suitable brush:

photoshop-7

Paint with black over the mask of the texture layer. This will start removing the texture from the regions you paint over. Paint with white to restore the texture in that area. Toy around with the brush size, hardness and opacity; change brushes etc. until you are satisfied with the result:

photoshop-8

As you can see, some softness has been restored to the guitar and the surrounding background. Now you may, if you want, merge down the two layers by selecting the top layer and pressing Ctrl+E or choosing Layer > Merge Down and use it as a single layer or save as an image.

This essentially concludes the tutorial on adding a texture. However, I also wanted to increase the extent of this image upwards, filling the expanded region with only the textured background. For this we must first make a layer from the locked background (the original image) by double-clicking it. Then we change the canvas size by Image > Canvas Size:

photoshop-9

If we do not make a layer from the background before expanding the canvas, the new area will be white instead of transparent.

Then I duplicate our layer into a new one and shift that up. I flip it vertically and line it up with the top edge of the original layer below:

photoshop-10

We need to make the top guitar disappear. We do this using the Clone Stamp tool. Choosing a patch of the textured background beside the top guitar as the source, you can paint over the guitar. Again, fiddle with the size, hardness and opacity of the brush to smoothen out the changed region with its surroundings.

photoshop-11

Same goes for the region where the two edges are meeting, because the mirroring is apparent there:

photoshop-12

Here is the final image:

photoshop-tutorial

Share the knowledge and enjoy.

More tutorials:

Photoshop Tutorial: Adding Detail, Texture, Colour and Lens Flares