Creighton Students
Manual Home  >  Typo3 assistance  >  Common Problems  >  My images are slow to show
My images are slow to show

Contents

Image specifications.

To facilitate the use of images in your site you need to consider a few things. Well actually there is several books worth of other considerations but for our purposes we will limit it to a few.

Most important are image dimensions and image document size.  

To top

Image size or image dimensions

When on a computer, image dimensions are stated in pixels, unlike when you are working with actual physical photographs.  And most cameras these days take images in very large resolution (or in other words, a lot of pixels.  Several thousand pixels wide by several thousand pixels tall).  And that's good for the most part, you will get a good crisp clear picture.  But it's not good to try and display that image on your site without reducing the size as the image will be too large for the space and will slow the loading of the page it is on.

So let's try an example, images speak louder than words after all.

To top

Image dimensions

Note, the folder explorer program in the illustrations is "Pathfinder" a Mac replacement for "Finder".  Your computer may use another explorer program and it may look entirely different.

So I find an image that I really like.  I pull up a preview of it in the preview software for my computer and place that preview over my page to see what it looks like.   Looks good, for the moment.

Click image for full size:


I upload and add it to my page.  Typo3 will try and prevent huge image from over whelming your page by adding it's own dimensions in the code of the image insert.  For this example though I pulled that code out to show just how large this image truly was.  As you can see, only part of the tree on the left is visible and the image goes outside the page design (the edge of the top/header is the edge of the page in this context).  Internet Explorer 6 will push the image to the bottom of the page, under all other content.  The image is so large that I'm only displaying a portion of just how large it is.

Click image for full size:

To top

Image or document size

Now you could "scale" your image.  However, if you take an image with a large document size, like the one in the images above and scale it down to fit in your page.  It will still be the same document size.   In other words if it's 5MB when you uploaded it and added it to the page, it stays 5MB no matter how small you scale it.  You could really scale it to 2 pixels x 2 pixels and it would remain 5MB.  You really aren't making the image smaller, you are telling the page to display it smaller.   A user on a low broadband could wait over a minute waiting to see that image, a user who is using a dial-up probably won't wait the several minutes.  

Click image for full size:

Statistics have shown that a site or page has less than 4 seconds to engage a user or they may leave.  

"In a 2006 study of users interacting with over 65,000 unique URIs, researchers Weinreich & Herder found that 25% of all Web pages were displayed for less than 4 seconds and 52% of all visits were less than 10 seconds with a peak between 2 and 3 seconds."  From Communicate Quick by UIE

If you have a image that takes a minute to load, well you could easily loose your user.  

To top

What size (dimensions) should the image be?

Generally we don't have any sites that can take an image larger than 600 pixels wide.  Some sites are narrower than that but if your image is 600 pixels wide and is still a bit too wide for your page, it's quite alright to scale the image down to a size that fits in your page.

If you want to find out the exact size to make your images you can contact the webteam.  We can look at the code behind your page to get the exact dimensions.  One thing to consider before you contact the team though is if you want the image to take up all of your content space or only part of it.  You may want your text to wrap around your image (instructions on how to do this). 

As far as document size goes, if you have resized your image to fit into the space of your page, it will probably already be of a correct document size. 

The webteam reserves the right to not allow the use of scaled large images without a very good reason to.  We may resize it ourselves or require the owner of the site to do so. 

There are some exceptions to all of this; Fine art exhibits, images illustrating lectures, diagrams, there are many reasons to have large images.  If this is the case you should create a smaller version of your large image, upload both, put the smaller version on your page and using that image, create a link to your larger image.  You can, if you wish, have the webteam install a lightbox on your site.  This however means that you have to have a certain level of HTML expertise to manage it.  

To top

How can I see the image's size before I upload?

All computers have a way to check what size a file is. 

In Windows you can change the folder to "Details".  You may have to add the column "dimensions" to your column list (How To).   Then you cans see at a glance your image dimensions and document size.

On a Mac, finder isn't so accommodating to allow you to see everything at once like Windows does.  You'll need to check each file individually by left clicking (or command click one button mouse) and chose "Get Info". 

The image below shows "Pathfinder" a Mac Finder replacement.  I can clearly see that this image, even though it looked small in the preview is much, much too large.

To top

How can I resize my image(s) - external sources?

Going into how to resize images is beyond the scope of this manual, however there are a number of great sites that not only cover how to do it, but offer online resizing services.

How To

Online resizing services (there are scores of sites, below are only 3.  Google "resize image" for more)

To top

Creighton University