WordPress Users Group Manchester, NH July 13, 2015 Preparing Images for the Web Daryl Johnson SvenGrafik
WHY OPTIMIZE IMAGES for WORDPRESS? 1. Page Load Times Matter to Users 2. Image Bloat Puts Search Engine Rankings at Risk 3. Slow Pages Equal Lost Revenue WHY OPTIMIZE IMAGES before UPLOADING to WORDPRESS, FACEBOOK, CONSTANT CONTACT, etc. 1. You have control over the compression, quality and size of final file seen on the browser window.
VECTOR vs. RASTER
VECTOR vs. RASTER
VECTOR EPS SVG RASTER TIFF BMP JPG GIF PNG WEBP
VECTOR EPS SVG RASTER TIFF BMP JPG GIF PNG WEBP
SVG Pros of SVG Small file sizes that compress well Scales to any size without losing clarity (except very tiny) Looks great on retina displays Design control like interactivity and filters Great for Responsive background images
JPEG Pros of JPEG: Rich colors, great for photographs and images of people Most used and most widely accepted image format Cons of JPEG: They discard a lot of data After compression, JPEG tends to create artifacts Cannot be animated Does not support transparency
GIF Pros of GIF: Can support transparency Can do small animation effects Great for images with limited colors, or with flat regions of color Cons of GIF: Only supports 256 colors It s the oldest format in the web, having existed since 1989. It hasn t been updated since, and sometimes, the file size is larger than PNG.
PNG Pros of PNG: Lossless, so it does not lose quality and detail after image compression. PNG often creates smaller file sizes than GIF Supports transparency better than GIF Cons of PNG: Not good for large images because they tend to generate a very large file, sometimes creating larger files than JPEG. Cannot be animated.
WebP Created by Google. New Format similar to JPG. Has anyone worked with this file format?
BMP X Pros of BMP: Works well with most Windows programs and OS, you can use it as a Windows wallpaper Cons of BMP: Does not scale or compress well Huge image files making it not web friendly No real advantage over other image formats
TIFF X Pros of TIFF: Very flexible format, it supports several types of compression like JPEG, LZW, ZIP or no compression at all. High quality image format, all color and data information are stored Cons of TIFF: Very large file size long transfer time, huge disk space consumption, and slow loading time.
SUMMARY ABOUT FILE TYPES JPG works best for images with gradients such as photographs. GIF are best for blocks of repetitive color including logos, line art, and illustrations with type and animations. PNG should be used to preserve partial transparency and a large amount of colors.
FILE DIMENSIONS + FILE SIZE AND HOW TO OPTIMIZE Images have file dimensions (width and height, in pixels) and file size (Megabytes MB). Compression is the process of algorithmically eliminating image information that the human eye (hopefully) cannot detect. Done correctly, you can expect to decrease your image sizes dramatically. JPEGs use lossy compression. PIXELS PER INCH & DOTS PER INCH Keep in mind that computer displays are only concerned with the number of pixels in an image. An 800 x 600 pixel image at 300 DPI will display the same as an 800 x 600 pixel image at 72 DPI on a monitor.
WHAT ABOUT RETINA DISPLAYS? Current best practice is to output two versions of your images: one at your base pixel size requirement and a 2X version for retina. For example, a 300px x 300px JPEG would also be output at 600px x 600px. When it comes to choosing which version is displayed on your WordPress site, you can either write your own solution using Retina.js or use one of the two leading Word- Press plugins to do this: WP Retina 2x Simple WP Retina
IMAGE PREPARATION TOOLS Adobe Photoshop Adobe Fireworks Corel PaintShop Pro FREE: Irfanview Picasa GIMP Photofiltre FastStone
QUICK TIPS: EDITING: UNSHARP MASK Filter > Sharpen > UnSharp Mask Use Preview to Test this to make sure you don t go overboard.
QUICK TIPS: GET RID OF LOGO HALO Place logo on same color background of final design. Save as GIF. Select color background. Delete to transparency. Artifacts of color pixels on edges remain. Can t see these edges when logo is placed on background in site.
QUICK TIPS: FAVICON File Create 64 x 64 pixel logo file (or any size in a square ratio) Upload to www.favicon.cc Preview and adjust with online tools Download your favicon.ico file
Happy Imaging!