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.

Looking 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/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.

1A

1B

1C

Code for Photo 1A:
[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/s1600/IMG_6358_3.jpg" border="0" alt="Photo 1B"id="BLOGGER_PHOTO_ID_5665972585654398066" /][/a]

Code for Photo 1C:
[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/s1600/IMG_6358_3.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/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:
[ href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/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.

2A

2B

2C

Code for Photo 2A:
[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/s400/IMG_6357_2.jpg" border="0" alt="Photo 2"id="BLOGGER_PHOTO_ID_5665972582915410210" /][/a]

Code for Photo 2B:
[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/s1600/IMG_6357_2.jpg" border="0" alt="Photo 2"id="BLOGGER_PHOTO_ID_5665972582915410210" /][/a]

Code for Photo 2C:
[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/s1600/IMG_6357_2.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/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:

2D

Photo 2D code:
[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/s1600/IMG_6357_2.jpg"][img style="display:block; margin:20px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/s400/IMG_6358_3.jpg" /][/a]

Code for Photo 2 after Compose mode:
[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/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 Compose-modified code:
[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8QpFECcChWhPcrYrqR8x4N3NunbFtFvT76cVC02rHE6pGtNI6eZRZElIWSQfPhEaO1C_lH_6he5CrKwsaNaCOwDNzo4H7nf_QW83oc_xlqYU2PPH7fBOXhU4BqL2tlo4LcuRZ9Qvse_0/s500/IMG_6358_3.jpg" /][/a]


Photo 2C Compose-modified code:
[a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8BYZyNX2iRM1pOLo5usNP1A-dO1_nVuiCIKrCMl68uheq4VQX4BKMzIa2nLeOK6qU3n-vYwFzcR57QRK2Q-To5szQ_6NT-QMVcFIXTQ4jsyj7OkX411wfYmzZ5MMc_KmjfSStAmCp4-BY/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.