Background
Displaying your email address on your site as text has always been risky. Why? Long ago, spammers created bots that searched the web for email address (by looking for something in the xxxx@yyyy.com format) and then spammed them to oblivion. As a result, web developers often use little tricks like writing out the @ symbol (xxxx at yyyy.com) or inserting a little image of an @ symbol between the username and the domain to prevent a spambot from reading the address. Another problem arises when a user wants to display their name on a website, but doesn’t want a search engine to be able to read the name and then associate it with the site in the engine’s search results. PHP allows a solution for both of these scenarios that is versatile and easy to implement.
Dynamically Generated Images
One of the many powers of PHP is its ability to generate images dynamically, meaning on the fly, when a page is requested. PHP uses the GD extension to create gifs, pngs, jpegs, etc and manipulate them with a small set of predefined functions. The idea here is to display a dynamically generated image of your name or email address that is invisible to search engines, because it is an image and not text.
Why not use Photoshop or another similar program to make an image of a name for one time use? Well you could do this, but what about a situation where data is displayed dynamically, like on a blogging site, where new users sign without the intervention of a web developer? You wouldn’t want to have to manually create an image each time this happened. Dynamically created images in PHP are the solution.
Inserting Dynamic Images Into Your Site
PHP scripts that generate images can only generate images. They cannot have html or other PHP elements echo’d out to the screen. In order to get them to work, you have to isolate the script that generates the image from the script (or page) that displays the image. Let’s say we want to display our email address on our page home.php, and we have a script that generates the image of our email address in email_address.php. To accomplish this, we would need to have an <img> tag on home.php that pointed to email_address.php. Here is what the tag on home.php could look like:
<img src="email_address.php" alt="" />
Note that we are substituting our image generating script into the spot where we would normally have the name of an image, but we keep the “.php” extension.
The Script
To use this script, copy the below code into a file and save it as disguise_text.php and upload it to your server. Then, follow the instructions in the “Implementing the Script” section.
<?php //get name from passed arg $text= base64_decode(urldecode($_GET[text])); //width per char is based on experimentation - yours may be different $width_per_char = 6.25; //image height and width $length = $width_per_char * strlen($text); $height = 15; //create image $img = imagecreatetruecolor($length, $height); //define used colors $white = imagecolorallocate($img, 255, 255, 255); $black = imagecolorallocate($img, 0, 0, 0); //set the background to white imagefilledrectangle($img, 0, 0, $length, $height, $white); //write name in black imagestring($img, 2, 2, 2, $text, $black); //output header and generate image header("Content-Type: image/png"); imagepng($img); ?>
Implementing the Script
After you have uploaded the above script to your server as disguise_text.php, insert the following image tag into the page you want to display the image (paste onto one line - it is separated due to column width):
<img src="http://www.ebrueggeman.com/blog/wp-admin/disguise_text.php? text=<?php echo urlencode(base64_encode('jwaters@apple.com')); ?>" alt="email address" />
Here is what the above code actually generates:
Notes
Without getting overly complicated, the example we have uses size 2 of PHP’s default font to display the text. The auto image width feature of the script is based on the width of this particular font with this size. If you are going to change the font, make sure to change the $width_per_char and $height variables to accurately represent your font. Also, as shown above, the script only works for pages with white backgrounds. To display the image with a different color background, change the RGB values of the “$white = imagecolorallocate($img, 255, 255, 255);” code to match your background.
Conclusion
Generating images in PHP is easy if you know the basics, and hiding text from search engines can be a useful tool. Check out this related article on Image Optimization in PHP
