Something that is very important on the web today is how fast our websites load, and alongside script optimization and other fancy tricks, images are a large part of our sites, and so it’s important that they are optimized for the web. However what if we don’t have control over the size of the images, and we don’t have a program to re-size them? Well we have to do something else. I am talking in terms of a CMS, but the techniques I am about to show you can be used anywhere to create many different sized images from one image.
The first method works but is a little clumsy, take a look.
img { max-width:800px; }
The code above would be placed in your CMS file and stops all images from getting bigger than a margin of 800px. Yes it works, but there are a number of problems with it. If I had a huge image, say 5000 x 5000px, then this method of resizing would mean my image would take a long time to load, this is because the browser still goes to get the huge image before resizing it – this is bad! I strongly recommend you don’t use this method, but instead explore other options.
Well first off for images that are integral to your site, you should be able to re-size them using your original design, but for images that have yet to be uploaded and put on display on your site, I suggest the use of JavaScript. When I first began learning how to re-size images with JavaScript I believed that it was the only way, you see to do so you have to use a large amount of code and it requires you to have a good knowledge of JavaScript. However a very kind man who goes by the name of Tim McDaniels wrote a rather lovely script that we can use for resizing images. The script is called TimThumb and is really easy to use.
Head on over to Google Code and download it (or you could just use the URL provided by Google). Once you have uploaded it onto your own server you can start using it straight away. I find it really useful for use in blogs and as I mentioned above, in a CMS. So when you are ready you can implement it’s functionality by replacing the URL of your image with the URL of the script and a bit of other info – see below.
<img src="timthumb.php?src=my-image.jpg&width=100&height=100&zc=1" alt="">
The above code tells the script where your image is, the dimensions you would like it re-sized to, and that you would like crop the image while zooming – that’s the little ‘zc’ parameter by the way. The way in which the script operates is this, it takes the image and all the information with it, and then creates a cache folder to store the image. It then creates the image and returns the URL of the resized image to be used in the ‘src’ attribute. The script offers some customisation, for example you can change the directory the script saves the images to, so that they can be used again. Just see the documentation for details.
And that’s it really! I just wanted to share that lovely script with you and ward you off resizing using CSS. Users will appreciate the shorted loading time of pages and I can assure you Google will too!
Comments
11 responses to “Resizing images – the right way”
I was just wondering, how would you implament this into CSS if your CMS simply added the tag when you inserted a picture.
ie) If i added an image though my CMS how would i make my images inherit the max-width without adding a class and variable to it eg) .smallpic { width: 200px }
Thanks, Julia
Well if all of the images to be re-sized were within a div such as a content box then the CSS would be #content-box.img { max-width:200px; }, is that waht you were looking for?
That method would be great, but i can’t seem to get it working? Do you have an example?
Thanks, Julia
Well you would have this code:
<div id=”content-box”>
<img src=”image1″ alt=”” />
<img src=”image2″ alt=”” />
</div>
and the CSS I listed above.
#content-box.img { max-width:20px; }
But i used this inside the correct frames
Well as long as you use the code above, and place the CSS between
<style type=”text/css”></style>
tags it should work.
Thank you for all your help.
Was just wondering, due to me just starting off with web designing. Are there any really good tutorials that talk you though making a CMS yourself from finish to end in an extremely coherent way?
Thank You
Well you can check out this tutorial: http://tomsbigbox.com/building-a-cms-part-1/
And out of curiosity are there any tutorials you would like to see on here?
I have had a read and think it is great, but for my level i was hoping for something that would walk me though everything in small parts?
Thanks, Julia
My tutorial offers code based upon many core concepts, if I were you I would head over to http://tizag.com for tutorials on PHP and MySQL – they offer great lessons and can help get you off to a good start.
[…] Resizing images – the right way […]