However, one reader asked if it was possible to enable a client-side cache of a dynamically resized image. It surely is, and it’s very simple.

Dynamic Image Resizing: Revisited

If you’ve got no clue how to resize an image in PHP, then you ought to go back and re-read the original article. For the rest of you, here’s a quick refresher on what happens.

Our script takes a filename as a $_GET parameter. If the file exists, the script loads it in as an image resource. Using the GD library, we create a new image resource that is the proper size.

Finally, we use a content-type header to tell the browser to interpret the data as an image and we output the image data. Like this…

header("content-type: image/png");
imagepng($dst_img);

Enabling a Client Side Cache

In order to enable a client-side cache, all we need to do is add an extra header to the mix.

There is a set of headers in HTTP to handle this sort of need – Cache-Control. You can use this to enable caching, disable caching, and set some restrictions on what can be cached for how long.

The option we’re most interested in is max-age=[seconds]. This response header is sent along with the data to tell the browser that it can re-use a cached copy as long as it is no older than the specified age.

To enable this with PHP, add another header() call before the imagepng() call, and set a Cache-Control header with an appropriate max-age. Like so…

header("Cache-Control: max-age=3600");
header("content-type: image/png");
imagepng($dst_img);

Keep Request Queries Consistent

With this system, you could set a pretty long max-age for the cache. Assuming that the original image never changes, the user could cache a resized copy for months and your script would be happy.

However, you need to keep your query strings consistent for this to work. Since your request includes a query string, that full string is included in the location that is cached.

According to your browser, it’s not the image that is cached, it’s the location…

http://www.earn-web-cash.com/scripts/resize-image.php?image=http://www.earn-web-cash.com/wp-content/uploads/2008/01/dzone-screenshot.png

If you were to change the query string in any way – leaving out the www, for example – the browser will think it is fetching a new resource and it won’t consult the cache.

This is especially important if you include size parameters in the query string to dynamically choose the new size. You would need to be careful to keep the parameters in the same order every time for the cache to work properly.

Some blogs automatically resize the pictures for you into a thumbnail – like the image to the right. What if you want the image a different size, though? You could allow the browser to resize it for you, or – better yet – write your own php script to resize the image dynamically.

Why You Shouldn’t Let the Browser Resize Images

Look at the original picture – the small thumbnail created by WordPress. Notice how large it is – 13.9kb. When WordPress resizes the image, it also reduces the file size. If I were to include the fullsize image and resize it using css height and width attributes, the file size would not be cut down.

Want proof? Look at the second image to the right – that’s simply resized by the browser. It’s a whopping 284.21kb.

If we write our own php script to resize the image dynamically, we can control both the image size and the file size. Check out the third image to the right – which was resized with a php script. You’ll notice that it looks nicer too – the browser isn’t designed to resize images.

Using the PHP GD Library to Resize the Image

So how do we do this? We’re going to make use of the PHP GD library to manipulate the image, and a $_GET parameter to tell it which image to re-size.

Let’s walk through using the GD library to re-size an image. Then we’ll see how to include that in your HTML to actually do the resizing for you.

First, we need to open up the original file and get it’s size and type characteristics.

$src_img = imagecreatefrompng('image.png');
$srcsize = getimagesize('image.png');

imagecreatfrompng() creates an image object and stores it in $src_image. If the file was a different type we could replace “png” with “jpeg” or “gif.” getimagesize() stores an array in $srcsize that contains the width of the image ($srcsize[0]), the height of the image ($srcsize[1]), and the filetype of the image ($srcsize[2]).

Now we need to create new dimensions for the new image and actually create an image. We’ll resize it to 200 pixels wide – and then adjust the height to maintain the ratio.

$dest_x = 200;
$dest_y = (200 / $srcsize[0]) * $srcsize[1];
$dst_img = imagecreatetruecolor($dest_x, $dest_y);

The calculations should be self explanatory. imagecreatetruecolor() creates a new image object for us with the given dimensions – which we will soon fill in with our resized image.

The next step is to place the resized image into $dst_img and output the image as Image content.

imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, 
    $dest_x, $dest_y, $srcsize[0], $srcsize[1]);
 
header("content-type: image/png");
imagepng($dst_img);

imagecopyresampled() copies an image ($dst_img) into a new image ($src_img) with a set of given attributes (including our sizes). The “Header” line tells the browser that this is an image – so that it’s not displayed as a bunch of gibberish. Finally, the imagepng() function actually displays the image.

Now, we need to clean up and destroy the image objects. Otherwise, we could end up sapping a lot of memory from the server.

imagedestroy($src_img);
imagedestroy($dst_img);

Displaying the Script in HTML

If you load the script directly, you should simply see the image. It creates an image resource and displays it in the browser – as if “resize-image.php” was really “image.png.”

Therefore all we need to do to include this new image in an HTML page is use the php script as the src attribute of our <img> tag. Like so…

<img src='resize-image.php' />

The script will execute, create an image, and use that as the src.

The last thing we need to do is modify our script so that we can pass it some information.

