Sizing images

One of the biggest and most common culprits of poor site performance and slow page loading speeds is the use of poorly optimized images. If somebody else is managing your web content, odds are they are doing a good job at keeping your images optimized. However if you are managing your own content – something that is eminently plausible with a content management system – it will be YOUR responsibility to optimize your images. Almost any image should be prepared before it is used on your website, and that there are open source tools that make doing this preparation pretty straight forward. A good one is GIMP available for download here.

Here are the steps to size an image using GIMP:
Step 1:Open Gimp, then select & open a file
Step 2:The file will open in its’ default state (note: the zoom function will automatically fit the image in the screen space allowed)
Step 3:Select => Image => Scale image (you will be presented with a popup) => set desired pixel size and dpi (72 for the web) => Scale
Step 4:=> File => Save As (choose destination via popup) => RENAME => set “quality” from default to 75%
This process took a source image that was 5688kb in size and reduced it to 38kb!


Image file editing using the pixlr tool
1) Navigate to apps.pilxr.com/editor and you will see this screen:
starting-screen
Select “open image from computer”. Navigate to image in your file structure, select it and it will be available for editing:

There are 2 file size settings:
The actual image size in pixels (set via => image => image size)
* it is best to make sure that you enable the “constrain proportions” check box
image-size
Related to the physical proportions is cropping of the image.
1) Select “output size” from constraint drop down
2) Set desired width and height in relevant fields
3) Using the crop tool draw over desired region
4) Hit enter on keyboard
5) Result will be of desired dimensions
cropping
It is very important to also set the file size of an image. Optimally the size of an image should be no more than 50kb.
To do this :
=>File
=>Save
=>Then you will see this display:
file-size
Adjust the “quality” slider or numeric value until the image is of the desired file size.
Then save to an appropriate section of your computers’ hard drive.
Remember to save this adjusted image as a different file name!
ONCE ALL THE STEPS ABOVE ARE COMPLETE, YOUR IMAGE WILL BE READY FOR UPLOAD & USE!