Optimizing Images for the Web

Why Optimize?

An optimized website is essential for a positive user experience and for hosting cost savings. Images account for the majority of data transferred on a webpage and thus must be optimized.



What is image optimization?

Start with only the Best Images

Always start with selecting the best quality images for your webpage. Good writing accompanied by good photos creates a satisfying harmony on your page.

Condense your images in dimension and file size

Optimizing your images calls for the following:

  • Physical dimensions - the width and height in pixels . ( See Appendix A )
  • File size / Storage - measured either in KB (kilobytes) or MB (megabytes).
  • Preserving proportions - Images should never be stretched or distorted.
Preserving Quality while reducing Quantity

Avoid sacrificing the image quality while reducing file size - watching out for what is commonly referred to as image pixelation ( See Appendix B for information about pixelation).

JPG, GIF, PNG file types...what is the difference?

Use the file type - JPG, GIF, and PNG - that is most appropriate for the image:

  • .JPG: Expansive color palette for photographs. Does not support transparency
  • .GIF: Limited 256 color palette. Solid-colors, line art, clip art. Supports transparency
  • .PNG: Expansive color palette; Supports transparency; Considerably large file sizes
The Art and Science of Image Optimization

The task of image compression is not just dropping the file size and/or the image dimensions but it also requires maintaining a balance between an acceptable image quality while reducing the file size. In some cases applying the same image optimization settings for all of your images may not yield the same desirable results. In those instances, re-working the settings to achieve that acceptable quality and low file size may be required.




Products for Optimizing Images

There are many products, both software and web-based for optimizing images. Here is a selection of some from which you could choose:


Legal Considerations

Only use content and/or images from another site with permission. If you are going to search the web for images, use Google Advanced Image search and the “usage rights” option to find copyright free images. Provide the source as a caption once permission has been obtained.


Appendix A - Image Size Standards

Standards for optimizing images on the GOARCH.org website Optimizing an image involves knowing how the image will be used. Consider the following uses:

For big images
  • Use: Appears at the top of the homepage on templates 5 & 6
  • Orientation: Landscape required
  • Image size: 1200 pixels wide by 630 pixels high
  • File size: Up to 150 KB is acceptable

View an example of a big image

For carousel images
  • Use: Appears within the carousel which is available for all templates
  • Orientation: Landscape required
  • Image size: 1280 pixels wide by 523 pixels high
  • File size: Up to 100 KB is acceptable

View an example of a carousel image

For lead images
  • Use: Typically appear at the start of an article
  • Dimensions: Landscape preferred
  • Image size: Less than 730 pixels wide by 383 pixels high
  • File size: Up to 100 KB is acceptable

View an example of a lead image

For images within content
  • Use: Enhancing your page content adding to visual interest 
  • Dimensions: Portrait or landscape
  • Image size (portrait): Less than 393 pixels wide by 700 pixels high
  • Image size (landscape): Less than 700 pixels wide by 393 pixels high
  • File size: Up to 75 KB is acceptable

View an example of images within content

For button images
  • Use: Used in the right-hand or left-hand columns on your site
  • Image size: Less than 336 pixels wide by 280 pixels high
  • File size: Up to 50 KB is acceptable

View an example of a button image


Appendix B - Avoiding Pixelation

The original image is extremely large in file size. We will attempt to reduce its file size while preserving its quality.

 

Fig. 1: As a result of the low compression setting the image has increased “pixelation”. Pixelation is when large blocks of color are grouped together in order to provide a lower file size but also reduce the quality of the image making it unacceptable for presentation.

 

Fig. 2a: Image quality reduced to 50% provides a clear image but the file size, though considerably lower, still is not where it needs to be.

 

Fig. 2b: Image quality reduced to 20% still provides a clear image while also providing the file size that we need. The pixelation that has occurred as a result of the reduced file size is so small that it is almost unnoticeable.


Appendix C - BIRME

BIRME (https://birme.net ) is a free web-based app which offers the option to either process a single image or batch processing - that is, optimization of more than one image at a time. For an option with more advanced features, check out BeFunky.

  1. Visit https://birme.net/ and click the BROWSE FROM YOUR COMPUTER button.
  2. Navigate to the folder on your computer with the images that you would like to use.
    1. Select all of the images in that folder by pressing ⌘ command+A (Mac) or CTRL+A (Windows) on your keyboard.
    2. Click the Open button in the bottom of the window.
    3. Your images will appear on the page. You can remove images by clicking the X in corner of each image or add more images by clicking ADD MORE FILES .
  3. On the right-hand side of the page, making sure that both the Auto Width and Auto Height boxes are unchecked, set your desired image width and height.
  4. Most images uploaded to BIRME will have a shaded area that indicates how the image is going to be cropped. The shaded area will be omitted when optimized. Placing your cursor in the unshaded area, holding down on the left mouse button, and dragging will allow you to adjust the focal area of the image and edit the crop.
  5. Click the IMAGE FORMAT & QUALITY button and set the desired quality percentage. The lower the number the lower the quality of your image. Here are some examples:
    1. 100%, no compression sets the quality at its highest which will produce an image with a very high file size.
    2. 0%, heavily compressed (fig. 1) sets the quality at its lowest which will produce an image with a low files size but that is also unacceptable in its presentation.
    3. A setting between 20-50% (figs. 2a & 2b) should deliver an image that has an acceptable file size and that also displays an acceptable image quality.

Once you have set the desired image quality, click the SAVE AS ZIP to optimize and download your images in one data file, or the SAVE FILES button to optimize your images and save them each to your local computer.


Appendix D - BeFunky

BeFunky ( https://www.befunky.com/create/ ) offers an advanced collection of tools to process your images. Most options are free to use, including those needed for simple optimization. Directions for using BeFunky’s Crop and Image Quality Tools

  1. Visit https://www.befunky.com/create/ and click the Open link at the top of the window to select one of your images from your local machine.
  2. Click the Edit button on the left-hand side of the page to open your Edit palette.
  3. Click the Crop button in the Edit palette and enter in your desired dimensions. Placing your cursor in the unshaded area, holding down on the left mouse button, and dragging will allow you to adjust the focal area of the image and edit the crop.
  4. Click the Resize button in the Edit palette to shrink down the overall dimensions of your image. Images should always be resized proportionally.
  5. Click the Save button at the top of the page to export your optimized image to your local computer.
    1. Make sure that JPG is selected as the Format.
    2. Use the Quality slider to select the desired quality percentage. Notice that as the slider is moved across the line how the file size is affected. Refer to image quality examples in the previous section.
    3. Click Save.

You may choose to use some of the image retouching tools, image effects and filters, or graphic text tools that BeFunky offers to enhance your photos. Note that some of the tools may be locked requiring an upgrade to the paid version in order to use them.

 

 

Composed by the Department of Internet Ministries Email: internet@goarch.org | Voice: (646) 519-6624

 
CONTACT US

900 6th Street
Sioux City, IA 51101

Phone: (712) 255-5559

SUBSCRIBE TO OUR EMAIL LIST
*REQUIRED*