Site   Web

April 11, 2011

Website Design Tips: Image Sizing – Why Big Isn’t Best

webdesign4

When you are designing a website, also think about the photos or “images” you want to include. Images in this context means diagrams and drawings as well as standard photos. All of them are held in a digital format on your computer and saved as such on the web server. Be aware of certain pitfalls in their use as this will make all the difference for visitors to your website.

Size matters

Images or photos come in all shapes and sizes. As digital cameras have advanced, the available camera size has soared from barely 1 mega-pixel to 10 or 12 or more mega-pixels, with a consequent increase in the photo size. You may have experienced what happens when a friend emails you a photo taken on their nice new camera. The attachment can be huge, and takes forever to download, even on broadband. Now imagine what would happen if you put that photo on your website – exactly the same: it would take ages for the image to be downloaded by the browser.

What you have to do is “re-size” the photo, using your photo-editing software. It’s an easy thing to do: open up the photo-editor and the photo you want to re-size, and click the menu button marked “image” (this is how most editors label it). What you have to do is change the horizontal width to a number of pixels that fits inside your web page. So if you have decided on a page width of 1,000 pixels, a photo size of 250 pixels would be one-quarter of the page width. Let the photo-editor work out the corresponding vertical length for you automatically, so apply the option to “maintain aspect ratio” or similar wording.

When you save the image, you will be given the option of saving it in different resolutions or qualities, from low resolution to high resolution. Unless you are building an “arty” website, low resolution will be quite adequate. Some photo editors actually give you a specific option to save at a suitable resolution for websites.

Finally, use “save-as” with a different file name rather than just “save” so that you don’t overwrite the original version.

Help the browser

When you include the image in your web page, you will have a line of HTML code looking something like this: img src=”mynewphoto.jpg” alt=”Words for Photo” height=”125″ width=”250″

It’s important to provide the height and width data. You can make a note of these values from when you re-sized the photo. By providing the data you are helping the browser allocate that amount of space on the page, and process the remaining HTML while the image is being downloaded.

If you don’t specify these values, older browsers will stop formatting text, download the image, check its dimensions, make room for the image and then start formatting text again.

If you follow these tips when designing a website, you will speed up the download time for your web pages, which will make it better for visitors to your website.


M. Ruthe runs a website design service for small businesses and has developed an online information resource for aspiring web designers. For further information on various aspects of website design visit www.bedfordwebsitedesign.com

5 Responses to “Website Design Tips: Image Sizing – Why Big Isn’t Best

    avatar verzdesign says:

    Nowadays many web design companies offers different types of packages. here we have good packages in less expense, we have good, affective and quality service…

    verzdesign.com

    avatar Boutique Website Design says:

    Excellent tip! You are an awesome leader, Monika.

    avatar Smirs says:

    Thanks a lot!

    very detailed information and thanks for such a awesome tips regarding website design aspects….

    avatar Web design says:

    Very informative articles on the size of images. I often find people posting large images on their site that makes the site take forever to load.

Submit a Comment

Your email address will not be published. Required fields are marked *






You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 2,084,515 bad guys.

css.php