<   Prior Home         Share Blog Bloke     Share Blog Bloke Tips       Share to Twitter       Share to Facebook       Share to Twitter       Share to Google Plus       Share to LinkedIn       Pin this       Get Updates            
        Next   >  

Working with Images

I get a lot of questions about blogging and one of the more frequent requests that I get is about working with images. So here is my version of Blogging with Images 101:

Recently Reeholio asked the Bloke:

I have been trying to display my photos on my photoblog http://reeholiofavourites.blogspot.com/ slightly larger than the default large size in the posts. The problem I’m having is when I do the photos are just stretching and looking pixelated, which is not ideal. Any ideas?

Limitation of Images:

If you try to “stretch” an image larger than it’s original size it will always look “pixelated”. So if you want the image to look larger on your blog then your original image will have to be the same size dimensions that you intend to show it on your site, or you sacrifice losing resolution (quality).

If however the original image is not large enough you are basically out of luck. That is the limitation of images. Conversely, you can always shrink an image without losing resolution.

Coding your Images:

When you are coding your image it is always best to include the dimensions of the image. This is very important because images are one of the leading reasons why webpages load too slowly. By including image dimensions your browser won’t have to guess the size of the image and slow down the loading of your webpage.

For example, if an image is 320 pixels wide X 240 pixels high, this will be your code:

< img border=”0″ align=”left” width=”320″ src=”http://photos1.blogger.com/blogger/7506/607/320/vista-rc1.jpg” mce_src=”http://photos1.blogger.com/blogger/7506/607/320/vista-rc1.jpg” alt=”Windows Vista” height=”240″>

Just remember to close up the brackets, and it will look like this:

Windows Vista

But if you try to make it larger than the original size it will look like this:

Windows Vista

Notice how blurry it looks? But if I made the same image smaller than the original it would look like this:

Windows Vista

It still looks good don’t you think?

Working with Images:

Now, if you are not sure what the original size of an image is it’s really easy to find out. If you are online, just right-click your mouse on the image and click on “properties”. You will see the URL address of the image as well as its pixel size.

Image Software:

But what if you are working with an image from your desktop? I recommend that you grab a free product called IrfanView. It will not only show the properties of your image, but it will also convert, optimize, scan and print, create slideshows, play movies and much more.

For more complicated image manipulation I use Photoshop Elements. Elements has a nice feature that optimizes your images for the web but I will discuss that at another time. With plugins Elements can be just as powerful as its big brother counterpart Photoshop and is much easier to use.

Resizing Images:

When you are looking at an image within IrfanView, click on the menu item “Image”, and then click “Resize/Resamble” to see the image size in pixels. From there you can change the size of the image if you like. But just remember to click on the box “Preserve Aspect Ratio” so that the proportions remain the same.

Using Images Online: The Bottom Line

So the rule of thumb is you should show your images online in the same pixel size as the original (or smaller). You can shrink images but you cannot stretch them to look bigger without losing quality.

Filed under: instabloke, blog, blogging, blog tools, blog resources, internet, computers and internet, software, images, photos, photoshop elements, tutorial

Written September 27th, 2006 by | 5 Comments | Filed under: Blog Tips, Tutorials , , ,

Thanks for Sharing     Share - enable java in your browser Share to Twitter            

Did you enjoy this article? Keep up to date with Blog Bloke Tips the moment it's published by email. Your Privacy is Guaranteed and will not be shared with anyone.

Keep it real with Blog Bloke Thanks for reading the original Blog Bloke. You can read more about me here. Contact me if you have any questions, tip requests or if you would like to be a guest blogger. Keep it real every day and subscribe to the newsfeed, share with friends or follow me.

    Subscribe to the Newsfeed     Share to Twitter     Share to Facebook     Share to Google Plus     Pin this     Share to LinkedIn

Got an opinion? Let's be real and start a conversation:

It's your turn to tell Blog Bloke what you think, ask a question or suggest another blog tip. Don't forget the comments policy and I'm looking forward to reading what you have to say.

There are 5 Comments so far to “Working with Images”

  1. Thanks for posting the answer to my query Bloke. After reading this and then playing around with the settings (for a long time), I found that if you want blogger to post the photo bigger than the standard ‘large’ size without it looking pixelated, you had to select the ‘none’ option under layout in the upload window. Otherwise your guide above won’t work as blogger keeps overriding it somehow.

    I’d be really keen to see how you do the ‘continue reading’ link too. I’ll check back later to look for that post ;)

    Regards, Rhys

      Reply   ·   Share Share Blog Bloke Tips  

  2. Yes Rhys, the above information does not apply to Blogger which uses its own settings. And thanks for tip.

      Reply   ·   Share Share Blog Bloke Tips  

  3. Rhys, the ‘continue reading’ hack only works for the old Blogger. I’ve found a solution for Blogger beta that’s not as good. Which do you want?

      Reply   ·   Share Share Blog Bloke Tips  

  4. I am using the old blogger so tips on that would be great. I have looked at the blogger beta, but am not convinced about it yet. I also haven’t read much yet about the pros and cons of switching over. What is your recommendation?

      Reply   ·   Share Share Blog Bloke Tips  

  5. Just found your ‘under the hood…’ article so I guess that answers that part. I’m still not convinced either. I would rather learn more about encoding and doing it myself than taking the ‘easy’ option offered by beta.

      Reply   ·   Share Share Blog Bloke Tips  

Share     Share this article with your friends

Subscribe to Better Blog Tips Newsfeed   SUBSCRIBE to Bloke Bloke's Articles (Newsfeed)

Subscribe to Better Blog Tips Newsfeed   Subscribe to only Comments for this Article | TrackBack URL

You can also use these html tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>