Changing The Size Of Graphics

Hey, Michael Ottman here with another graphics lesson for you. I was surfing Alex’s students blogs and came across yet another awesome site. Bill Vannot has a simple design and his blog is easy on the eyes. I definitely do not need to help him with his graphic for his free report.

In fact it is pretty awesome. There is however just one mistake that is all too common when it comes to putting graphics on blogs and websites. To the left is his awesome report cover. The dimensions are 238 x 300.

I definitely did not design this cover and I think it’s stellar but Bill did just one mistake.  He changed the size of the image to make it fit his blog the way he wants it.  When he added it to his site he changed the dimensions from 238 x 300 to 122 x 153.  It is quite fine to change image sizes but the image itself needs to be changed, not just do a resize in your template.

Here is what his image looks like with just the image compressed to 122 x 153.  Notice how the edges are jagged and the text is barely readable.  People do this a lot and it makes awesome images look choppy and unprofessional. 

If you have an image that needs to fit in a smaller space then you need to actually shrink the image itself, not just change the image size numbers in your html code.  You can use many graphics programs to change the actual size of images.  You can keep the quality of images if you do this. 

I use Adobe Photoshop to resize my images even though there are much more inexpensive ways to accomplish this.  It is wise when you get a graphic of an ebook or report done to get the image in a variety of sizes so you can use them wherever you wish.

Here is Bills image resized the proper way and to the size that he wanted in his blog.  Notice how the book is still crisp and clear.  Resizing the actual image instead of just changing the dimensions keeps the image nice and neat.

Another word of advice is the text on the cover.  If you are going to have a few lines of text on the cover as in this case, I would definitely use a larger graphic than what Bill is using so the text at the bottom is readable.

I myself would like the image to be between the original size of 238 x 300 and 122 x 153.  So this means I would resize the larger image down to 170 x 214.  You can always shrink an image and maintain it’s quality but if you need your image to be larger then it’s hard to increase the size of an original as it looses quality and sharpness making it blurry.

Resizing the image to this size, I can still read what the text says at the bottom of the book.  With a graphic this great, there is no need to have the image small.  Why not show it off Bill?

Bill, you may copy and paste the resized image and use it if you like or if you know how to actually resize your graphic, you might do so to keep it’s quality crisp and clear.  You can see that if you try to take a large image and just resize the dimensions in html, then you come out with a choppy looking unprofessional ebook cover.  Most people don’t even realize the image looks like this because it has been compressed.  That’s what gives it the choppy look.

Anyways Bill, I love your site, BillVannot.com and it’s great looking, full of valuable content and the ebook graphic is awesome.  I just hope you change the size to reflect the fabulous graphics.  If Alex’s students need help with their graphics or have any questions, please just leave a comment and I’ll come take a look at your blog.  Until next time…