Adding Images in Joomla
Written by Robert Rutten   

Rather than tell you how to add an image into your Joomla page, I want to explain to you about images and websites - more specifically the relationship between images that you have (eg, from your camera) and the images that you see on a web page (such as your Joomla site).

A prime example of a 400px wide image
Rob and Matt showing a prime example of a 400px wide image ... and their manly facial hair.

First of all - you have to know that the internet, and web-browsers are actually a VERY clunky tool for presenting things in a graphically appealing way. As web developers, we do make things look nice - but most of what we do is about getting around some of the limitations of layout on the web. Presenting infomation (eg. text etc..) on the other hand is where the basic web standards and systems excel. So, you have an image on your computer and you want it on your webpage. What next ?

In a nutshell, your webpage will display whatever you tell it to. This means that if you have a 2500 x 1900 sized image from your camera and you put it on your webpage - then your website and Joomla system will faithfull try to jam that into your site, which is probably viewed on most screens as 1024 x 768 pixels wide.... this will at best only show the top left corner of the screen, and then give you a big horizontal scroll bar. At worst it may break your templates and start showing your site in a very funny layout!

What you need to know is that when you view an image on your computer - your local machine is using some cool software to display it and is probably resizing your images to fit your screen automatically - so every shot looks the right way up and the right size... magic! Your website is in fact only displaying what you have given it and does not have these automatic tools.

What you need to do is process your images before you upload them to your site to put them the right way up and make them the right size. What is the right size? Well, only you can answer that, because there are many different types of sites and designs. But as a rough guide - if your site is being viewed on a 1024 x 768 pixel screen, then you can look at the following dimensions (really rough here, allowing for scroll-bars, margins & stuff):

  • 72 dpi "quality" - this is because the web just can't display anything better than that, and higher quality is wasted
  • A "full width" image on your site is around 850px wide
  • A 400px wide image is roughly half the width of the screen
  • A 250px wide image is roughly one third of the width of a screen, and is asthetically pleasing to have text wrapped around.

We generally talk in widths and then let the height sort itself out because the type of site you are using has a "fixed width" and a fluid height - this makes the width the limiting factor in the page layout.

Now - you need a program to resize the images that you want to upload to the website. Most computers come with a default image viewer - but not all come with a default image editor. (unless you use a Mac, or a linux distro like Ubuntu!)

There are hundreds of software packages that can resize images, one free package that is well known is "IrfanView" . You can download and install it - but be aware that when installing you will be presented with options to make IrfanView the default image manager - it is your choice to do this. It is not required for the program to function but some people like it. If you change the default program or other file associations, then you will change the way that your computer opens images. It will also change the "icon" for the images, making them look like a red cat and magnifying glass (the IrvanView logo).

I hope that helps - if you think I have it completely wrong, please feel free to contact me and let me know what you really think.

You can download IrfanView at http://www.irfanview.com/main_download_engl.htm