Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Optimizing images in WordPress to improve site performance and sSEO
Ähnlich wie Optimizing images in WordPress to improve site performance and sSEO (20)
Mehr von Steve Mortiboy
Mehr von Steve Mortiboy (10)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Optimizing images in WordPress to improve site performance and sSEO
- 1. Optimizing Your Images to Improve Site Performance and SEO By Steve Mortiboy
- 2. What We’ll Cover • Embedding images in content • Image optimization • Image SEO • Images for social media • Image caching and content delivery
- 4. Embedding Images - Considerations • File type • File size • Image dimensions • Image resolution • Number of images per page • Linking the image • Ownership / Copyright
- 5. Image File Types • JPEG – Great for color images Great for photographs Smaller file size • PNG – Great for logos and background images • GIF – Great for animated images
- 6. Image File Size • The smaller the better • Don’t compromise image quality • Preferably less than 100KB • Consider how many images are on you page
- 7. 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
- 8. 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
- 9. Images Per Page The more images on a page, the more you need to 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/
- 10. Image Linking • Media File • Attachment Page • Custom URL • None
- 11. 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/ • Using an image with attribution • Stock photos
- 12. 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
- 13. 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
- 14. Retina Images • Retina displays are common on iPad and iPhone • Retina images should be double the displayed size • Plugin method: WP Retina 2x https://wordpress.org/plugins/wp-retina-2x/ • Use SVG image files • HTML method: <img src=“image-800x600.png" width="400" height="300”>
- 15. Image SEO • Image filename • Title attribute • ALT text • Attachment page • Include images in your XML sitemap
- 16. Images for Social Media
- 17. Image Sizes for Social Media • Facebook images should be 1200px by 630px • Twitter images should be 900px by 450px • Pinterest images should be 236px x scaled height • Instagram images should be 1080px by 1080px
- 18. Image caching and CDN • JetPack Photon (http://jetpack.me/support/photon/) • WP Super Cache • W3 Total Cache • MaxCDN • Amazon CloudFront Test using Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/
- 19. Questions?
Hinweis der Redaktion
- WordPress makes is really easy to add an image to your site. But because it’s so easy, we sometimes forget that images have a big effect on site performance and SEO In this session we’re going to discuss these considerations, including the following: What to think about when you’re adding an image to your content How to optimize your images for the best appearance and performance What to do to an image to improve your on-page SEO What to consider when sharing content on social media How to improve site speed through caching and content delivery
- I’m sure everyone is familiar with how to add an image to a page or post Click the Add Media button Drag and drop your image into the image upload popup Or select an image from you Media Gallery But how often do you do this without thinking about the type of image file or size or dimensions of the image file or the name of the image file If you don’t think about these things you could embed your image and then your page loads slower Or you embed your image and it extends past the content area and overlaps a sidebar
- So lets look at what we should think about before we upload our image First and foremost is the file type
- WordPress allows you to upload a few different file types including JPEG, PNG and GIF Most of the time we just upload what we have and don’t consider the differences between these file types JPEG is the optimal file type for photographs because it is high in detail and color and the file size can be made smaller through compression PNG is great for graphics such as logos and background images, and especially for images where you need a transparent background but the file size tends to be larger GIFs are great for animated images
- Next, we need to consider file size The general rule of thumb is make the image file size as small as you can without compromising the image quality We’ll discuss this in more detail shortly
- Next, we want to consider the image dimensions, this is the width and height of the image When you upload an image, WordPress will create different image sizes from the original image You can control these sizes under Settings, Media, Image Sizes Just bear in mind that WordPress can’t increase the size of an image or change the image ratio so if you upload an image that is 800 pixels wide by 400 pixels high then WordPress cannot create the large size which by default is 1024 pixels by 1024 pixels and it can’t create a square image from a rectangular image So in this case it will create the medium size image which will be 300 pixels wide by 150 pixels tall and it will create a cropped thumbnail image which is 150 pixels by 150 pixels One overlooked feature is when you edit an image you can set a custom size This means we can set any size we want but if we set a size that is larger than our original image we will see distortion and loss of quality Don’t try to fit a 1000 pixel wide image into a content area that is 600 pixels wide
- Next up is image resolution, often referred to as dots per inch DPI or pixels per inch PPI Many people will tell you that DPI or PPI matters, it does not unless your image will be printed DPI and PPI resolution only applies to printing, it does not apply to screens It does however affect file size so when we compress an image using Photoshop or other tools then usually the PPI is reduced If you want more detail on this please Google the term “the myth of 72 DPI”
- Remember to consider that the more images you add to a page or post, the more you need to consider file size Don’t be that person that adds 20 large PNGs to a post and ends up with a post that’s over 4MB in size and takes 45 seconds to load on a mobile device on 3G Consider using a plugin that adds a gallery or slideshow that loads images as they are viewed instead of at the time of page load
- Another overlooked option when you embed an image is where you link the image to This controls what happens if someone clicks on the image It’s useful if you want to embed a small image and have someone click it to see the larger more detailed image There are four choices: Media File – When someone clicks on your image, this will open the image file in your browser displaying the full size image Attachment Page – When someone clicks on your image, this will open the attachment page which displays the large image with additional information such as the image name. The attachment page can be modified and styled, it’s a template in your theme, it can display EXIF data about your image Custom URL – This is useful if you want to link an image such as a button to another page None – If there’s no reason to click on the image then select this option
- How many of you have searched Google for an image and then used it on your site? We think because it’s out there and free, we can use it Images are created by someone and owned by that person They are copyrighted works and can be licensed for use by others There are different types of licenses covering usage One common license for images is Creative Commons This license can be used by anyone to cover the right to use their images Creative Commons has a search tool you can use to search sites such as Google and Flickr for images The image should specify whether you can use the image for noncommercial or commercial use, reuse with or without attribution, and reuse with modification Attribution means you have to state the owner of the image and whether the image is copyrighted, amongst other possible information The alternative to using your own photos, or free photos under license from others is to use stock photos from a site such as istockphoto.com
- We know understand that image file sizes affect page load and the smaller the image the better We can use a number of paid and free tools to reduce the size of an image file but there are some important factors to understand Lossless compression is the method of reducing the file size of an image without reducing the quality of the image Lossy compression is the method of reducing the file size but potentially reducing the image quality The advantage of lossy over lossless is that in some cases a lossy method can produce a much smaller file than any lossless method Modern lossy compression technology often reduces file size significantly before any degradation of image quality is noticed For this reason, many methods available use lossy compression How much you can compress an image always depends on the original image
- Here are just some of the tools that are available Some are paid software such as Photoshop Some are free online services Some are plugins, free and paid I recommend you compare each solution to find which works for you
- Retina is a type of high definition screen used on devices such as iPhones and iPads Images displayed on these devices can look low resolution and can make your site look bad The rule of thumb is that an image for Retina should be double the size of the displayed image For example, I have an image on my site that is 400 pixels by 300 pixels so the Retina image should be 800 by 600 There are three methods we can make our images Retina ready We can use a plugin such as WP Retina 2x which creates Retina images from your images and displays them on Retina devices We can use SVG image files instead of JPG or PNG but WordPress doesn’t support SVG as a file format in the Media Library so we have to use a plugin or some custom code to add SVG support in WordPress We can use HTML when we embed an image to control the displayed size In the example above our image is 800 pixels by 600 pixels but we’re constraining the image to 400 pixels by 300 pixels on a normal screen
- Images are great for on page SEO but in order to realize the benefits you have to put in the work The first thing to do is rename your image before you upload it to WordPress If your image file is called DSC0123.jpg then that means nothing to Google But if your image file is called wordpress-development-services-raleigh.jpg and we’re optimizing our page for that term then this will really help Remember that if you’re using the same image on different pages then upload a new image to each page with the optimal file name for each page, don’t use your wordpress-development-services-raleigh.jpg image on your design page, upload an image called wordpress-design-raleigh.jpg instead Set the Title attribute of the image after you’ve embedded it into your page or post Set the Alt text of the image after you’ve embedded it into your page or post The Title attribute and Alt text can include the same term or different terms The Title attribute is displayed on the attachment page so make it friendly to a visitor If you need to link your link then use attachment pages instead of linking to the media file, this is because attachment pages can include additional SEO information which you can set using a plugin such as All in One SEO Pack Include your images in your XML Sitemap, you can do this easily with All in One SEO Pack Remember to optimize the images on each page or post specifically for the term you are writing about and want to rank for, don’t optimize all images with the same term
- You may have noticed that when you Like, Share or Tweet a post or page, Facebook or Twitter may display an image along with a title and description This is controlled using something called Open Graph meta You can control this meta using a plugin such as All in One SEO Pack You can select which image from your post or page you want to be displayed or you can upload a specific image to be displayed It’s important to remember that many social media networks cache information about your site for up to 7 days and this can affect which image is displayed when your post or page is shared
- Another thing to remember is that these social networks have rules about the minimum and optimal size of images you should use For example, Facebook wants images to be no less than 600 pixels wide by 315 pixels high but the prefer it if images are 1200 pixels by 630 pixels Here’s a list of the optimal sizes for each social network
- Finally, if your website is image heavy such as a photography site and you want to improve the speed of your site then consider caching and content delivery There are some great plugins for caching such as WP Super Cache and W3 Total Cache For content delivery take a look at the Photon module in JetPack Alternatively you may want to consider a paid service such as MaxCDN or Amazon CloudFront I strongly recommend you test any image heavy pages or posts using Google’s PageSpeed Insights tool first and see what they report and recommend Consult an expert if you need help in this area as it’s a complicated topic and you can easily get overwhelmed and damage your site