It wouldn’t do much good if we had to write a new php script for every image we wanted to resize. Instead, we can use the $_GET array to send a variable (the image filename) to our image resizing script.

Here’s the entire image resizing script, with the $_GET variable used for the filename.

//  Create source image and dimensions
$src_img = imagecreatefrompng($_GET['image']);
$srcsize = getimagesize($_GET['image']);
$dest_x = 200;
$dest_y = (200 / $srcsize[0]) * $srcsize[1];
$dst_img = imagecreatetruecolor($dest_x, $dest_y);
 
//  Resize image
imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dest_x, $dest_y, $srcsize[0], $srcsize[1]);
 
//  Output image
header("content-type: image/png");
imagepng($dst_img);
 
//  Destroy images
imagedestroy($src_img);
imagedestroy($dst_img);

To use this, you need to slightly modify your HTML and add an “image” parameter to the URL of your script. Like so…

<img src='resize-image.php?image=image.png' />

There ya go! Now you can resize images on the fly.

Next Steps to Take…

This is of course a basic introduction to the topic. You can add a lot of functionality to resize-image.php.

For example, you could take extra parameters – like a width and/or height. You might also want to include a bunch of error checking – make sure the file exists, make sure the new dimensions are appropriate, etc.

You could also use a switch() statement to open different types of images – based on the contents of $srcsize[2]. Remember, you can use the GD library to do more than work with .png files. By replacing ‘png’ with ‘jpeg’ or ‘gif’ you can use the same functions to work with these file types. For example, imagecreatefromjpeg is equivalent to imagecreatefrompng.

In the near future, I plan on extending this example into a full-fledged script for immediate download and use. So stay tuned – and leave any comments with suggestions for what the script should be able to do.

If you operate a website (like this blog), Google Adsense is probably one of your main streams of revenue. Although you may eventually outgrow Adsense, chances are you’ll have used it at some point.

While looking through my Adsense stats, I noticed an odd trend. This trend suggested a few things about monetizing a site through Adsense – questions that I don’t have an answer for yet, but that I will be looking for.

On this and my other site (Babel), I use a few main types of ads – a horizontal image banner, a skyscraper with text and images, and square boxes with text and images.

It’s natural to wonder, “Which ad is the most efficient and most effective?”

Both of these sites are relatively new, so I don’t have a lot of data to work with. From the data that I do have, though, I’ve noticed a few key trends.

• The tall vertical skyscraper and the square blocks seem to have the best click-through rate
• The horizontal image banner (like the one in the header) seems to have a low click-through rate
• The tall vertical skyscraper and the square blocks seem to have lower pay-per-click values
• The horizontal image banner seems to have a much higher payout than the other two options

Like I said, I don’t have a whole lot of data to support these trends at the moment. Over the next month or two, I plan on watching these trends and testing them out (using random tests of text verse image ads).

It’s something to keep in mind, though. The horizontal image banner seems to be the most effective – the high payout makes up for the low click-through rate. Although I wouldn’t get rid of the other ads, it’s a good justification for making sure you have at least one horizontal image banner on your site.

Notice any trends in your own Adsense reports? I’d be interested to hear what other people have come up.

Since I recently switched to Ubuntu Linux, I don’t use Photoshop anymore. GIMP all the way. So this tutorial will show you briefly how to create a gradient image in GIMP and then use it as the background of an html element.

Create a Blank Image (120px x 120px)

First thing – fire up GIMP and create a new image. Usually a gradient background image is 1 pixel wide. For now we’ll create a bigger image so it’s easier to see what we’re doing – 120 pixels by 120 pixels. You can crop the image down to a 1 pixel width later.

Set the Foreground and Background Colors

When you create a gradient, you need to set two colors – the beginning color (usually the foreground) and the ending color (usually the background color). To change these colors, click on the square swatch of the foreground color in your toolbar (see the circled area in the screenshot to the right).

This should bring up a box titled, “Change Foreground Color.” Pick a dark color – I used #981313. Then, click on the Background Color Swatch (the one right behind the Foreground color). Change the background color to a lighter version of your foreground color – I used #f17b7b.

Select the Gradient Tool

Now that you’ve chosen the two colors, you’re ready to create the gradient. Click on the “Gradient” tool – it’s the square that fades from black to light gray. See the screenshot to the right. There are a bunch of options you could customize, but for a standard gradient background image you’re better off leaving them alone.

Draw the Gradient! Then Crop Away

Now you can actually create the gradient by clicking and dragging on your image canvas. Position the tool at the top border of your canvas (if you look in the bottom left, it’ll tell you when you’re over pixel “0″). Hold down the Control button to force GIMP to draw a straight line, and drag the cursor down to the bottom pixel of your canvas.

Let go. Voila! You’ve got a nice gradient image created.

You could use it as-is in your css stylesheet, but it’s usually a good idea to trim your picture to 1px wide. The browser can simply repeat the image across the entire width of the element – so making it wider than 1 px is simply wasting bandwidth. Go ahead and crop the image now, and in the future make your gradient images 1 px wide by whatever height you want.

Now, let’s write the css to use this as a background image for an html element.

