How to Edit Image Size in HTML on Tumblr
If your blog images are too large, users may have to scroll to see them. Make the images too small, and blog visitors might not notice them. Site designers who create pages for blog sites such as Tumblr often tweak pictures so that they enhance the layout and fit neatly inside browser pages. You can do the same without using an image-editing program once you understand how to use Tumblr's HTML editor.
Image Insertion
-
Adding an image to your Tumblr blog post is as simple as clicking the "Insert Image" button at the top of the editing box where you type your post. When you click that button, a dialog window opens and allows you to enter the URL of an image located on the Internet. The window also contains two text boxes in the Dimensions section that allow you to set your image's dimensions. When you click "Insert," Tumblr adds the image to the editing box.
Manual Resizing
-
You don't have to use HTML to resize a picture in your Tumblr post. Small handles appear around an image in the editing box when you click it. Drag one of the handles to make the image larger or smaller. You can preview the post and its image at any time by clicking "Preview." Dragging image handles helps you to resize pictures quickly, but it is difficult to give them precise dimensions using this method. When you need to give images exact height and width values, use HTML.
Tumblr's HTML Editor
-
Click the "HTML" button at the top of the editing box, and an HTML editor displays the post's HTML code. If the post contains an image, the editor displays a line of code similar to that shown below:
<img height="32" src="MyImage.jpg" width="216" />
This is an HTML img tag that has a src attribute whose value is the URL of your image. That value is "http://www.Some_Site.com/image.jpg." in this example. Change the height and width values -- expressed in pixels -- to any values you like to resize your image.
Tips
-
If you don't like the new image size, click the image to select it, click the "HTML" button, and update the height and width in the HTML editor. You also have the option to add a new image to your post by pasting the following code in the editor:
<img height="X" src="?" width="Y" />
Replace the question mark with the URL of an image on the Web, and replace "X" and "Y" with height and width values in pixels. When resizing images using HTML, remember that image quality degrades as an image's size increases.
References
Writer Bio
After majoring in physics, Kevin Lee began writing professionally in 1989 when, as a software developer, he also created technical articles for the Johnson Space Center. Today this urban Texas cowboy continues to crank out high-quality software as well as non-technical articles covering a multitude of diverse topics ranging from gaming to current affairs.