Skip navigation.

The Dark Furie

Resizing Images - Quick And Dirty, How To Guide

Saturday, 3. November 2007, 20:22:04

I've been asked by a few people to explain how to resize an image so that it displays better in blog posts and forums. Rather than continue to type out how to do it over and over, I've decided to add this post to my Tips collection of posts.


First, start with your basic image. For this example we'll use my favourite thing in the whole world...Fresh steak, ready to cook.

The address of this image is http://files.myopera.com/Furie/files/steak1.JPG and the dimensions of the image are 1600 width and 1200 height, though my page automatically cuts it down to a decent size for viewing.

Now, that's a bit big isn't it? So lets cut it down a bit, shall we.

What sorcery is this then? The address of this image is still http://files.myopera.com/Furie/files/steak1.JPG but now the dimensions have been cut down to 200 width and 150 height. So, how do we do this? Simple.

<img src="http://files.myopera.com/Furie/files/steak1.JPG">
is what I typed to display the first image and 
<img src="http://files.myopera.com/Furie/files/steak1.JPG" width="200" height="150">
is what I used to display the second one. Spot the difference yet?


By adding the height and width commands into the image code I can control the maximum size that the image will display at. The numbers I enter into the quotes will be the maximum allowed dimension of the image for either the height or the width.

One thing to remember while trying this out is that the image will display wrong if you don't cut each parameter down by the same percentage. As an example, on the following version of the same photo I'll cut the width down to 400 but keep the height at 100.

<img src="http://files.myopera.com/Furie/files/steak1.JPG" width="400" height="100">
is what I typed to get that one. You can still just about tell what it is, but I like my meat a little thicker than that...

To fix it I've got to figure out what the height should be. Using the original image size of width 1600 and height 1200, I can see that I've taken the width down to a quarter of what it started out as because the current width is 400. But the height isn't enough, so I need to take the height down to a quarter of it's original starting value as well. Lets see... A quarter of 1200 is 300 so I should enter that in the height value instead of 100 as it currently is. My final code should therefore be

<img src="http://files.myopera.com/Furie/files/steak1.JPG" width="400" height="300">

And it works perfectly.

Hope this post was helpful to people.

Highway To HellFinally Finished My CSS

Comments

theoddbod 3. November 2007, 22:05

I'd like to add that this does not affect the actual download size of the image at all, so I don't want to see massive 3000x2000 bitmaps appearing everywhere as tiny scale images.

Callya 3. November 2007, 22:33

:up: Thanx a million for this Mik. I'm gonna try it out.

Furie 3. November 2007, 23:07

Well said Mart. :sst: Everyone knows what to put in comments to Mart now. :lol:

Seriously though, good point.

dannii 4. November 2007, 01:13

Great post :up: Always good to know when posting images :yes:

Dacotah 4. November 2007, 01:44

:up:

KYren 4. November 2007, 04:11

:up:Thank you Mik,you are an angel :angel:

Cois 4. November 2007, 10:45

ooh.. something to play with.. p: how do you work it in the albums or are you unable to?

Furie 4. November 2007, 12:32

Can't in albums I don't think.

dannii 4. November 2007, 12:49

Can we do it with the brand new [ IMG = ]??

Cuz I totally stopped using the < img src = now that it doesn't work on comments and when using them in posts then then it f*cks up all the breaks in hte post nervous

Furie 4. November 2007, 12:54

I use manual breaks for most of my posts anyway. But no, I can't find how to make it work with square brackets. :frown: It's not something you'd use that often anyway, but I have been asked a few times how to do it.

dannii 4. November 2007, 13:07

Manual breaks suck :cry:

KYren 4. November 2007, 19:24

There is a []bbcode for resizing images on this site http://handbook.abovetopsecret.com/bbcode.htm
but it didn't work.

Furie 4. November 2007, 19:42

Not everything is supported on every site. To make things worse, some sites make their own codes too.

Reshade 2. May 2008, 19:06

I like the way the image looks. I will have to try this out. I usually use a different online image resizer.

Furie 2. May 2008, 19:19

