Create SEO friendly Images for WordPress: Optimize Images for Web
Do you know that optimizing images will increase the SEO ranking of your website? Understand Image Optimization for The Web and the techniques for creating SEO friendly images.
Images are a prominent contributing factor to a website’s appeal. Images as such make up for large portions of the page data. Bloated images should be avoided for SEO optimized websites. SEO friendly images should instead be used to increase the website SEO rankings. Web developers, therefore, need to gauge Image Optimization and its benefits. Let us understand the optimization process and the techniques for applying it to web pages.
Web Pages and Image Content
Page content and size is one of the primary contributing factors to slower web page speeds. Web page sizes are growing at an astonishing speed with increasing reach of the Internet. As per recent figures, the web page size has increased by around 243% from 2010 to 2016.
Visually appealing websites contain primarily of images. Most of the images are exceedingly large in size. These account for the majority of a page’s total size or “page weight. As per the statistics for the year 2016, around 64.3% of a web page content is made up of images.
Average bytes per page by content type for July 2016 from httparchive.org
How to Optimize Website Images for Search Engines
A major portion of website content is made of images and most of them are not optimized for the web. Image-based search engines can generate additional traffic for your website if the images are optimized. As per the recent findings, 39% of people will leave a website with slow loading images (Source: Adobe). Creating Web Optimized Images is, therefore, necessary for lower page load times.
High page speeds are also a must for higher search engine rankings for your websites. Bandwidth does not have much impact. Increasing bandwidth by 300% gives only 24.6% increase in page speed.
Recent Case Study Results also enforce the importance of Optimized Web Pages:
- Ancestory.com saw a 7% positive rise in conversions. This was due to the reduction in render time of Web Pages by 68 %, page bloat by 46% and load time by 64%.
- AliExpress reduced the load time for their pages by 36%. Their orders increased by 10.5% and conversion rates by 27%.
Images Types and Formats
There are primarily two kinds of image files – Raster and Vector. Raster images are widely used on the Web. These are created with pixel-based software or using a camera or scanner. Vector graphics are created with vector software. These are used for illustrations, drawings, and images.
There are multiple image file formats for specific imaging needs:
- .jpg – The best file type for photographs it scales down well but not vice versa. The image quality is well retained after compression.
- .png – The format is useful for large dimension images with fewer colors. PNGs scale down well and are used for charts, diagrams etc.
- .gif – The gif format does not scale well. It is used for small images like icons, buttons etc.
- .svg – This is a vector file format, SVG files have very less image size and are very good at scaling.
- .bmp – BMPs are huge in size and are usually pixelated.
What is Image Optimization?
Web Image Optimization involves using the most compressed yet visually acceptable images. Optimizing images is easy but is a significant requirement for improving the website performance.
Why is Image Optimization required?
Optimizing the images enables faster loading of Web Pages. Image Optimization directly impacts the following characteristics of a website:
- Page speed: Optimized Images take comparatively lesser time for transfer from the server.
- Bandwidth: Internet bandwidth is expensive. Using bloated images costs increasing load on the bandwidth.
- SEO: The page load speed is the fourth most important criteria for Page Level Keyword Agnostic Features for search engine rankings.
How to Measure Page Load Times?
A faster loading website ensures a positive user experience. Several tools are available to measure and analyze Page Load Time. Tools like PageSpeed Insights, Pingdom Website Speed Test and YSlow measure the performance of a page. These measure page load times for a website and provide suggestions for improvement.
Optimize Images for SEO
Getting a higher Search Engine Ranking is not only using selective keywords in your content. The images should also be labeled appropriately for the search engine spiders to detect them.
SEO Friendly Images
Several techniques are available to optimize images and make them more SEO friendly. A number of image properties like size, title and alt tags are to be considered to optimize images for the Web.
Image Optimization techniques
Optimizing images does not mean simply reducing the size of the image. The image should not be poorly pixelated and blurry. A professional looking image is specifically saved for the web. It should have properly balanced quality and file size.
There are many well-developed techniques and algorithms to create optimized images. The web designers need to do a careful analysis of the image attributes and the optimal settings to use.
The common and easiest approach is to manually resize and compress images using Image Editing Software like Photoshop and Gimp.
- Photoshop offers multiple options for compressing image size while retaining the quality. The “Save for Web & Devices” dialog box can compare the original image with other compression choices.
There are also plugins like “JPEG XR”, “NVIDIA Texture Tools” and “PNG Exported” that extend the capabilities of Photoshop. Advanced users can try these for overcoming the limitations of Photoshop.
- Gimp as a tool optimizes images well with its “Export As” File option. file format. You can choose the output file format and choose its quality settings and preview the outcome.
The GIMP “Save for The Web” plugin provides additional options to optimize JPEG, GIF and PNG images.
Automated Large Scale Optimization
How to Optimize Images in WordPress
WordPress websites that look so great often use full-bleed images. These images usually have a large size, incorrect format, and poor optimization. Mobile sites also heavily depend on responsive web designs. WordPress website designers, therefore, need to develop a well-defined strategy for generating optimized images.
General Optimization Techniques
Web designers should consider the following factors and techniques to optimize images for the Web.
- Choose the right file format. Incorrect use of a heavy image format may result in size bloat.
- Resize images to match the display requirement. The WordPress built-in Image Editor provides options to change the image dimensions.
- Use cropping to retain the prominent areas and also preserve the clarity of the image.
- Lower the Image Quality by compressing the image.
- Use Lazy Loading of Images with setting priority for images. Images at the top of the page are prioritized higher. Lower images are loaded only on scrolling the page.
- Use Responsive images created with the WordPress sized as – Thumbnail, Medium, Full Size, etc. You can modify the theme to serve the alternate version of the image for device screen size.
- Provide Images on a Content Distribution Networks (CDN) that store the website on multiple servers. WordPress plugins like JetPack and W3 Total Cache plugin provide direct website integration with a CDN.
How to Optimize Images for SEO
WordPress provides image specific fields to be specified when uploading images. You should fill out these fields and not leave them as default. Add the image search keywords to these fields to enable SEO for images.
- The title of the image is displayed when the reader scrolls over the image. The title should be formatted in Title Case and should not include hyphens.
- The caption is displayed directly below the image. This is an optional field.
- Description elaborates the Title and provides more details.
- The File name should include short keywords and include hyphens for best optimization.
- Alt-Text is the most important field to describe the image. It is used by search engines, screen readers and as a placeholder when the image fails to load.
How to add Alt tags/text to Images in WordPress
Alt-Text field has multiple uses and is the most important field. For single images use primary keyword in the Alt-Text field attribute. For more than one images consider using the Latent semantic indexing (LSI) keywords in the ALT tag.
Adding Alt tags for existing images in WordPres
Step 1: Select the page to be edited and the “Edit Page” option.
Step 2: Select the Image for which Alt-Text is to be added.
Step 3: Click “Edit” option for the Image.
Step 4: The “Image Details” panel is opened.
Step 5: Edit the “Alt Text” field to add alternate text keywords.
Step 6: Click “Update”.
Adding Alt tags for new images in WordPress
Step 1: Select the “Add Media” option from the “Add New Page” or “Edit Page” tab.
Step 2: Choose the Image to be added to the page.
Step 3: The “Attachment Details” Panel is opened on the right.
Step 4: Edit the “Alt Text” field to add alternate text keywords.
Step 5: Click “Insert Into Page”.
SEO Optimized Images: Using WordPress Plugins
WordPress is well equipped with a wide range of SEO friendly options. There are lots of plugins that provide SEO capabilities for Image Optimization. There are many image optimizer tools available that ease optimizing images and also maintain the quality. Let us take a look at some of the popular plugins and optimizer tools.
SEO Friendly Image Optimizer Plugins: Comparison Chart
|Plugin Name||Active Installs||Rating||WordPress Compatibility||Alt-text Option||Resize Image Option||Compress Image Option||Lazy Load Option|
|SEO Optimized Images||10000+||4.2||4.7.2||Yes||No||No||No|
|SEO Image Optimizer||3000+||5||4.7.2||Yes||Yes||Yes||No|
|SEO Friendly Images||1000+||4||4.4.7||Yes||No||No||No|
|PB SEO Friendly Images||300+||5||4.7.3||Yes||Yes||Yes||Yes|
The SEO Optimized Images plugin provides the dynamic addition of SEO Friendly Alt-text and Title to images. The plugin does not modify the database and can be safely deactivated if not needed.
Premium Version Features:
- Support for Featured Images.
- Support for Woocommerce Product Images.
- Support for Custom Post Type Images.
- Custom Rules selectively add Alt and Title Tags to images.
SEO Image Optimizer plugin dynamically replaces the Title and Alt tag of images. All changes are done without modifying the database. The plugin also provides resize and compression settings for the image.
Some listed features of the plugin:
- SEO friendly Image Optimization.
- Insert dynamically title and alt tag for SEO friendly image.
- Compress the image size to boost site load speed.
- Uploaded Resized images for the post.
SEO Friendly Images plugin allows for automatic insertion or overrides of the ALT text and title. The plugin features can be used to increase Search Engine Rankings for all images.
PB SEO Friendly Images is used to automatically optimize all Alt-Text and Title attributes of images. The plugin provides options to:
- For all images
- SEO Proved
Other Tools for Optimizing Images in WordPress
The Smush Image Compression and Optimization Plugin for WordPress allow automatic resize, optimize and compress all images. You can strip metadata from JPEGs and optimize compression. You can convert GIF images to PNG images and also remove unused images.
TemplateToaster is a comprehensive tool for WordPress which supports all the plugins. The tool provides “Theme options” for utilizing the themes designed using the tool. These themes include the “SEO” tab by default. The tab provides additional settings to enable SEO optimizations for a theme. TemplateToaster also outputs web optimized images.
The significance of using optimized images in Web Pages cannot be underrated. It is an important aspect of increasing the page speed and the overall browsing experience. Image-based Search Engine Ranking is also higher for pages that use SEO friendly images. Web designers should focus on creating and using images that have the optimum balance of quality and size. They should use a technique which fits their technical expertise and the overall functional requirement of the website.