Images & WordPress

Before uploading images or photos to a website, they need to be checked and optimized. This is important not only to avoid long downloads – especially important when viewed on alternate media  – and can to boost SEO results.

Things to consider and optimize as needed:

• The actual size of the image in pixels – set it at the largest size it may be viewed on screen, but NO larger!
• The actual file size in kb’s. Images should be run through an optimizing process that will convert the resolution to 72 dpi.
• The image color space needs to be RGB, (sRGB) or “index” for .png’s.  Most photos will be RGB. (CMYK is used for print.)
• Best file format options are .jpg, .gif and .png.
  • .jpg: best for photos and any graphic that has gradient colors. No transparency.
  • .gif: best for graphics with flat areas of color and animated gif’s. Transparency possible.
  • .png: suitable for both gradient and flat images, used more now. Transparency possible.

When an image needs a transparent background, a “matt” has to be set, this is a color closest to the anticipated background color that will show behind the image.

Process:

Check the image file properties. In Windows right-click an image and chose Properties. The “General” tab will show the file size, the “Details” tab will show the pixel dimensions. If the image is already 72 dpi or 92 dpi, and the pixel width is no larger than an “average” screen width of 800px, and the file size is under 300-kb or so, it may be ok to use as-is. But if the image is much larger, in weight or pixel size, it will need to be optimized.

Graphics editing software is useful to have, top choice is PhotoShop, but there are cheaper alternatives. The software has to be able to reduce the resolution, edit the pixel size, and optimize (compress) the file, and save as one of the chosen file types, without too much image quality loss. Each image should be optimized individually for best results.

Too much compression and pixelation starts to appear – too little compression and the file size is larger than necessary.

Never up-size a “too-small” image file in HTML pixel dimensions, it will look terrible.

Online options:

http://www.imageoptimizer.net/Pages/Home.aspx http://tools.dynamicdrive.com/imageoptimizer/
http://jpeg-optimizer.com/
http://mashable.com/2013/10/29/image-compressors/

There are also image optimizer plugins for WordPress, which will automatically reduce the file size.  Some are mentioned on this site:
http://premium.wpmudev.org/blog/10-best-image-optimization-plugins-to-speed-up-your-wordpress-site/

If your site has large images where quality is important, and you anticipate these being viewed on ‘Retina’ displays, this plugin will create duplicate images to be served when viewed in media with Retina display:
http://www.meow.fr/wp-retina-2x/