Optimizing Images for the Web

What is image optimization?

Image optimization is about reducing the file size of your images as much as possible without sacrificing quality so that your page load times remain low. It’s also about image SEO. That is, getting your product images and decorative images to rank on Google and other image search engines. 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.

Where To Begin

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 optimization requires maintaining a balance between an acceptable image quality while reducing the file size. Images which have not been properly optimized can cause storage and performance issues and contribute to a degraded user experience.

In many 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 and carousel images

  • Use: Carousels appear at the top of the homepage on all templates;
    big images are found on the homepages of templates 5 & 6 and used at the top of the content pages in templates 6, 7 & 8

  • Orientation: Landscape (wide) required

  • Image size: Maximum of 1500 x 774 pixels and a minimum of 1200 x 630 pixels

  • File size: Up to 150 KB is acceptable

View an example of a big image
 

For information card images

  • Use: Appears within the carousel on the site homepage

  • Orientation: Landscape (wide) required

  • Image size: 600 x 315 pixels

  • File size: Up to 150 KB is acceptable

View an example of a new carousel image
 

For lead images

  • Use: Typically appear at the start of an article

  • Orientation: Landscape (wide) required

  • Image size: Maximum of 1500 x 774 pixels and a minimum of 1200 x 630 pixels

  • File size: Up to 150 KB is acceptable

View an example of a lead image

 

For button images

  • Use: Used in the right-hand or left-hand columns on your site

  • Image size: No greater than 1080 x 1080 pixels

  • File size: Up to 100 KB is acceptable

View an example of a button image

 

Images within content
Though including images and photos within your site's pages and articles add to your site's visual interest, care should be taken to add the right images. If other images or photos are needed to accompany an article, you may consider using:

  • Landscape photos (wide - 1200 x 630 pixels): placed these images between paragraphs in text-heavy, articles

    • File size: Up to 150 KB is acceptable

  • Portraits or vertical photos (tall): should be justified to the left of the body text allowing the text to wrap around it

    • File size: Up to 100 KB is acceptable

View an example of images within content

 

For carousel images (for OLD TEMPLATES)

  • Use: Appears within the carousel on the site homepage

  • Orientation: Landscape required

  • Image size: 1024 pixels wide by 576 pixels high

  • File size: Up to 100 KB is acceptable



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: [email protected] | Voice: (646) 519-6624