First we need to create a thumbnail and surround it with an anchor tag.

<a href="#image1"><img src="http://yoursite.com/images/image1.jpg" alt="" /></a>

The href parameter is very important since it will be what links our thumbnail to our larger image. We will use the same name as the ID in our larger image like so:

<a href="#" id="image1" class="pressbox"><img src="http://yoursite.com/images/image1-big.jpg" alt=""></a>

The larger image needs a class that we can reference. I used pressbox but you can use whatever you want as long as you modify the CSS accordingly. Here is the CSS that will get everything working properly:

.pressbox {
	width: 0;
	height: 0;
	position: fixed;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 9999;
	text-align: center;
	background: rgba(0,0,0,0.7);
	}
 
	.pressbox img	{
		opacity: 0;
		padding: 10px;
		background: #ffffff;
		margin-top: 100px;
		-webkit-box-shadow: 0px 0px 15px #444;
		-moz-box-shadow: 0px 0px 15px #444;	
		box-shadow: 0px 0px 15px #444;	
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
		transition: opacity .25s ease-in-out;		
		}
 
.pressbox:target {
	width: auto;
	height: auto;
	bottom: 0;
	right: 0;
	}
 
	.pressbox:target img {
		opacity: 1;
		}

We’ve added an opacity transition so that our Pressbox will fade in once we click on the thumbnail. This will all work because of the :target pseudo class that will display the the element that uses the same ID that is referenced by the href parameter in the thumbnail’s anchor tag.

You can test it out below.

Remember that this will only work in the following browsers:

• Firefox 1.0+
• Safari 3.1+
• Opera 9.5+
• Chrome 2+

Let’s take a look at the HTML required:

<div class="image-box">
   <img src="http://your-site/images/your-image.jpg" alt="" width="300" height="200" />
</div>

That is pretty straightforward enough and it gives us something like this:

We need some CSS to get it looking how we want:

.image-box img { 
   transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   }

That gives us:

Not exactly what we want, but we’re getting there.

Let’s crop the div container to mask out the image’s edges:

.image-box { 
   width: 200px;
   height: 150px;
   overflow: hidden;
   }

Our image now looks like this:

We need to center it within the div container and that requires a few modifications to the CSS:

.image-box { 
   width: 200px;
   height: 150px;
   overflow: hidden;
   position: relative;
   }
 
.image-box img { 
   transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -100px 0 0 -150px;
   }

That’s exactly what we want. It might look a little plain but now that you have the basic idea, you can add some more CSS to make it look even better:

.image-box { 
   width: 200px;
   height: 150px;
   overflow: hidden;
   position: relative;
   border: 5px solid #eee;
   box-shadow: 0 0 1px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 0 1px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.3);
   }
 
.image-box img { 
   transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -100px 0 0 -150px;
   }

With CSS3 you no longer need to rely on something like Photoshop to get certain effects on your images. All it takes is a few lines of CSS3.

First the HTML:

<div class="circular"></div>

Not much to it. Next comes the CSS:

