Images create a unique memory in a visitor’s mind and go a long way in turning causal visitors to your website into returning visitors. Large sized images on a website take a long time to get downloaded and being displayed, this frustrate potential customers. Such images not only occupy a significant storage space in your server but also have a negative impact in your website’s SEO rankings among various search engines.
You can make use of the Pingdom Website Speed Test tool to be clear of website size and Website loading time. An optimal website would take less than 3 seconds to load and be less than 1 mb.
Conversion experts states, use of perfect and precise images increases the CRO.
Best Fastest and SEO Optimized WordPress Themes
10 Image Optimization Tips For WordPress Site
1. Use Small Size Images ( Keep your Images in 150 Kb )
Sometimes, uploading larger images may decrease your Site Loading Speed. So, it’s better to re-size the image accurately for the given image block or the gallery page. For the best output, try to keep your image size within 150 KB and maximum 1 MB. Set the color mode as RGB and the color profile as sRGB. For best results, keep image width to 1500 pixels.
Set the orientation properly before uploading by using image managing software. When uploading a logo, maintain the same height that you require. Make the file type as .png or .ico in case of adding a favicon. Format animated .gifs exactly as you want them to appear and avoid uploading larger animated .gifs as they can significantly slow down your site’s loading speed.
2. Never go for wrong file type:
Use only in JPG or PNG Images because other file types like .psd, .pdf, .doc or .tiff aren’t compatible with all Browsers. Be careful with the file name and use only numbers, letters, hyphens or underscores in the file names. Avoid using other characters as that may cause unwanted uploading problems.
3. Suggestions to take great screenshots:
Learn the art of taking the perfect screenshots without compromising on the quality of image and text. Consider the following for a perfect screenshot:
- Instead of re-sizing the image of the screenshots, try resizing the browser to the desired dimensions. For further reduction, you may resize the image to the desired size.
- If resizing the browser is not possible, avoid screenshot of the entire screen and focus only on the area that is critical for your website and remove the rest.
- If you are using a Mac device to take a screenshot, go to preview and reduce the pixel size from 144 to 72ppi before you take the screenshot.
4. Always Resize your Images:
At times, it becomes a problem with some sites where the images are partially visible. It happens when the image is uploaded keeping the actual size intact and the browser automatically shrinks it to the visible dimension. To avoid this, downsize the images according to the given dimensions using various tools like IrfanView, ImageMagick, ImageOptim (Mac) and TinyPNG before uploading.
5. Use Progressive JPEGs:
When it comes to JPEGs, we are usually aware of two types of JPEGs namely Baseline and Progressive. Visually, both have the same impact. However, the difference lies in their uploading process. Baseline JPEGs are uploaded in a single stretch by using their single layer and sometimes give an incomplete view. Progressive JPEGs are uploaded partially using multiple layers and thus result in a complete view.
6. Use lazy Load Plugin
Lazy load Plugin empowers a developer to mention which components are to be loaded into the storage. Normally, the initial program and all the related components are loaded into the storage automatically by the system loader. By using lazy loading, the developer can specify which related components are to be loaded and which aren’t, which in turn can eliminate the loading of many unused components. It significantly improves the program’s performance
7. Use CDN ( Content Delivery Network ):
CDN is also known as content delivery network and it,s allows a user to download static contents by providing substitute server nodes. It ensures a faster download time of static contents and response time. A CDN is a scattered network of servers where the static contents are stored in the cache. When a site is requested, the nearest server node delivers the static contents, thus decreasing the download time.
8. Don,t Forget the ‘alt’ attribute:
Though Some people mistakenly call it the image alt tag, it’s the “Image alt attribute” as an image has the latter, not the former. When used, this image alt attribute is shown as a tooltip in IE with the words contained in the image alt attribute for the visitors to your website when they put their mouse on the image.
It helps those visitors to access the website who have turned off the images. The words that are present in “image alt attribute” become visible at the place of the image. It enhances the SEO ranking by attracting the visitors who have turned off images.
9. Use Plugin to Make your Site Images Responsive
WordPress Images Plugin can make your content to be displayed efficiently and elegantly across all devices. By using it, multiple resolutions of an image can be created which can be viewed by high / giant resolution screens as well as smaller screens. By using the Picturefill WP plugin, responsive images can be loaded in a Better way which are compatible for all types of devices.
10. Use Image Captions:
Captions are the texts that appear beneath an image. They also describe the whereabouts of the image. The addition of relevant keywords in the caption will attract More traffic to your website, thus enhancing the SEO ranking of your site.