Image manipulation

Understanding Image Resolution

The term pixel is actually short for Picture Element. These small little dots are what make up the images on computer displays.

When you create an image for your website, knowing the resolution of that image is important. If an image is greater in width than a user’s screen width, then the user will not be able to see the whole image.

Pixel Density

The PPI (pixels per inch) or DPI (dots per inch) of a computer display is related to the diagonal size of the display in inches and the total number of pixels in the horizontal and vertical directions.

Smaller devices like an Iphone 5 can display a high resolution similar to a desktop computer by increasing the number of pixels per inch. A computer monitor that has a resolution of 1680 x 1050 and is 22 inches measured diagonally will have 90 PPI. A mobile phone with a resolution of 1680 x 1050 and a 4 inch display will have 495 PPI.

Images that will be displayed on a website are usually saved at around 72 PPI. This is because many monitors display close to 72 PPI, and 72 PPI images load faster; if you have a high density or high PPI image it will be a bigger file size and load slower. However if you want to print a picture you should save it at 300 PPI.

Saving royalty free images at google image search:

Changing the width and height of an image with

  1. First Download and install the program on your computer. It is free to download.
  2. With your right mouse button right click on this link and choose save link as to save the Taj Mahal picture to your computer, that is if you didn’t already download it in the above google image search video.
  3. Start the program that you have just downloaded
  4. Open/Load the Taj Mahal image file that you have just downloaded in the program

Modifying Image Size

Cropping an Image

Modifying Canvas Size


  1. Using Google image search find an image that would match well with your website subject.
  2. Modify the image in so it is 960 pixels wide and 250 pixels high.
  3. From the dashboard, upload your image to the media library (Media->Add New).
  4. Go to the dashboard (Appearance->Header) and add your image to the header. You should get the image from the media library.
  5. Extra challenge: You may also want to experiment with adding a background image (Appearance->Background).