Friday, October 21, 2011

Making The Photos Sharper

...at least here on Blogspot.

Blogger has made a couple of changes over the last year or so — I really don't remember exactly when these changes occurred, nor do I remember exactly what they were. Nonetheless, the changes have resulted in my already uploaded photos getting blurrier than they appeared when I first uploaded them.

One of the changes at Blogger, implemented whenever, was a switch or an option to use their "new" editor (no longer very new). I rarely use this new editor; we should keep that in mind when I get into the nitty gritty of how I'm currently sharpening up all or many of my old photos. Anything I say may not apply to photos uploaded while using the new editor. At about the same time, the main change here at LFD was me going to a wider main post area with one of the new templates, meaning that I can now display photos in 500-pixel-wide fashion instead of being stuck with the a maximum width of about 400 pixels. I initially dealt with this change by increasing the size of the photo in a particular way. This change is no longer adequate, or else my eyes have gotten more sensitive sometime in the last few months.

There are a few things to keep in mind about photo uploads and HTML here on Blogger. First off, when I upload, I go into Edit HTML mode, getting out of Compose mode and ignoring it almost entirely. In fact, going back between modes can change the way your HTML will look, and it can change the way your post will look at final posting. Consequently, I try really hard to stay out of Compose mode.

Another thing to understand is that the HTML for any photo has two main parts. As mentioned, these will look slightly different if you've uploaded in HTML mode, gone into Compose mode for writing, then gone back into HTML mode for further editing. I'm having to deal with the two different ways the HTML can look because many of my older posts were written in Compose mode after the initial uploading of the photos.

Also to keep in mind, these photos are hosted on Picasa, where they are not blurry, where they are stored in whatever size I had them set for upload. If you host them on Flickr or somewhere else, you may not get a Blogger blurring problem.

First, we'll upload a photo or two, while in HTML mode. The photos will go to the top of the post in reverse order from the way we upload them. I usually upload all or most of the photos before I start writing (unlike this post), and upload the last one first, working my way 5 photos at a time until I upload, last, the photo I want to be first. (Urrggh.)

Before uploading the two photos and one image I'm going to use in this post, I'll resize them in my photo editor (on my computer) so that the maximum dimension for each photo or image is 800 pixels. (You can use whatever pre-upload size you want; the larger the size, the longer your blog posts will take to load, in general.) Then I'll sharpen my two photos and one image in my photo editor, so that these resized photos and images will look less blurry than they do after my pre-upload decrease in size. I'm now uploading them; their HTML code has duly appeared at the top of the post in the Edit HTML mode. I'll now copy the HTML code for these photos and move them down below.
The upload window is set to "Center" and "Large". Note that the HTML for these photos depends on your upload settings; the HTML will be different to begin with if you use some other setting like "Right" and "Medium".

Here are the two edited and pre-sharpened photos, uploaded as described above, at the regular uploading max dimension of 400 pixels. The first is 400 pixels wide, the second is 400 pixels in height.
Photo 1
Photo 2Looking at the almost* unadulterated HTML code for Photo 1 below, we see that there are two main parts to the HTML code. Note that I'm using brackets, [ and ], instead of the HTML sideways carats, whatever they are called <>, because the HTML carats can't be used in regualar language without them trying to create an HTML phrase or a photo. *I did change the original margin setting from "margin:0px auto 10px" to "margin:20px auto 10px" because that's the way I nearly always set my margins for centered photos. Also, I added a label in the alt part so that it says alt="Photo 1", which will cause the words "Photo 1" to appear over the photo with a mouse hover. I don't usually do this.

Photo 1:
[a href="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s1600/IMG_6358_3.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 266px;" src="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s400/IMG_6358_3.jpg" border="0" alt="Photo 1"id="BLOGGER_PHOTO_ID_5665972585654398066" /][/a]

The first part of the photo code, a href through IMG_6358_3.jpg, all inside the first set of brackets, will not be changed. The first part shows the size as 1600 with the little bit "/s1600/". I've bolded particular parts of the second part of the photo code, which I will change. These changes are all inside the second set of brackets (remember these are sideways carets in the real HTML). The little /a inside the third set of brackets/carets is there to mark the end of the photo HTML. It is required.

1A: Simply enlarging the photo by changing "width: 400px; height: 266px;" to "width: 500px; height: 333px;" results in a very blurry picture.

1B: I used to change the width and height from "width: 400px; height: 266px;" to "width: 500px; height: 333px;" as in 1A, and also changed the second size "/s400/" to "/s1600/" — do not use quotes unless they are already part of the code — to get my pictures to 500 pixels wide here on the blog while retaining some modicum of sharpness.
NOTE: The height you use while changing the width will have to be of the right proportion; I use standard photo height:width ratios and have a little chart written on a wall next to me so I don't have to recalculate these numbers all the time.
1C: This old way of enlarging my photos (1B) no longer works so well, so I'm now deleting this part: width: 400px; height: 266px; (be sure the quote following the 266px is still there) and changing the second size to "/s500/" — which will work just fine on a photo with width dimension larger than height.

