Properly Use Images to Power Your Website
2 likes1,487 views
The document discusses optimizing images on websites to improve load speed and user experience. It begins by highlighting the benefits of relevant images, then discusses challenges like confusing images, copyright issues, and slow load times. Various techniques are presented for optimizing images, such as resizing images, choosing appropriate file formats, compressing file sizes with tools like PicMonkey and GIMP, and using additional compression tools. The document stresses the importance of load speed and provides tips for determining proper image dimensions and using developer tools to inspect website images. Overall, it provides guidance on how to properly use and optimize images to improve a website through faster load speeds and a better user experience.
Properly Use Images to Power Your Website
- 1. Mary Iannotti Digital Marketing Deva Boulder WordPress Meetup - June 23, 2015 How to Properly Use Images to POWER Your Website
- 2. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi The Power of Visuals 2 Views increased by 94% when an article contained a relevant photograph or infographic. “ ”Source - Skyward Study
- 3. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Bittersweet Reality of Website Visuals 3 A poorly executed visual strategy does more harm than good.“ ”Here are a few of the challenges…
- 4. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi After Adding Website Visuals… 4 What is the point behind this image? #confused Your audience is confused. Image by: Steven D. Palmer
- 5. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi After Adding Website Visuals… 5 You realize your images are used all over the web.
- 6. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi After Adding Website Visuals… 6 It takes too long for your website to load.
- 7. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi 7 There are ways to prevent these problems from happening.
- 8. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Good Visuals Reinforce Your Message 8 This image appeared next to a story about desert ideas. Image by: Chef Dennis Littley
- 9. Great Visuals Make an Emotional Connection Check out 60 Public Service Ads for inspirational images that create emotional hooks.
- 10. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Customize Stock Images 10 Stock Photo Customized Version View a list of non-stock photo sources here.
- 11. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Add Branding Elements to Images 11 Image by: Paul Biedermann Classy example of visual with logo and branding.
- 12. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Free Photo Editing Tools 12
- 13. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi PicMonkey 13 picmonkey.com
- 14. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi GIMP 14 gimpusers.com/downloads
- 15. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Optimize Images to Improve Website Load Speed 15
- 16. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Website Load Speed 16 Length of time it takes for a visitor’s web browser to request a page from your web server, and for all page elements to appear in the browser.
- 17. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Load Speed Matters 17 It Controls How Soon Visitors See Your Welcome Message It’s a Component of Your Customer Service It Influences Your Brand’s First Impression
- 18. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Image Dimensions | Image File Size 18 Image Dimensions Image File Size 1500 pixels 465 pixels The length of a computer file in bytes. The size of this file is 421 kb.
- 19. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Website Load Speed Results 19 It took 1025 ms for that 421 kb image file to appear in a web browser.
- 20. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Image Optimization Affects Load Speed 20 Reducing Image File Size Decreased Load Time by 26%! Original load time: 2.74 seconds. Load time after optimization: 1.99 seconds.
- 21. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Image Optimization Techniques 21 There are four lines of defense you can use to safeguard your website load speed from large image file sizes. • Use the right image dimensions. • Select the right file format - JPEG or PNG. • Compress image file sizes with a photo editing tool. • Use additional tools to compress large file sizes even further.
- 22. The dimensions of your image should be NO BIGGER than the largest size you’ll use on your website. Resize large images. Properly Size Images
- 23. Step1 - consult theme documentation. If that doesn’t work, move on to step 2. How to Determine Correct Image Dimensions for WordPress Sliders
- 24. Step 2 - Use Web Browser Developer Tools 1. Install Developer Tools browser extension. 2. Visit theme demo. 3. Right click on image. 4. Select Inspect Element. 5. Dimensions appear below browser window. Step 2 - Use Web Browser Developer Tools
- 25. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Use the Right Image File Format 25 JPEG • Lossy data compression. • Generally smaller file sizes than PNG. • Commonly used for photographs. PNG • Lossless data compression. • Generally larger file sizes than JPEG. • Ideal for transparent backgrounds, circular images, and screenshots.
- 26. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Use Photo Editing Tools to Compress Image File Sizes 26
- 27. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi How to Compress JPEG Files With PicMonkey 27 Select Roger, Pierce, or Sean. Roger = smallest file size and lowest quality. You can’t compress PNG files with this tool.
- 28. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi How to Compress JPEGs With GIMP 28 Slide the Quality scale to compress JPEGs. Lower quality = smaller file size.
- 29. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi How to Compress PNGs With GIMP 29 Slide Compression level to adjust file size. Lower compression level = smaller file size.
- 30. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi How to Compress JPEGs With Photoshop 30 Slide the Quality scale to compress file size, lower quality = smaller file size. Preview image to make sure quality level is acceptable.
- 31. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi How to Compress PNGs With Photoshop 31 Choose between PNG-24 and 8 to compress file size. PNG-8 - smaller file size, lower quality.
- 32. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Additional Image File Compression Tools 32
- 33. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi Compressor.io 33 Browser-based file compression tool. The bomb for compressing PNG files. Find it at compressor.io/compress
- 34. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi ImageOptim and ImageAlpha 34 Only for Apple ImageOptim Compresses JPEGs ImageAlpha Compresses PNGs imageoptim.com pngmini.com
- 35. Mary Iannotti | digitalmarketingdeva.com | #boulderwp @maryi FileOptimizer 35 Find it at here. Only for Windows
- 36. Image Optimization: A Non-Techie’s Way to a Faster Website And More Conversions For more information and tutorials refer to this article.
- 37. Digital News 37 Subscribe to receive copywriting, conversion, and design tips that will bring in more website sales. Sign up now and get my guide – How to Get More Home Page Visitors Into Your Sales Funnel. Get The Free Guide