.circular {
	width: 300px;
	height: 300px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	background: url(http://link-to-your/image.jpg) no-repeat;
	}

A complete circle requires your border radius to be half of your width/height. Put it all together and your image will now look like this in Firefox, Safari and Chrome:

You can even add a border or a shadow.

I added a black shadow with an opacity of 80% to achieve the effect above. The CSS looks something like this:

.circular {
	width: 300px;
	height: 300px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	background: url(http://link-to-your/image.jpg) no-repeat;
	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	}

There is an actual workaround for those who want to allow people to drag the image onto their desktop, but it requires a bit more HTML and CSS.

<div class="circular"><img src="http://link-to-your/image.jpg" alt="" /></div>

.circular {
	width: 300px;
	height: 300px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	background: url(http://link-to-your/image.jpg) no-repeat;
	}
 
.circular img {
	opacity: 0;
	filter: alpha(opacity=0);
	}

Using the CSS above, you now allow users to drag the image to their desktop. Try it below.

You won’t actually see the image being dragged across the browser but it will appear on your desktop once you drop it there.

You can also just add rounded corners with the CSS above by lowering the radius of the curve from 150px to anything you want.

Many things factor in to how your site performs, including the speed of your server, the amount of traffic on your site, how your site is coded, if your site is static or dynamic, and the list goes on. If your site has not been optimized then you are really doing yourself a disservice, especially now that your page rank might rely on it.

If you have a WordPress site, there are some great plugins to help you out. I like to use WP Super Cache to get things started. It is pretty easy to set up and works exceptionally well. Plus, the customer support is top notch, so if you have any issues you can just contact the author.

If you don’t use WordPress, you can still follow some of the steps below to get your site performing at its best.

First, let’s take a look at some free tools that are available online that can analyze your site and let you know exactly where the problems lie:

Pingdom Tools

Pingdom Tools will give you a breakdown of all the files that your site needs to load to render a page, and whether or not any of them is problematic. It can also save your tests so you can compare your site’s statistics against one another on different occasions.
http://tools.pingdom.com/

Web Page Test

Web Page Test provides a similar service to Pingdom Tools, but the results are a lot more elaborate. The test takes a bit longer but it’s well worth the wait. Your site will be graded on 6 different aspects of its performance: KeepAlive Enabled, Compress Text, Compress Images, Cache Static Content, Combine CSS/JS Files and Use of CDN. Once you are graded, you will also see why your site might have failed each test.
http://www.webpagetest.org/

Firebug & YSlow

If you have a Web site and you’re not aware of Firebug, you need to become aware of it immediately. It’s an amazing developer tool for Firefox that can make your life a hell of a lot easier. It offers tools such as an element inspector, CSS editor, and process console. To get your site optimized, install YSlow from Yahoo and you will have all the tools you need to test your site and find its weaknesses.
http://getfirebug.com/
http://developer.yahoo.com/yslow/

Once you’ve tested your site and you know what the problems are, you can start to make a few changes to help increase your site’s performance, which will in turn give your visitors a better experience and show search engines that you mean business.

You probably already know these tips, but just in case you don’t, pay attention because they are the basis of how you can optimize your site:

Optimize Images for the Web

If you plan on uploading an image to your site, make sure you’re not uploading the original 5 x 7 that has a resolution of 300dpi. Why? Because it’s such a large file that it will definitely slow down your site, if not crash it. That’s why all images must be optimized for the Web. If you have Photoshop, or any image editing software, you’ll have the option to export your image for the Web.

What does that mean? Well, first of all, you should probably aim for 72dpi, which is pretty much the Web standard. That will help bring your file size down. You should also save your photos as JPGs with a quality of around 50-60%, and your graphics as GIFs with a color range dependent on the graphic itself. If your image has a transparent background which doesn’t look too good as a transparent GIF, then you might want to make it a transparent PNG. That does increase the size of the file, so keep that in mind.

If you want to really get fancy, you can put together a CSS sprite so that all of your graphics and images are merged together into one file. This brings down the number of elements that your site has to load, but it does require a bit more effort in regards to the CSS used. Here is a CSS sprite I use on bavotasan.com:

If you don’t have any desktop software to optimize your images, you can always take advantage of Yahoo’s Smush.it, which allows you to upload an image file and have it optimized and returned to you. If you have YSlow installed, then you also have Smush.it included on the tools tab.

Put CSS at the Top & JavaScript at the Bottom

Placing your CSS at the top of your site makes sense, because you want to have your elements styled before they start to render. Placing JavaScript at the bottom also makes a lot of sense because you need your elements to render before they can be manipulated by your JavaScript. This has become a standard and should always be the way these files are included in your site.

Reduce the Number of HTTP Requests

An HTTP request occurs every time your site fetches a file that is required to render the page. So every image, every JS file and pretty much every element on your Web page requires an HTTP request. That’s why CSS sprites are a great idea. They reduce the number of times your site needs to fetch an image. Another great idea is combining your CSS files and your JavaScript files into one. So grab all of your site’s CSS (you can view it using Firebug), create one file and include it in your header. Same goes for your JavaScript files, but make sure you place the JS elements in the proper order or else they won’t work, eg. jQuery needs to load before you use any actual jQuery. And be sure to stick your JS file in your footer.

If you don’t plan on making any changes to your CSS or JS, you can even minify the files to make them as small as possible. There are many online resources to do this, but you also have everything you need if you already installed Firebug and YSlow. If you take a look at http://jquery.com/, you can see the difference between the minified version (24kb) and the development version (155kb). That’s a big difference.

The Hard Stuff

This is where things start to get a little more complicated. The following tips require a bit of knowledge of coding, or at least a willingness to attempt to do some things that you might not really understand.

Configure your ETags

According to Wikipedia, an ETag, or entity tag, “is one of several mechanisms that HTTP provides for cache validation, and which allows a client to make conditional requests.” If you don’t plan on using them, which most likely you won’t, then you need to remove them completely by adding the following to your .htaccess file.

FileETag none

If you don’t have an .htaccess file in your site’s root directory, then create one and upload it because you’re going to have to make a few modifications to it to get your site optimized.

Add Expires Headers

Expires headers will let everyone know that certain elements can be cached by the browser so they won’t need to be reloaded every time a visitor hits your site. Static elements should have a far future expiration date and dynamic elements need to be configured according to how you plan on using them. The following will add an expiration date of one month to all your image, CSS and JS files.

# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

A2592000 (60*60*24*30) is a timestamp that equals one month. Remember, if you plan on modifying any files that have been cached with a future expiration date, you need to rename them or else visitors will not see the changes until they clear their browser cache or the old files expire.

Compress Components

Compressing things always ends up making them smaller and load faster, so implementing some form of compression on your components is a must. This optimization step might not work for you if your server does not have either mod_deflate or mod_gzip installed as part of Apache. You should contact your service provider and inquire about this to find out which of the following codes you should use.

mod_deflate:

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

mod_gzip

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Content Delivery Network

It’s a little hard to believe, but the closer your visitor is to your server’s location, the faster they will receive your site elements. That’s where a CDN can come in handy. They provide multiple server locations for your site elements that will be accessed accordingly depending on where you visitors are located. This has been known to improve your site’s response time by up to 20%. The only problem, is it might cost you an arm and a leg to get it up and running. There are many CDNs popping up that are not as expensive as others, but to tell you the truth, this might not be a viable option unless your site is really bringing in the money, which in turn would make it worth having a CDN on your side.

Conclusion

When it comes down to it, running a successful Web site requires a lot of attention to certain things that you might never have considered. Being aware of optimization tools and techniques will definitely help you improve your site’s performance. Most importantly, it will get your site ready to be indexed by Google, Yahoo and many other search engines that rely on speed as a ranking factor.

<script type='text/javascript' src='jquery.js'></script>

Then just add the following code and all your images will have a slight fade when you hover over them.

<script type="text/javascript">
  $(document).ready(function(){
    $("img").hover(function() {
      $(this).stop().animate({opacity: "0.8"}, 'slow');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, 'slow');
    });
  });
</script>

If you only want this to occur on certain images than just make sure to change the first jQuery selector to the class name of the images your want this effect to affect.

Try it out below:

<?php
$string = 'Here is your content with an image tag <img src="http://bavotasan.com/wp-content/themes/bavotasan_new/images/bavota.png" alt="Image" />' ;
$string = preg_replace("/<img[^>]+\>/i", "", $string); 
 
echo $string // will output "Here is your content with an image tag" without the image tag
?>

You can replace the img in the preg_replace() function for it to work with whichever HTML tag you wish.

If heading to the site is too much work for you, most of CS4 has a Kuler panel built right into the software. There is even an Adobe Air desktop app available and a Dashboard widget for those who work on a Mac.

You can check to see if the GD library available on your server by placing the code:

<?php phpinfo(); ?>

into a test.php file and uploading it to your site’s main directory. Open the file online and look to see if GD Support is Enabled. If it is, you are good to go.

The following code will dynamically create a PNG file from a text string.

<?php
header("Content-type: image/png");
 
$string = "This is my test string.";
 
$font  = 2;
$width  = imagefontwidth($font) * strlen($string);
$height = imagefontheight($font);
 
$image = imagecreatetruecolor ($width,$height);
$white = imagecolorallocate ($image,255,255,255);
$black = imagecolorallocate ($image,0,0,0);
imagefill($image,0,0,$white);
 
imagestring ($image,$font,0,0,$string,$black);
 
imagepng ($image);
imagedestroy($image);
?>

The above code must be included in its own file, it cannot be added to an existing PHP file with other functions. To access this image from another file just include it as the source in an image tag.

Test out turning text into an image by typing in something below.