How to optimize images for website: 6 Tips for Web Developers

Posted by on Sep 11, 2010 | 2 Comments

After long time I decided to write We should see how long it will hold me. Well, that could be another idea for writing. Now back to the subject.

As a web developers we all have to optimize as much components of our websites as we can. Images are one of these things. So let’s start with some basics:

1. Don’t use over-sized images

If you have need for 200x100px image on your website and you are using 800x400px because you are lazy that’s not excuse. You need to resize images on needed dimensions. If you are lazy programmer think how can you optimize process of resizing. With smaller images page will load much faster.

2. Downsize DPI

You don’t need a 300 DPI image for web. 72 it’s enough. Here I don’t talk about image quality, because on your monitor they will look the same. The problem is with file size again. Often when the graphic designer prepares something for print people use same images for the web. It is absolutely ok to use them, but save them for the web first!

3. Optimize image itself

When saving image itself you don’t want to loose on quality so you put higher quality settings and that is a legit reason. But you  can still keep both – quality and optimal image size. Use Yahoo!’s Smush it tool and you will decrease image size for even about 20% average.

4. Use CSS sprites

Instead of using 30-40 images or so for design/layout of your website use just one. All icons, buttons, shadows and other image elements of the page you can put in one css sprite. It’s worth learning how to do it because you will save precious load of the server by having 1 request instead of dozens. On high traffic websites that can have huge impact.

5. Add expire headers

When you add expire headers to your images with date 30 days in advance visitors will not load all the images on each page request. Images will be saved in browser’s cache. So that are more saved requests for quicker page load! But, be aware: if you make, for example, new sprite and overwrite it over old one (same name) many users will see old one because it’s cached (considering not using ETags). That’s not a problem – make that new file with new filename (consider versioning like: sprite_v20100911_01.png or similar) and all users will have fresh version.

Adding expire headers to your web server is easy. For Apache you need to use mod_expires like this:

<IfModule mod_expires.c>
<FilesMatch "\.(js|css|gif|jpg|png)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</FilesMatch>
</IfModule>

Well, adding expire headers doesn’t apply to images only, but on all static content. If not using Apache for static content, even better because you need to:

6. [Advanced tip] Use Content Delivery Server

If you have trafficked website you probably have need for separate server for serving static files like images, videos, javascript and CSS. Apache is great, but compared to much lighter web servers like nGinx and lighttpd is slow and resource heavy. For serving images and other static content I will go with nGinx. Higher parallelization and faster load times are the reason for that. Even if you have only 1 server it’s worth considering to put lighter server. Maybe it’s not easy change but it’s worth trying. Do your own benchmark if needed.

Conclusion

Optimizing images for web is simple. Decrease number of image requests, image size and increase server speed with some tweaks.  But why bother? Today disk space and bandwidth are cheap so you probably asking yourself why to optimize images? Well, it’s not matter of disk space – it’s matter of speed, server stability and on the end, greater user experience. Even Google now looks page speed as one of it’s 200+ ranking signals. Did you know that Amazon found that each page load time increase of 100ms will decrease their sales by 1%? Financial factor it’s also not neglected. Why pay for 10 servers when with little of effort you can pay only 5? If you are good developer website optimization need to be your passion. Your goal to be even better.

In PHP

Referrer Click-through MOD for Prosper202

Posted by on Jun 10, 2009 | 9 Comments

Through Richard’s blog I stumbled upon on MOD for keywords and landing pages click-through for Prosper202.

That was part that was absolutely missing in that open source affiliate tracking software. Since Jasper made such a great contribution to open source community I wanted to also help because Prosper202 is software I use.

So here you can download MOD for Prosper202 which will show you referrers CTR.

NOTE: To install this MOD first you need to have installed
Prosper202 Mod: LP Clickthrough for Text Ads/Keywords!

Installation

1. Run this SQL query:

CREATE TABLE IF NOT EXISTS `202_sort_referers_lpctr` (
  `sort_referer_id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `user_id` mediumint(8) UNSIGNED NOT NULL,
  `referer_id` BIGINT(20) UNSIGNED NOT NULL,
  `sort_referer_clicks` mediumint(8) UNSIGNED NOT NULL,
  `sort_referer_click_throughs` mediumint(8) UNSIGNED NOT NULL,
  `sort_referer_ctr` DECIMAL(10,2) NOT NULL,
  `sort_referer_leads` mediumint(8) UNSIGNED NOT NULL,
  `sort_referer_su_ratio` DECIMAL(10,2) NOT NULL,
  `sort_referer_payout` DECIMAL(6,2) NOT NULL,
  `sort_referer_epc` DECIMAL(10,2) NOT NULL,
  `sort_referer_avg_cpc` DECIMAL(7,5) NOT NULL,
  `sort_referer_income` DECIMAL(10,2) NOT NULL,
  `sort_referer_cost` DECIMAL(13,5) NOT NULL,
  `sort_referer_net` DECIMAL(13,5) NOT NULL,
  `sort_referer_roi` DECIMAL(10,2) NOT NULL,
  PRIMARY KEY  (`sort_referer_id`),
  KEY `user_id` (`user_id`),
  KEY `keyword_id` (`referer_id`),
  KEY `sort_keyword_clicks` (`sort_referer_clicks`),
  KEY `sort_keyword_leads` (`sort_referer_leads`),
  KEY `sort_keyword_signup_ratio` (`sort_referer_su_ratio`),
  KEY `sort_keyword_payout` (`sort_referer_payout`),
  KEY `sort_keyword_epc` (`sort_referer_epc`),
  KEY `sort_keyword_cpc` (`sort_referer_avg_cpc`),
  KEY `sort_keyword_income` (`sort_referer_income`),
  KEY `sort_keyword_cost` (`sort_referer_cost`),
  KEY `sort_keyword_net` (`sort_referer_net`),
  KEY `sort_keyword_roi` (`sort_referer_roi`)
) ENGINE=MyISAM;

2. Make a backup of top.php in the tracking202/_config folder
3. Copy all files to places where they belong (all from tracking202 folder from this mod to tracking202 folder on server)

Preview

Enjoy!