All three enlarged photos are shown below, the first being very blurry, the second being somewhat blurry, the third being fairly sharp. The changed code is shown with brackets instead of carats, below the three photos.
Photo 1A
1A

Photo 1B
1B

Photo 1C
1C

Code for Photo 1A:
[a href="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s1600/IMG_6358_3.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 500px; height: 333px;" src="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s400/IMG_6358_3.jpg" border="0" alt="Photo 1A"id="BLOGGER_PHOTO_ID_5665972585654398066" /][/a]
For the first photo, I enlarged to 500 maximum dimension (width), but left the second size at s400: Very Blurry! Don't bother with this, leave it at 400 or do the second of the following two changes.

Code for Photo 1B:
[a href="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s1600/IMG_6358_3.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 500px; height: 333px;" src="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s1600/IMG_6358_3.jpg" border="0" alt="Photo 1B"id="BLOGGER_PHOTO_ID_5665972585654398066" /][/a]

Code for Photo 1C:
[a href="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s1600/IMG_6358_3.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s500/IMG_6358_3.jpg" border="0" alt="Photo 1C"id="BLOGGER_PHOTO_ID_5665972585654398066" /][/a]

Remember that if I'd alread gone into compose mode, the code for these photos would look different, and I'd still have to get rid of the width and height part of the code and change the second size part. We'll see what that looks like later.

---

Now we'll look at photo 2. This photo has a height greater than the width, so it will be treated slightly differently.
Photo 2
Photo 2:
[ href="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s1600/IMG_6357_2.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 300px; height: 400px;" src="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s400/IMG_6357_2.jpg" border="0" alt="Photo 2"id="BLOGGER_PHOTO_ID_5665972582915410210" /][/a]

I'll enlarge photo 2 the same three ways, 2A blurry, 2B not so blurry, 2C much sharper.
Photo 2
2A

Photo 2
2B

Photo 2
2C

Code for Photo 2A:
[a href="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s1600/IMG_6357_2.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 500px; height: 667px;" src="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s400/IMG_6357_2.jpg" border="0" alt="Photo 2"id="BLOGGER_PHOTO_ID_5665972582915410210" /][/a]

Code for Photo 2B:
[a href="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s1600/IMG_6357_2.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 500px; height: 667px;" src="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s1600/IMG_6357_2.jpg" border="0" alt="Photo 2"id="BLOGGER_PHOTO_ID_5665972582915410210" /][/a]

Code for Photo 2C:
[a href="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s1600/IMG_6357_2.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s667/IMG_6357_2.jpg" border="0" alt="Photo 2"id="BLOGGER_PHOTO_ID_5665972582915410210" /][/a]

The only difference with Photo 2, with it's height dimension larger than it's width, is that in the final setting, where I get rid of Blogger's specific reference to width and height (width: 500px; height: 667px), I have to change the size to the maximum dimension, 667px, to get a width of 500px, which is what I want.

If I wanted different widths than 500px for my photos, for example, I wanted a width of 400px on the last photo, I would have to use a different size in the second part of the photo HTML. For the last photo, I'd have to use 533px:
Photo 2D
2D


Photo 2D code:
[a href="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s1600/IMG_6357_2.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s533/IMG_6357_2.jpg" border="0" alt="Photo 2D"id="BLOGGER_PHOTO_ID_5665972582915410210" /][/a]

----------
Compose Mode:
If I've used Compose mode anytime during my editing or post-writing process, instead of just sticking to Edit HTML mode the way I prefer, when I come back to Edit HTML mode, the HTML code for the two original photos will have changed, and it will look like this:

Code for Photo 1 after Compose mode:
[a href="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s1600/IMG_6358_3.jpg"][img style="TEXT-ALIGN: center; MARGIN: 20px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 266px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5665972585654398066" border="0" alt="Photo 1" src="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s400/IMG_6358_3.jpg" /][/a]

Code for Photo 2 after Compose mode:
[a href="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s1600/IMG_6357_2.jpg"][img style="TEXT-ALIGN: center; MARGIN: 20px auto 10px; WIDTH: 300px; DISPLAY: block; HEIGHT: 400px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5665972582915410210" border="0" alt="Photo 2" src="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s400/IMG_6357_2.jpg" /][/a]

I will now have to delete the WIDTH: 400px and HEIGHT: 266px (leave any semicolons) in the first picture and WIDTH: 300px and HEIGHT: 400px in the second photo. I'll then have to change size from s400 to s500 in the first photo and to s667 in the second photo to get my desired results of Photo 1C and 2C:
Photo 1C
Photo 1C Compose-modified code:
[a href="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s1600/IMG_6358_3.jpg"][img style="TEXT-ALIGN: center; MARGIN: 20px auto 10px; DISPLAY: block; CURSOR: hand" id="BLOGGER_PHOTO_ID_5665972585654398066" border="0" alt="Photo 1C" src="http://4.bp.blogspot.com/-Tmhj7Bys5NQ/TqGUDAsILHI/AAAAAAAAIy8/3GcQ4qvPIrk/s500/IMG_6358_3.jpg" /][/a]

