Note. This shows the old editor code. The updated editor uses similar code, but it is arranged differently.
Modifying post image sizes using this method requires editing posts in the Edit Html mode. Blogger's small editing window doesn't make it easy, but it's not difficult – just work carefully.
When images are uploaded using the post editor's image button, Blogger stores the original (max of 1,600px on the long side) and produces a scaled copy for display. The sizes are: small = 200px on long side; medium = 320px on long side; large = 400px on long side.
The size is included in the <img src> code as a directory or folder name. /s200 is for small; /s320 for medium; /s400 for large, and the the width: and height: are placed in each image's style. In this example of full image code, the maroon is the link wrapper and the green the displayed image code:
The area of interest is green: the size folder is bold and the style properties that need to be modified are bold and italic
In the example, large was selected during upload: that can be seen in the folder /s400 and width: 400px. Keep in mind the Blogger sizes are long-side, so if the image were higher than wide, the 400px would be the height:.
The size of the displayed image can be increased by changing BOTH the size folder, and removing or replacing the width and height values. Retaining the width and height has the advantage of reserving a space of the image's dimensions. If the image size is important to the layout, even if it doesn't appear, the format will be preserved.
I'll increase the size to 800px wide and keep the width and height properties. Scaling the image to 800px wide is as simple as: (800 * 300)/400=600. So, I'll change the folder from /s400 to /s800 and width: 400px; height 300px; to width: 800px; height: 600px;.
Showing only the green (maroon isn't changed:)
If I elected to remove the width: and height: properties, it would be:
Below are some other sizes I've been testing. The size used to replace "s400" is indicated as size folder beneath the images.
The image display has been reliable for more than 1½ years. Here's my theory: Blogger will deliver multiples of the "official" sizes.
s320 X 2 = s640 s400 X 2 = s800 s320 X 4 = s1,280
Remember, those are long-side sizes.
Also, Blogger seems willing to deliver the Picasaweb sizes in a Blogger address in addition to the Picasaweb address: Thumbnail = s144 = 144px Small = s288 = 288px
Picasaweb also uses: Medium = s400 = 400px Large = s800 = 800px
I added 512px which means 1,024px should display, as well.
Non-standard size
This is the uploaded image with the address changed to s1600. Note that Blogger scaled my 2000px wide image to 1600px wide when I uploaded.
Standard size
Blogger "small" size, the size folder is s200
Standard size
Blogger "medium" size, the size folder is s320
Standard size
Blogger "large" size, the size folder is s400
Non-standard size
Blogger "medium" size X 2, the size folder is s640
Non-standard size
Blogger "large" size X 2, the size folder is s800
Non-standard size
Picasaweb "Thumbnail" size, the size folder is s144
Non-standard size
Picasaweb "Small" size, the size folder is s288
Non-standard size
5/25/08 - Added test: s1280
size folder is s1280
Non-standard size
3/27/09 - Added test: 512px
size folder is s512
Non-standard size
7/7/09 - Added test: 576px
size folder is s576Blogger/Picasaweb scaled vs. browser–scaled.
Browser Scaled
Blogger Scaled
You can also eliminate the size folder and use width: and height: to scale the image.
The left image is the full size image with no size folder – it is browser–scaled to 400px wide.
On the right is the Blogger–scaled image. The size folder is s400 and the image is delivered to the blog at 400px wide.
The file size for the left image is 358 KB. The file size for the right image is 36 KB or about 10% of the left image.
You decide which looks better and which downloads faster.
21 comments:
Really useful. I was going mad with all these changes.
Tnanx!
I'm sooo glad to get this information! I wondered why my images were suddenly posting HUGE, and the blogger help forum was NO help. I'm still a tad confused though, as my image code looks like this:
MARGIN: 0px auto 10px; WIDTH: 1024px; CURSOR: hand; HEIGHT: 768px;
Which numbers do I alter so the image is medium sized, still click-to-enlarge-able, and not distorted?
thanks broham... saved me alot of searching on useless forums for answers.
Thanks. I've been trying for years to go larger and now I will. Thanks thanks thanks thanks
my Edit Html looks like this
MARGIN: 0px auto 10px; WIDTH: 400px; CURSOR: hand; HEIGHT: 369px;
when I try to adjust the width and height, the image DOES get bigger, but it's all pixelated. is there any way to go bigger but have the image quality in tact?
DON'T FORGET THE 'Y',
What size is the image you are trying to enlarge? If it is really 400px X 369px; and you use the code to resize to 800px X 738px it will pixelate.
This page is about an image that is uploaded large, and resized by Blogger for the post. Blogger actually produces smaller copies for the blog: it's probably done for delivery speed and bandwidth reduction.
The real question is did you change the size folder from /s400/ to the target size? It should be one that Blogger will actually deliver, with most of my guesses in the post. If you want another size, try going to the next larger and use the code to scale it down.
You can also change it to the largest size /s1600/ and let the browser do all scaling.
THX!!I did figure this out myseft. Tried it, but it didn't work at first. However, after reading your post and do it again, it just amazing works!.... strange...
when i post via email to myblog@blogger.com, how setting up it auto change from s320 to s600? thank for your help!
I'm not sure you can automatically resize. The only time I emailed an image, the size info was included as "align="middle" height="189" width="250". That sets the position and size.
I will say I don't email to my blog so I don't have much experience, but I might do some testing and see if I can figure out something.
Hi, I've tried using your suggestions above to keep Blogger from shrinking my images to only 270 px wide, but to no avail. My column width is 400 px wide, and that is what the "large" image size is supposed to post as.
When I tried to change the pixel size in "edit HTML" mode, it does make the image 400 px wide, but it also pixelates it and ruins the image. I tried uploading a larger file size, but no matter what it pixelates it if I resize it larger than 270 px wide. Any suggestions?
Okay, I figured out the problem and it is weird, but it works...
I had to delete the sizing:
width: 270px; height: 400px;
and change the /s400/ before the image file name to /s800/. Why 800 works instead of 400 I don't know, but it does so I'm happy.
Thanks for your post on this page; your information pointed me in the correct direction.
The key is the Blogger sizes are on the long side.
When the image is taller than wide, 400px is the height of the displayed image and the width is what ever it scales to.
The information about changing or deleting the width: and height: in the image's style is in the box at the top, but I'll add that to the body of the post, as it looks like that is permanent.
We, at the http://liftyouup.blogspot.com, like to thank you for sharing your skill of creating image in various sizes to enhance the blog features. You really make our work more interesting and challenging,
is there a way to edit the template's html so that there isnt a need to edit the code for each post? thanks!
ohshimin,
Not that I know of. The image sizes are controlled by the post editor not the template. Since between Blogger and Picasaweb, the image host, there seem to be a variety of sizes available, the only reason I can think of to limit the size is Blogger doesn't want to design a lot of custom template sizes, so they limit the images to the typical 400px wide post column.
When I post pictures to my blog the quality isn't good at all. The examples you use have great quality. I am going to try changing the size for sure but want to fix the image quality first. Do you have any suggestions? Thanks for any help you can give!
The Carlsons,
My camera shoots at 3,072 wide X 2,304px and the images are uploaded to Blogger.
I have never uploaded an image at its full size, I always crop and scale using the Gimp as my image manipulator.
There's one thing you should know about uploading to Blogger. The maximum image size is 1,600px on the long side. If you upload larger, Blogger will scale it.
When you post an image and select a size, Blogger produces a second image scaled to the post size. So, if you are uploading large images, Blogger may be scaling twice.
I crop and scale and if you look at the large image, check what the guy in the bottom center is looking at. He's wondering how I convinced Knott's to put my name on their signature rail. That's a third thing I do -- add my name.
Here's the procedure I follow. I load the image in the Gimp, and save in Gimp-native format. All editing is done on that copy. If needed, I crop to the post subject, then scale to 1,000 to 1,200px on the long side. When it is sized I add my name in a new layer, and when happy merge the layers. Only after I have the postable image do I produce the .jpg for upload. I normally have a target file size of no more than 125KB for the uploaded image, and adjust the .jpg quality until I get that.
I believe that working in Gimp's native format produces better results than using the camea's .jpg format.
The images in this post are unique, since I didn't crop. I selected an image that would work for the test, and scaled it to 2,000px before uploading. (Blogger scaled it to ,600px, but that was part of the test.) If you want to see if my procedure works in a normal blog environment, you would have to check my other blog: http://sparerep.blogspot.com/
So for S512 Whats the width and height ??
Shermain,
The original image is 1,600px wide X 1,200px high. When you use the s512 folder, a scaled image, 512px on the long side, is delivered for display.
If you uploaded the image and selected large, the width would have been 400px and the height 300px, so Blogger would have included 'width:400px; height:300px' in the style.
To change those numbers, you just calculate the new height.
(Orig. height * new width)/orig. width.= new height
(1200 * 512) /1600 = 384.
'width:512px; height:384px'
Keep in mind that using this method, those numbers do not actually scale the image: the s512 has asked Blogger deliver a scaled image. Including the size in the style= allows the browser to know how much space is required before the image is delivered by the server. In theory, the page will layout to it's final appearance while the image is loading. Also, if the image doesn't deliver for some reason, the space will still be taken up on the page. That could be important if your post layout depends on the image being in-place.
this is HANDY!! thanks for posting it.
Thanks a lot for this posting. I spent endless time resizing pictures until I found your post.
:-)
Thomas
Post a Comment