Saving PNG files for the web using Fireworks CS5

When you save an image/photo/icon for the web you want the file-size to be as small as possible. Why… you ask, firstly it reduces the time taken to download the image (i.e. the image loads faster in the users browser), and secondly it reduces your bandwidth usage.

This little tutorial covers the basics of saving PNG files in Fireworks CS5 for use on the internet, and goes through a few different versions of the PNG format to show you their differences.
Continue reading

Changing PHP settings with FastCGI and suPHP

Recently I needed to change the upload_max_filesize for php running on one of my sites. As this can only be done in either .htaccess (when running php as an apache module) or using php.ini, I was forced to use the php.ini method.

So I created a new php.ini file and added the following lines:

upload_max_filesize = 32M
post_max_size = 64M

The post max size all ways needs to be greater than the upload max filesize other wise the upload max filesize can never be reached as it will get limited by the post max size before hand. Uploaded this to the server and I a look at the phpinfo() output. But still the post_max_size was set to 2MB.

After scouring the internet for quite a while wondering why my php.ini file was not being picked up by php running in FastCGI mode I finally discovered I had to add an extra line into my .htaccess file to tell suPHP where to find my php.ini file.

I opened up my .htaccess file directly under my web root and added the line:

suPHP_ConfigPath /<path to my public_html>/public_html

And like magic PHP picked up the new php settings and the upload_max_filesize went upto 32MB.

I hope this helps someone else having the same issue solve it far quicker than I did.

Changing The Page Position of WordPress Pages & Categtories

I decided it would be better if I had my list of pages for my new shiny blog along the main navigation area (under the title) instead of hidden away at the top of the page! So… In case anybody else wants to do the same thing I will tell you how!

Edit the file: wp-content/themes/<Your theme’s name here>/header.php

NOTE: you can either do this in your favourite text editor OR in the WordPress admin area, under Appearance > Editor

Scroll down and find the line that goes something like this:

Then find the line that goes like this:

Now if you want to swap your pages with your categories simply swap the two lines above over… Ooo an remember to save.

In my case I wanted to remove the list from right at the top of the page as I added a category widget to the right hand side of my blog (as you may have noticed), so I removed the code that went: “wp_list_categories” altogether.

That’s it… refresh your browser and like magic your list of blog pages will now be where the list of categories used to be.

Optimizing Images: Improving Your Sites Performance

Now even more important than ever, is having a fast loading web site. Google now takes this into account when ranking pages (Google Blog). As well as potentially better position on Google is the possibility of keeping more users on your site (reducing the bounce rate) and if you’re an ecommerce site, increasing the conversion rate.

Decreasing The Size of Your Web Pages

A really easy way to speed up a website is to decrease the amount of data that needs to be downloaded in order to view a certain page. Put another way, decrease the total file size of a web page (this includes all the images, css, javascript, and any other media such as Flash).

The rest of this post is going to focus solely on reducing the size of your images, I will hopefully cover other topics relating to improving the performance of a website in the next few weeks.

Making Your Images Really Small

As most web sites today rely on using a large number of images, decreasing the file size of these can instantly decrease the size of a web page and improve its performance. When I say decreasing the file size I mean decreasing it without reducing the quality of the image (i.e. lossless compression).

A couple of tools for optimizing images are:

  • Pngcrush
  • Yahoo!

Continue reading