Image Optimization

Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render useful content on the screen.

 

Two Types of Graphics

  • Raster Graphics: Uses individual pixels on a rectangular grid to represent an image.  Each pixel of an image is stored as a specific color.
    • Pros:  Ideal for saving photos of a complicated scene and various colors.
    • Cons:  Not zoom independent, meaning the image will be distorted or “pixelated” if scaled up.  The higher resolution of an image means more pixels which makes the file size larger.
  • Vector Graphics:  Uses lines, points and polygons to represent an image.
    • Pros:  Zoom independent; the image can maintain its resolution when scaled up.  Ideal for simple geometric shapes such as logos, text, icons, etc.
    • Cons:  Not suitable to represent a a complicated scene with various colors or gradients of colors.

 

WordPress only accepts three image file formats which are all raster graphics.  There is no single best format for all images so each file format will have to be chosen for the right circumstance.

 

File Size

JPEG files use a lossy compression algorithm which tends to make their file sizes smaller than PNG files but with a cost to image quality.  PNG files use a lossless compression algorithm which reduces the file size a bit while retaining high image quality.

File Format: .JPG File Size: 34.4 KB
File Format: .JPG
File Size: 34.4 KB
File Format: .PNG File Size: 152 KB
File Format: .PNG
File Size: 152 KB

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Transparency

JPEG files cannot be transparent while PNG files can.  What does it mean to be transparent?  Have you ever copied and pasted an image onto a dark background and the image had a white box around it?  This means that the image was a JPEG and could not be transparent.

File Format: .JPG
File Format: .JPG
PNG File Format
File Format:  .PNG

 

 

 

 

 

 

 

 

Refer to this chart when choosing which file format is best.

 

So now most importantly, how to change the file formats of images? 

The easiest way to change the format of an image is to open Paint.

  1. Click File > Open
  2. Select the photo you wish to edit
  3. Select File > Save As.  Choose the new file format that you wish to save the image as.
  4. Your image is now saved as a different file format.  Be careful with JPEG images, the compression algorithm compresses the image on every save which causes quality to be lost on every save.

 

Additional Tools:

Leave a Reply