Hack 9. Properly Size Image Tags
Use PHP image support to set the height and width attributes of your images properly. All of the modern browsers start showing web pages as quickly as possible so that web surfers feel they are getting fast(er) response times. This means browsers will start showing a page well before any images or other accompanying resources are downloaded. Because the browser hasn't downloaded the image before rendering the page, it doesn't know how big the image should be, unless you specify height and width attributes on the img tag. If you don't specify the width and height of images, though, the page will jerk around as it's being downloaded. The browser will guess at the size of the image (usually picking 10 pixels by 10 pixels), but then find out after the image is downloaded that the actual size is much larger. Thus, the browser will need to lay out the page again to adjust for the new size. This hack builds img tags with the proper width and height attributes by using the getimagesize function to retrieve the actual width and height of the image. 2.8.1. The CodeSave the code in Example 2-16 as imagesize.php. Example 2-16. A little image magic
<html>
<?php
function placegraphic( $file )
{
list( $width, $height ) = getimagesize("rss.png");
echo( "<img src=\"$file\" width=\"$width\" height=\"$height\" />" );
}
?>
<body>
<?php placegraphic( "rss.png" ); ?>
</body>
</html>
2.8.2. Running the HackCreate an image file named rss.png in the same directory as this PHP file, and then browse to the imagesize.php page. You should see the image displayed properly, without any stretching. Use the View Source command in the browser to view the HTML source code to make sure that the width and height attributes were set properly. You can use the placegraphic function anywhere you would have put an img tag previously. But I don't recommend using this function in static headers or footers where the size of the images will never change. A performance overhead is associated with figuring out the size of an image. So you should use this function only when you don't know the size of the image until the graphic is requested. In addition, if you are using a database to store a library of images, I recommend storing the width and height of the image along with the pathname. It is much faster to retrieve the width and height along with the pathname from the database than it is to use the getimagesize function on the fly each time you display the image. 2.8.3. Hacking the HackIn addition to setting the width and height fields of the tag, you should also set the alt attribute. The alt attribute describes the image in text so that people who are browsing without image downloads enabled, or people with disabilities, can use page readers to navigate your site. To support the alt attribute, just add another argument to the placegraphic function, and then output the value of the argument in the echo statement. 2.8.4. See Also
|
