The new Blogger post editor lets you select an image size, or drag its corner or side handles to the exact size you want. You're not limited to the predetermined sizes, which are Small, Medium, Large, and XLarge. When you resize an uploaded image, Blogger resamples it for better clarity, too. Not bad at all!
As always, if you want precise control over certain images, it is better to edit them before uploading and use the original size. Alternatively, you could store some of your special images on another website that you own or an image storage service, such as flickr or Photobucket, and simply link to them. There are many ways to achieve the same thing.
Upload an image to Blogger
Click the image icon and select an image file from your computer or enter the URL of your image on the web (uh, don't hotlink to someone else's image — that's stealing bandwidth, and don't use a copyrighted image).
A thumbnail of your image will appear in the Add an image dialog box. You can upload several images before closing the Add an image box. The thumbnails will remain available as you write your article.
After you click OK, the new Blogger editor places your image at the insertion point, not at the top of your post. To move it, left-click and drag it to a new position.
Blogger's new editor has a compact "bubble" menu for selecting the size and position of uploaded images, as shown above, where I'm selecting a Medium-sized image. The original image is quite large, so Blogger will scale it down and save a resampled copy of the image.
The same bubble menu includes positioning options for Left, Center, or Right. I selected Left to make the image float to the left and wrap text around the right side.
This image of the first page of the Beowulf manuscript is available from Wikipedia and About.com. A slightly larger image, from which these two were derived is on Kip Wheeler's website. Professor Wheeler notes: "The original image of the Beowulf manuscript comes from the anonymous Anglo-Saxon scribe who wrote the "Nowell Codex," Cotton Vitellius A.x.v. 129 r. It appears here as reproduced in Julius Zupitza's Beowulf: Autotypes of the Unique Cotton MS Vitellius A.xv. in the British Museum with a Transliteration and Notes. E.E.T.S. O.S. 77. London: Trubner & Co., 1882. This image is public domain."
The medium-sized image is shown floated left of this text. It looks pretty good, about the same as if you had down-scaled it in a standalone image editor.
A resampled image always looks better than one that has been resized using CSS or width and height attributes of the <img> tag. An image that is merely styled to be a certain size is still downloaded at full size. That is, if your original image is 500x500 pixels, and you display it as 100x100 pixels, web visitors must download the 500px image. If you use a lot of images, page load times on your site can slow dramatically.
Note that browser-resizing does not resample the image or make a new file. It simply smushes it to the specified dimensions. You can spot these images easily because they're blurry, pixelated, and sometimes distorted. Stretched text and faces look very disturbing!
Upload and resize an image using its handles
Double-click or right-click an uploaded image to display handles. Unfortunately, handles do not appear in Chrome or Safari (WebKit browers) by double-clicking, right-clicking, or pleading on your knees.
If you right-click, you may need to then left-click to remove the browser's own right-click menu. Best to double-click.
To scale the image and preserve its aspect ratio, drag a corner handle. To resize the image without keeping it's relative proportions, drag a side handle. Resist the urge to distort text or images of people. Premium fonts are painstakingly drawn to look just right. When distorted, they look terrible 99.9% of the time. It's a risky business to show photos of friends with wide faces or blimpy bodies
Here is our nicely scaled book cover image. I chose this one because I have read several other works by Dan Cederholm and he is both a CSS expert and fine writer. Handcrafted CSS is a new title. I recently bought a copy and have been encouraged to try some new things. I would recommend it to web designers and developers who have some practical experience with X(HTML) and CSS, and who want to move forward with CSS3 in practical ways. The code is available for download, and there's a DVD edition in which the author talks about his philosophy and trends in web design.
0 comments:
Post a Comment