Tag: png

Configuring Apache webserver for browser caching of web content…

This is a HUGE topic, I’ve outlined some simple steps below as well as my initial configuration for you to start with…

NOTE: this is for simple ‘static’ content such as images, additional work is required for dynamic (program generated) content, such as that generated in PHP.

1. In ‘httpd.conf’ make sure the following line is uncommented.

LoadModule expires_module modules/mod_expires.so

2.  In ‘httpd.conf’ add the following:

ExpiresActive On
### Expire images 1 day from when they’re accessed
ExpiresByType application/java-archive “access plus 1 day”
ExpiresByType image/gif “access plus 1 day”
ExpiresByType image/png “access plus 1 day”
ExpiresByType image/jpg “access plus 1 day”
ExpiresByType image/jpeg “access plus 1 day”
ExpiresByType image/x-icon “access plus 1 day”
ExpiresByType text/css “access plus 1 day”
ExpiresByType text/javascript “access plus 1 day”
ExpiresByType text/xml “access plus 1 day”
ExpiresByType application/xml “access plus 1 day”
ExpiresByType text/plain “access plus 1 month”
 

3. (Optional) Set default expiry of content in ‘httpd.conf’:

### Expire everything else 1 day from when it’s last modified
ExpiresDefault “modified plus 1 day”

NOTE: These we’re my original settings, you may want to add attitional MIME type and expiry configurations particular to your web content.

REFERENCES:

MSIE PNG Alpha Transparency

In usual form, MSIE doesn’t directly implement Alpha-Transparency on PNG images. Typically this feature is used to allow for anti-aliased gradients on images so that they can be used to support a variety of backgrounds.

There are a variety of solutions online for this problem, however I take issue with most, here’s why:

  • .htc files – this is a proprietary Microsoft solution, to add support on most web servers the MIME type must also be added.
  • filter: progid: – this too is utilizing a standard in Microsoft’s own particular way.

While neither of these is perfect, the ‘filter:’ is obviously the best of two evils. Surround it with the “Conditional If” comments (previously documented) and you’re at least safe for most other browsers.

Here’s my example code:

<!–[if gte IE 5.5000]>
<script type=”text/javascript”>
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id='” + img.id + “‘ ” : “”;
var imgClass = (img.className) ? “class='” + img.className + “‘ ” : “”;
var imgTitle = (img.title) ? “title='” + img.title + “‘ ” : “title='” + img.alt + “‘ “;
var imgStyle = “display:inline-block;” + img.style.cssText;
if (img.align == “left”) imgStyle = “float:left;” + imgStyle;
if (img.align == “right”) imgStyle = “float:right;” + imgStyle;
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle;
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”” + “width:” + img.width + “px;height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\'” + img.src + “\’, sizingMethod=’scale’);\”></span>”;
img.outerHTML = strNewHTML;
i = i-1;
}
}
}
window.attachEvent(“onload”, correctPNG);
</script>
<![endif]–>

References:

Good luck out there!

Why .PNG?

Many of you may be questioning why my examples always use PNG images, and not GIF or JPEG…. the answer is really simple, PNG is better suited to most usage of images on the Internet. It’s well supported by most modern browsers and allows for smaller images of higher quality than is available with GIF.

Additionally, PNG offers advanced features such as GAMA correction and Alpha Transparency.

Previously there were several patents that restricted the use of GIF online, JPG has similar restrictions that are occasionally disputed. PNG has always been an open standard and as such isn’t encumbered by any legal issues.

Here’s the simple rules that I generally apply…
1. JPG / JPEG = Photo quality images.
2. GIF = Animated Images
3. PNG = Static (non-photo) Images

References: