An image speaks a thousand words. Welcome to Tips & Tricks for using images on websites. In this series of articles, we are talking about the most important points that bloggers and businesses must consider before using any image on their website.
In the first part of this series, we discussed the copyright issues that bloggers/businesses could face by using any random image from the google search. We made a list of the various resources from where you can get royalty & copyright free images.
We also saw how DesignBold helps you in creating original graphics (that you can use on your websites without any copyright violations) by providing a quick online drag and drop image editor with millions of premium stock photos and vectors. You can read the complete first part here.
Now we come to the second most important aspect of using images on a website.
Optimization and SEO of Images before using on your website
We can cover the above heading in 2 sections:
- Compressing & Resizing the images.
- Adding SEO relevant points to the pictures.
1. Compressing and Resizing the images
Before you use any image on your website, it is always advisable to optimize it by compressing. Images that are heavy or of high resolution take some time to load completely which increases the loading time of your website.
With decreasing attention span of users, a slow loading site cannot retain viewers. One of the primary reasons for a slow website is using images of high resolution and bigger size.
There are many online & offline tools available to optimize the image size. We are listing a few that are popular.
A) Online Image Compressors:
TinyPNG – An attractive and efficient online image optimization tool. You just need to upload the photos, and the TinyPNG system automatically compresses the image.
Kraken.Io – Another powerful and easy to use online image compressor. It also provides cloud storage and exclusive WordPress and Magento plugins.
Both the above services are free to use with limited features. You can use more advanced features, but you will need to become a pro member. For example, a pro membership of Kraken allows you to assign any custom size to your image.
Benefits: Can be used anytime on any device. You just need an internet connection.
Drawbacks:
- Depends on internet speed.
- To use advanced features like custom resizing and more you need to be a paying monthly subscriber.
- It involves multiple steps – you need to design and then compress it separately. You cannot change the size of the images as a free user (only available with pro version)
B) Offline Image Compressors:
In case you prefer to have the software installed on your system, then you have two popular options. I have been personally using them for image optimization since a long time, and they have always given good results.
PhotoBulk: A lightweight image compressor and resizing tool available for both Mac and Windows. This tiny but powerful software provides many image customization options. To list a few, you can rename images, add texts, watermarks, date-stamp & custom resize the images. There is also batch editing options. Photobulk is a paid app, but the price is less compared to the number of options it provides.
Photoscape: Another long-standing image optimization tool for both Mac and Windows. The free version itself is powerful with many options for image customizations. In addition to image compression and resizing you have significant other image adjustment features. For example, you can buy add-ons to get more than a dozen filters and effects. However, for a regular blogger, the free version is more than enough
Benefits: Easy to use. It does not depend on internet connectivity. Both image compression and resizing possible.
Issues with online & offline image optimizers:
- Both involve multiple steps
- Another most common issue is over optimization that may lead to reduced image quality.
- Resizing Issues: When you are posting images to a website or social media, then you need images of different sizes to exactly fit the requirement for each medium. For example, the dimension for a Facebook cover photo is 851 x 315, and you want to change the size to 800 x 800. So while designing the images, you need to repeat the entire designing process two times for both the types. If you try to directly resize one image to other (say, 851 x 315 to 800 x 800), it will result in distortion of the image. (elongation or compression)
All these repetitions get confusing and time taking when you have multiple images to create and optimize.
To solve this long time niggling issue, DesignBold has a system that lets you design, optimize and resize all at the same time (without moving between apps or multiple repetitions)
How DesignBold Helps You in Designing, Optimizing & Resizing images simultaneously?
At DesignBold we have made it easy for you. Now you do not need to switch between two different apps for designing and resizing or compressing. You can do all within DesignBold in one flow. Here is what you can do:
Step 1: Select a ready-made layout as per your requirement. For example, Let us choose the Facebook cover page.
Step 2: Drag & drop elements, add your text. The image is already of the exact size needed for a Facebook cover image.
Step 3: Download your design in various formats such as jpg, png & pdf. Once you choose jpg, you will get additional options to choose the high, standard or low resolution.
Depending on the settings you choose, DesignBold system will provide you the most optimized yet best quality photo.
As you saw, in 3 simple steps (without switching between separate apps), you can design an amazing photo and download the optimized version of the picture to use on your website.
P.S: The design you create gets stored on the DesignBold cloud. If you want to edit later or download a high-resolution version, you can do so anytime by going to My Design Section.
That is not all. DesignBold also gives you an option called Magic Resize.
Magic Resize by DesignBold
We discussed few lines before, one of the most time-consuming issues for every blogger & online entrepreneur is to resize a particular image into various sizes for different mediums.
Worry no more. Resize in an instant using Magic Resize. No need anymore to start a new design from scratch. See the picture below, how easy it is!
With DesignBold, image resizing is a piece of cake.
Take, for example; you designed an image for your Facebook Social Post (800×800). But you also want to create a customized version (700×400) of the same image to use on your website. You can do so in an instant by using Magic Resize feature of DesignBold as shown in the picture below.
2. Adding SEO points to images before you post on your blog
In the hurry of publishing a blog post, we tend to overlook certain finer aspects which are essential for the SEO of the post.
What is the need for SEO points? It is necessary because Google cannot read your image as such. Google can only read and identify the SEO points you have added to the design. Through the identification of these points, Google will index your images and contents. So, before you publish your blog post with images, check and add the following points:
Step 1. Give proper names to your images:
The most efficient way is to name the photos same as your keyword. That makes your article keyword more prominent for Google and social media engines.
While creating a design using DesignBold, you can name your design, and it will automatically get saved in that name when you download the photo.
Step 2. Adding Alt Tags to your images:
Alt tags are like text description for your images. As mentioned before, Google cannot read “what is your image about.”
Alt tags tell Google “what is your image about.”
It is always wise to use the alt tags same as your article keyword. A great design/photo without alt tags is a masterpiece that NO One will know about as Google cannot read or index it.
If you are on WordPress, then it is easy to add alt tags. Click on the image and select the edit option. There you will get the option to add the alt tags.
Step 3. Add a caption to the images:
It is always better to caption a picture. Alt tags are not visible to your end users. However, a caption is visible to your readers. It gives them a clear idea regarding the image and the article.
Derek Halpern from Social Triggers in one of his articles has stated NOT adding a caption to the images is one of the biggest mistakes every blogger makes.
So, from now on do not forget to add a caption and alt tags to your images.
Conclusion:
After copyright considerations, image optimization for SEO and Correct Size is the second most important aspect of using images on websites. Therefore, the next time you are ready to publish a new post with images do not forget to add the necessary optimization and SEO points.
With this, we conclude the Part 2 of our series – Tips & Tricks for Using Images on Your Website. You can read Part 1 where we have discussed in detail on how to find correct images for your websites without copyright issues.
You can follow us on our Facebook page & Official group for more design awesomeness.