Optimizing images in WordPress to improve site performance and SEO by Steve Mortiboy

Optimizing Your Images to Improve Site Performance and SEO

By Steve Mortiboy

Considerations

• Embedding images in content• Image optimization• Retina images• Image SEO• Images for social media• Image caching and content delivery

Embedding Images

Embedding Images - Considerations

• File type • File size • Image dimensions• Image resolution• Number of images per page• Linking the image• Copyright

Image File Types

• JPEG – Great for color imagesGreat for photographsSmaller file size

• PNG – Great for logos and background images

• GIF – Great for animated images

Image File Size

• The smaller the better• Don’t compromise image quality• Preferably less than 100KB• Consider how many images are on you page

Image Dimensions

• Width and height in pixels• Control default sizes in Settings, Media

https://codex.wordpress.org/Settings_Media_Screen• WordPress cannot increase the size of an image• Only thumbnails are cropped • You can customize the size of any image after it has

been added to a page or post• Beware oversized images

Image Resolution

• Dots per inch (DPI)• Pixels per inch (PPI)• Only applies to printing• Affects image file size• The Myth of 72 DPI

http://photoshopessentials.com/essentials/the-72-ppi-web-resolution-myth/http://scantips.com/no72dpi.html

Images Per Page

The more images on a page, the more you needto consider file sizes and page load times

Remember your mobile device users!

Consider using a gallery or slideshow such as- JetPack Tiled Galleries http://jetpack.me/support/tiled-galleries/- JetPack Carousel http://jetpack.me/support/carousel/

Image Linking

• Media File• Attachment Page• Custom URL• None

Image Ownership

• Free photos• Just because you found it doesn’t mean you

can use it• Images can be copyrighted and licensed• There are different types of licenses• Creative Commons search tool

https://search.creativecommons.org/• Use with attribution• Stock photos

Image Optimization

• Lossless compression reduces file size without losing quality

• Lossy compression reduces file size with possible loss of quality

• Goal is to reduce a 2MB image to 100KB• It always depends on the original image

Image Optimization Tools

• Adobe Photoshop - Save for Web• ImageOptim for Mac (https://imageoptim.com/)• TinyPNG (https://tinypng.com/)• JPEGmini (http://www.jpegmini.com/)• EWWW Image Optimizer plugin

Retina Images

• Retina displays are common on iPad and iPhone• Retina images should be double the displayed size• Plugin method: WP Retina 2x• Use SVG image files • HTML method:

<img src=“image-800x600.png" width="400" height="300”>

Image SEO

• Image filename• Title attribute• Alt text• Attachment page• Include images in your XML sitemap

Images for Social Media

Image Sizes for Social Media

• Facebook images should be 1200px by 630px• Twitter images should be 1024px by 512px• Pinterest images should be 735px by 1102px• Instagram images should be 1200px by 1200px

Image caching and CDN

• JetPack Photon (http://jetpack.me/support/photon/)• WP Super Cache• W3 Total Cache• MaxCDN• Amazon CloudFront

Test using Google PageSpeed Insightshttps://developers.google.com/speed/pagespeed/insights/

Questions?

Steve Mortiboy

Sales [email protected] | @wpsmort

Semper Fi Web Design• Support• Security• Performance

• Development• Design• SEO

http://semperfiwebdesign.com