Embed Size (px)
Citation preview
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?
Semper Fi Web Design• Support• Security• Performance
• Development• Design• SEO
http://semperfiwebdesign.com