Whatever works for you. I rarely use this method myself, unless I can't find an image I want at the right size, but I was asked by a friend how to do this so thought it was worth the tutorial post.

Cois 3. May 2008, 09:26

It wasn't me was it?

Furie 3. May 2008, 11:04

No, don't think so. :confused:

KYren 3. May 2008, 12:01

This code has been very useful for me.Thank you,Mik.:smile:

Furie 3. May 2008, 16:31

Glad to help anyone that wants it.

Furie 3. May 2008, 16:31

Glad to help anyone that wants it.

Cois 3. May 2008, 19:09

Glad to help anyone that wants it.

Furie 3. May 2008, 22:58

I don't remember reverting to my wolf form and typing that. :insane:

Cois 4. May 2008, 09:40

Its the classical Jekyl and Mr Hyde story.. :left:

qlue 7. January 2009, 16:01

Is it just me or are all those images virtually the same in Operamini. :left:.

Furie 7. January 2009, 16:04

Opera Mini does play silly buggers with it.

princessofdeath 28. April 2009, 10:04

one disadvatage though... you can't put an image beside a paragraph. I used to resize image via HTML stuff but I had to use tables and stuff just to put the image on the right side of a block of text or on the left side (too complicated as Mik once told me).

Even if I use table format, the paragraph spacing gets smaller and disarray.

princessofdeath 28. April 2009, 10:07

btw.. the auto resize thing only works on Opera. The I can only see 1/3 of the first piture since I'm using IE

Furie 28. April 2009, 11:16

I don't cater for IE anymore. p: You should try something along the lines of align="left" added to the code.

princessofdeath 28. April 2009, 14:10

seriously? it works? I'll try it then next time I post :smile:

qlue 28. April 2009, 14:26

The only thing that works properly in IE is vbscript. Of course, since it doesn't work in any other browser you should probably avoid using it. :whistle:.

princessofdeath 29. April 2009, 12:05

ahahahaha.

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.

Download Opera, the fastest and most secure browser

Photos

img19.jpgimg43.jpgimg49.jpgimg63.jpgimg17.jpgimg25.jpgimg47.jpgimg73 (1).jpgimg41.jpgimg1.jpg
July 2009
S M T W T F S
June 2009August 2009
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

Highlights Of This Page

Blogging & CSS Help

  • My Blog Designs

    This group contains all of the new blog designs I've created for anyone to use.

  • Simplest CSS Template

    The simplest way to customise your blog.

  • Anonymous Comments

    My thoughts on the problems with the currents system used on this site, the problems with any anonymous comment and a way to improve this site's system.

  • Report Bugs And Problems

    A selection of links and help enabling anyone to report problems they have on the site.

  • Brand Identity

    A discussion of the things that can affect how people view you online.

  • Back Up Plan

    What would you do if you lost everything you'd ever written online over six years.

  • Mobile Blogging - How To

    A look at how I've written every post on this page directly from my phone.

  • Mobile Publishing Package

    A collection of mobile applications I put together to help people publish articles online.

  • Only Online

    Even if the thing you've accomplished is only online, why shouldn't you pat yourself on the back over it?

  • Acronyms Code Tutorial

    How to set up acronyms and explanations in your posts.

  • Easy CSS Template

    Extended version of the template I posted a while back.

  • Blog 9 From Outer Space

    You too can aim to have the worst blog in history.

  • Image Resizing

    How to resize a large image just using code.

  • Tags Tutorial

    A quick guide (requested) on how to use tags and why to do so.

  • Text Formatting - Dropcaps

    A guide on how to implement magazine style capital letters to your page.

  • The My Opera CSS Generator

    Tired of your current blog theme but don't know how to change it? Fed up of asking others to make you a new theme? With this generator you'll be able to make your own blog theme easily. I guarantee it.

  • Tips For New Members

    A selection of help for people who're new to the site or blogging in general.

  • Dark Professional Theme

    This theme has been designed for anyone to use. It's a plain black stylish theme that has several different skins regularly released for it. Try it out and see if you can find anything that suits you.