Photo 2
Photo 2C Compose-modified code:
[a href="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s1600/IMG_6357_2.jpg"][img style="TEXT-ALIGN: center; MARGIN: 20px auto 10px; DISPLAY: block; CURSOR: hand" id="BLOGGER_PHOTO_ID_5665972582915410210" border="0" alt="Photo 2" src="http://1.bp.blogspot.com/-ngoTEQ81oBM/TqGUC2fGiSI/AAAAAAAAIyw/FUQhbAkoJmY/s667/IMG_6357_2.jpg" /][/a]

---
Final Notes:
Please remember that I have no idea what photo code looks like if you've been using Blogger's new editor. I rarely use that. The same basics probably apply, but the HTML may look different, so different changes may be required. Maybe no changes are required to get sharp photos, but somehow I doubt it.

Also, I've seen blurry photos on blogs that use other blog platforms such as Wordpress. I have no idea what the HTML looks like for these photos or what needs to be done to fix them.

4 comments:

Gaelyn said...

HTML is greek to me. I use Windows Live Writer and the photos seem look the same as when I got done editing them in Windows Live Gallery. Now I'm really confused. Yet I can sure notice a difference in these photos.

Silver Fox said...

Gaelyn, I don't know how Windows Live Writer works, but I can see that it results in different HTML that what I have here. (HTML on most webpages can be viewed with right-click, then View Source). All this about my photos really only applies if you use the Blogger photo uploader. Your photos may be uploaded in exactly the same size as you create them, which wouldn't result in any loss of sharpness, but I really can't be sure about that!

Anonymous said...

Hi, Silver Fox--

Regarding your latest LFD post, "Making the photos sharper".

I know absolutely nothing about Blogger and only slightly more about HTML, but I do know a fair bit about digital imaging, and I can see where the root of your blurriness problem lies, and it has to do with attempting to "rescale" images to the wrong sizes for display. I don't know your level of knowledge of digital imaging, so I apologize at the outset if I seem to be talking down to you with any of this stuff. Maybe I'm not telling you anything you don't already know(?)

Taking your photo 1 as an example: 1A, 1B and 1C have the following pixel dimensions (I determined this by grabbing them off your blog page and opening them in Photoshop):

1A: 400 x 266 (at 72 ppi)
1B: 800 x 533 (at 180 ppi)
1C: 500 x 333 (at 72 ppi)

1A is blurriest, because you're taking a 400 px wide image and telling Blogger to stretch it to fit a 500 px wide frame. There aren't enough pixels in the image, so extra pixels have to be interpolated into the image to make it display at the correct 500 pixel onscreen size. Interpolating pixels to make an image bigger is called "upsampling" and it's always a bad idea: the display software has to average values to come up with the correct screen size, and it always guesses wrong. This results in blur and/or "jaggies".

1B is sharper, because at 800 pixels wide, it's got more pixels than needed to fill the 500 px wide frame. The display software throws away extra pixels ("downsampling") to make the image smaller onscreen. This is better than "upsampling" because it doesn't have to invent pixels that aren't there, it just has to decide which real pixels to throw away. The image isn't as sharp as it could be, because 800 doesn't divide evenly into 500, so there's bound to be some averaging error in the downsampling.

1C is sharpest, because it's a 500 px wide image being placed into a 500 px wide frame. There is no upsampling or downsampling, so no opportunity for blurring.

Being ignorant as I am about the whole mechanics of Blogger, I don't know the steps you have to take to get your images from Picasa to Blogger. All I can say is that you need to make sure that the pixel dimensions of the linked image and the displayed image are the same, or an even multiple (you can display a 144 ppi image at 72 ppi onscreen without losing sharpness, though of course it will take up more storage space).

I'm also not comfortable with the details of HTML, having only dabbled in it quite a few years ago, but I would suggest that the best results will be obtained if the input and output dimensions of the code ("src=" and "href=") are the same. Looking at the code for your image 1C (the sharpest), I see there are no dimensional tags in the "href=" side, and the "src=" side has /s500/. I interpret this to mean "scale the photo to 500 pixels, then display it on the template" (whose default width is presumably 500 pixels). Your code for both the 1A and 1B photos have mismatched pixel dimensions ("500 px" and "s400" in 1A; "500 px" and "s1600" in 1B) I would bet that "500 px" and "s500" would also result in the sharpest image.

Dunno if this helps, or just muddies the issue. I enjoy following your blog, in any case!

Best regards,
--Howard

Silver Fox said...

Howard,

Thanks for letting me publish this as a comment. I think that you've explained the actual problems with the digital resizing that happens using Blogger's photo upload. I also now understand not only that there can be loss of information from upsampling (making the picture bigger) but also from downsampling (making it smaller). I hadn't really seen that explanation in all the Googling I did (probably didn't use the right words!). Also interesting to realize the two sides of the photo equation are about input and output.

Thanks again!
sfx