Don’t you just love it when you run into an image that looks all distorted like this? Face it, this is the number one turn-off to most blogs. To this day, I still haven’t figured out why people leave the images like this. Is it too hard to just resize the image? In the case of a Wordpress Theme that already sets a limit to the image width, you can at least set a specific width in your image tag and get away with it. I have three guess. (1) You are blind to the jagged lines. It’s okay, there’s nothing wrong with that. Not everyone is good with visuals. As a matter of fact, I’m equally retarded when it comes to distinguishing the audio difference between 128kbps and 320 kbps. We’re all even. (2) You don’t know how to resize. (3) You’re lazy. Sorry, can’t help there. As they say, “Crap in, crap out.” Show more dedication to grooming your blog.

This is the obvious step, but open up your image. What I would do is immediately hit Alt+Ctrl+I, also known as the Image Resize. Hopefully you can figure out what your maximum image width is on your own. For the sake of this guide, we will refer to the variable for your maximum image width as “How do I resized image?” as it will vary with everyone. Let’s look inside that red box, and explain this in an example.

Example: What I want to do here is type down “How do I resized image?” (Not to be confused into typing this in. This is just our variable.) in the blank to the right of where it says Width. In the case of High Color Times, “How do I resized image?” refers to the number five hundred and three so I will type “543″ into the box. The height should adjust itself if the box to the left of Constrain Proportions is checked. Hit the Enter key on your keyboard. Done.

Summary: Alt+Ctrl+I, Unknown three digit number, Enter

This one is way easier than image resizing as there aren’t any number involved. Hit the short-cut key for Save for Web… which is Alt+Shift+Ctrl+S. Little tricky to push that, but not too hard and it’s sure faster than moving the stupid mouse. Put your pinky finger on the Ctrl key to the left, ring finger on the Shift key to the left, thumb finger on Alt key to the left, and index finger on the only S key. Good, we have a new window now. Just make sure Optimized is clicked so it loads faster on the web. The filesize is much lower, and it won’t hurt the picture quality. Now just quickly hit Enter two times. See, easier than resizing. No numbers involved.

Summary: Alt+Shift+Ctrl+S, Enter, Enter

This is how an image looks like after it has been properly resized and saved. Look how better this looks compared to the one at the beginning of this post. I won’t get anal about adding the sexy one-pixel border around the image, so we can put that as optional. Anyway, here’s one last example to show how your image tags should look like at the least.

Example: <img src=”http://img.photobucket.com/albums/v417/mana213/1.jpg” width=”543″ height=”407″ border=”1″>

There are more reasons why you would want to set the width and height specifics on your image tags. The following is a comment Zyl posted in the past on Anime on My Mind. Yes, don’t forget the double quotation marks.

Pro Tip: Personally I’d be jumpin’ for joy if more blogs used the width=”x” height=”y” parameters in their img src tags. Really helps to speed up page loading and you don’t get that annoying shifting effect as loaded images push down the text you were reading.

Conclusion: I take pleasure in writing posts like this.

Real Conclusion: Needs moar Kareha.