.gradient {
  background: #f17b7b url(images/gradient.png)
    repeat-x top; }

There’s four pieces to this shorthand css declaration.

• #f17b7b sets the background color. This is the same as the bottom color in our gradient, so that if the container is taller than the gradient image it seems to blend smoothly.
• url(images/gradient.png) sets our gradient image as the background image. Make sure you change the path to where-ever you uploaded your gradient image.
• repeat-x tells the browser to repeat the image left-to-right for the entire width of the container. This is what makes our 1-pixel background image “stretch” across the entire width.
• top simply tells the background image to align itself to the top edge of the container. Not always necessary, but your better safe than sorry.

And that’s all there is to it. Create an html element with class gradient and it should have your lovely gradient background.

So get to it. Start drawing.

Today, we’ll take a look at how to make this tooltip look a bit nicer – using a gradient background and some extra styling.

To review, here’s the basic styling to create the tooltip. Refer to the original post for an explanation of the CSS/HTML.

a.info span {
    display: none; }

a.info:hover {
    position: relative; }

a.info:hover span {
    display: block;
    position: absolute;
    top: 0;
    left: 0; }

In order to make this look a bit nicer, kind of like this tooltipThis tooltip has a gradient background, some bold-face font, and a nice border on top and bottom., we’re going have to add some more style to a.info:hover span.

First, let’s change the colors a bit, add a nicer border, add some padding, and move the tooltip down about one line.

a.info hover span {
   top: 1.5em;
   padding: 1em;
   border-top: 3px solid #d58700;
   border-bottom: 3px solid #d58700;
   border-left: none;
   border-right: none;
   color: white;
   background: #516898; }

Adding that styling would leave us with this tooltipThis looks a lot nicer, but we still need a gradient background..

I created a gradient image in GIMP. You should be able to do this in your favorite image editing program.

I made the gradient image 120px tall. I figured that’s high enough for the average tooltip, and longer ones will be covered by the standard background color. This background color should be the same as the bottom color of the gradient. That way when the gradient ends… it blends in nicely.

To add the gradient, we’ll change one line in the css declaration for a.info:hover span – the background line.

background: #516898 url
  (images/tooltip-gradient.png) repeat-x top;

Now we’ve got our final tooltipThis should be nicely styled. Looks good to me anyway..

You’ll notice a few things in the background declaration – and these hold true for any time you use a gradient background. I included a color – which is equal to the bottom end of the gradient. This way it can blend in if the tooltip becomes longer than the gradient image.

I included repeat-x – which means that the gradient image will be repeated every 1 px along the x-axis. This let’s you expand the image to the full width of the block, but only have to load a nicely small 1px wide image. I also included top to make sure that the gradient appears all the way to the top of the tooltip’s box.

Well there you have it. Once you get the mechanics of the tooltip down, it’s pretty simple to add extra styling like a gradient background image. All you need to do is create your own gradient and tailor the colors to your own needs.

Happy tool-tipping.

Here’s the situation.

The guy wanted to send out a newsletter, so he grabbed a pre-fabbed newsletter script. The PHP script seemed to work fine – it read an HTML template and then fired off the e-mail in HTML form.

There was just one problem: none of the images were appearing in the HTML e-mail when he tried to view it.

What was the culprit? The PHP script? Or simply some faulty HTML?

It turns out the PHP script was working just as intended. If you view his post, you can get a copy of the source code. I haven’t tested it, but he claims it worked fine.

The problem was a simple mistake in HTML coding.

When the img tags were declared, the src attribute was set with a relative url instead of an absolute url.

What’s the difference?

A relative url tells the browser the path to a file from the current file’s directory location. So, for example, let’s say I have a file “index.html” and a file “guide.html” inside the directory “web-design-guides” on the domain “http://www.earn-web-cash.com.”

If I want to create a link from “index.html” to “guide.html” using a relative url, I simply use this tag…

<a href="guide.html">Guide.html</a>

That tells the browser to look inside the same directory for the file “guide.html.”

A absolute url defines the absolute path to a file. In the same example, we’d have to include in the href the domain, the directory, and the file name, like so…

<a href="http://www.earn-web-cash.com/
  web-design-guides/guide.html">Guide.html</a>

The advantage of relative URLs is that they’re quick to type and they make webpages easily portable. If all of my links are relative and I move the entire site to a new server, I don’t have to edit anything.

If I had used absolute urls, I would have had to change the domain name in every anchor tag. The advantage of absolute urls, though, is that they can be accessed no matter where the page is accessed.

So, for example, if I turn the webpage into an e-mail (or if it’s read in an rss reader), the absolute url is still valid. If I use a relative url in an html e-mail, the reader’s browser won’t be able to find the file – it will look in the directory that the e-mail script is running to find the file you’re linking to.

So what’s the lesson here?

If you’re writing HTML that is going to be displayed somewhere other than your server – i.e. in an e-mail, cached on someone’s hard drive, or on an rss reader – remember to always use absolute urls.

This is especially important for <img> tags – because they are almost always declared in regular pages as relative urls.