13 May Guidelines – Images on the FHA Website
Anyone who creates content for the FHA website should be aware that properties of the image can have implications for website storage, article load times and sometimes, suitability for emailing. Therefore, the webmaster is promulgating the following guidelines for images intended for use on the website. These guidelines will also help anyone who creates documents using MS Word.
{slider title=”Click to Read Analysis” class=”icon'” open=”false” }
First, some terminology. You may know that computer images are comprised of tiny dots called picture elements, or pixels for short. The pixels in an image are arranged in a rectangular grid like eggs in a carton. An image’s size is defined by three numbers: The number of pixels across the width of the image, the number of pixels down the height of the image. and the number of pixels per inch, abbreviated DPI, or dots per inch. For example, take an image that’s726 pixels wide by 319 pixels high, with DPI = 96. Then the display size of the image is 726÷96 inches wide by 319÷96 inches high, or about 7.56 in. wide by about 3.32 in. high.
Pixels in an image have another attribute: color. The color attribute is a numerical value. For a monochrome (black and white) image, a pixel color could be either 0 (black) or 1 (white). for a “greyscale” image, the number could be between 0 and 7 (all black to all white – as coarse gradation) or 0 to 256, for finer gradation. Color images in times gone by had three colors – red, green, and blue, with 8 levels of intensity (off to full-on) for each of the three colors. The earliest color computers used this color coding, sometimes coded as rgb(red value, green value, blue value), e.g., rgb(0,3,5) for this blue-green. Most web images today have 256 gradations of each of red, green and blue. When expressed in bytes, then, each full-color pixel needs 8 bytes to fully describe its color. Going back to the image in the previous paragraph, our 726×319 image would require almost 1.9 BILLION bytes to store it.
Fortunately some smart people over the years have devised what are called compressed image formats. ( “jpg” is one you have probably encountered.) These work by starting with the assumption that usually, all the pixels near a given pixel are the same color as the one they surround. And if they are, you don’t need to save the same color coding over and over: you just count how may identical pixels in a row following a given colored pixel, and store the color code and the count. A number of increasingly sophisticated compression schemes have evolved over the years. The latest is called “webp” (web picture) and represents a significant improvement by reducing the size of images at rest (on your hard drive or our servers) and in motion (when you email them or you download them from our website.
If you’re interested, this Wikipedia article is a place to start learning about image processing and editing.
{/sliders}
First, you need a simple photo editor. Not Photoshop (or its free equivalent, GIMP). I recommend Irfanview – https://www.irfanview.com/ for resizing. Display an Image, Ctrl-R, tell it the width and resolution, and save the image. Install the 32- or 64-bit version, depending on your computer. If you aren’t sure, the 32-bit version works on either. Install the corresponding extensions package as well. This program will read almost any image format, and can Save as… most formats as well.
Before you start, you need to decide on the size of the image that will appear in your document – in inches or centimeters – that you want its width to be in yur document. If you are replacing an old image, just measure it. For a new one just estimate the needed width. (It’s height will be determined by the software.)
Next, open Irfanview and then open the image you want to use in Irfanview. When it appears, type Ctrl-R (or with the menus, choose Image->Resize/Resample). A dialog box will appear similar to the one at the right.
in the “Width” box, insert the width you want it to have in your document. The height will be calculated automatically.
In the DPI (dots per inch) box, if the number there is 100 or less, leave it. if it’s over 100, change it to 96. That DPI will display prefectly well on any computer or other device screen.
Then choose from the top menu File->Save as… (or just type “s”) and your “save as” box will open (system-dependent appearance!). Save the file wherever you want but be sure to make the “Save as type” = WEBP – Webby File Format.
Now you have your file resized and saved as small at it can get, and you can insert it into your website article or your Word document.
The saved webp image file only takes up 27 KBytes – compared to 157 KBytes in the original jpg file – about an 86% reduction – and we didn’t even resize it. So this is really a significant improvement, and we highly recommend this format and sizing for all FHA website images going forth.