Clear images in the new Blogger

Two versions of a passage from Julio Ramón Ribeyro’s story “The Substitute Teacher”:

I don’t know how to explain what’s going on, but here’s what I do to get a sharp image in the new Blogger:

~ To take into account my Mac’s Retina display, I upload an image at least twice as large as what I want to display. The images above are 772 × 612 pixels. For Size, I choose Original. For Alignment, None.

~ In Blogger’s Compose view, I resize the image to Large. I don’t really want Large; I just want numbers for width and height that I can modify.

~ I switch to HTML view and change the code for the image. Here’s where things get tedious. I remove all the <div></div> stuff that now accompanies an image. I change the value for padding: 1em to padding: 0em. I remove text-align: center;, while thinking it strange that Blogger centers even when I’ve chosen no alignment.

~ And here’s where things get really tedious. In the URL for the original image, I change s0 to s1600. In the URL for the resized image, I change the values for width and height to the ones I want (here, 386 × 306). And in the URL for the resized image, I change w400-h-317 (Blogger’s dimensions for a Large image) to s1600.

I’ve exaggerated the difficulty, really: after getting the hang of it, I find that this editing takes very little time. The best way to figure it out is to upload an image or two, follow these directions, and practice.

The first, blurry image above is how Blogger does it. The second is how I do it. The difference is, uhh, clear.

A related post
Images in the new Blogger