SLIDE 1
WordPress Users Group Manchester, NH July 13, 2015 “Preparing Images for the Web” Daryl Johnson SvenGrafik
SLIDE 2 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.
SLIDE 3
VECTOR vs. RASTER
SLIDE 4
VECTOR vs. RASTER
SLIDE 5
VECTOR RASTER EPS TIFF SVG BMP JPG GIF PNG WEBP
SLIDE 6
VECTOR RASTER EPS TIFF SVG BMP JPG GIF PNG WEBP
SLIDE 7
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
SLIDE 8
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
SLIDE 9 GIF Pros of GIF: — Can support transparency — Can do small animation effects — Great for images with limited colors,
- r 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.
SLIDE 10
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.
SLIDE 11
WebP Created by Google. New Format similar to JPG. Has anyone worked with this file format?
SLIDE 12
BMP 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
X
SLIDE 13
TIFF 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.
X
SLIDE 14
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.
SLIDE 15 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.
SLIDE 16
SLIDE 17
SLIDE 18
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
SLIDE 19
IMAGE PREPARATION TOOLS Adobe Photoshop Adobe Fireworks Corel PaintShop Pro FREE: Irfanview Picasa GIMP Photofiltre FastStone
SLIDE 20
QUICK TIPS: EDITING: UNSHARP MASK Filter > Sharpen > UnSharp Mask Use Preview to Test this to make sure you don’t go over- board.
SLIDE 21 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
— Can’t see these edges when logo is placed on background in site.
SLIDE 22
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
SLIDE 23
Happy Imaging!
