With visuals being such an important part of content marketing, we all go that extra mile to ensure that we use high quality graphics on our websites. But are we doing it the right way? If not, these visuals might be causing more harm to your website than good. Let’s see how and what we can do to optimize images when using them on our websites:
Most of our images, fresh out from the camera, are very large files - much larger than what is required for a website. For example, an image taken using a DSLR is often between 3000 - 5000 pixel wide. Now let’s say you want to use one of these images for your blog posts and the width of your blog content is just 700 pixel. In this case, you need an image with a maximum width of 1000 pixel for your blog. So using the 5000 pixel wide image straight from the camera would be an overkill and would decrease the loading time of the page. Also, over time these large image files can add up and make your website incredibly slow to load. To avoid this, make sure to resize your images based on the requirement before uploading them to your website.
When I started blogging, my image titles looked like this - ‘DSC0076.jpg’. I would upload images to my website, straight out of the camera, without adding any meta information to the image. Blunder! Before I go on to the benefits of meta information, let me talk about what is this meta information is?
Name of the image: The title of your image i.e ’My_Awesome_Blog_Post.jpg' .
Alt Text: The alternate text that appears if the image cannot be loaded for some reason. This tells the readers the nature or content of the image in text format. For example, the alt text for this post's title image would be something like this:
Are you using images for your website in the right way? Here are the different ways you can optimize your images for your website - these tips will help you speed up your site, improve your SEO and much more! Click here to read now..
Description: This is a description of the content of the image or a summary of the image. I usually keep this same as the alt text.
Here is a screenshot of my Wordpress dashboard while uploading images, you can see the metadata to the right of the image.
Now you may ask why it is necessary to add or modify the meta information at all. Here’s why:
SEO: You know that thing called Search engine optimization? It really helps to name your images aptly to be ranked higher in google searches. Google likes it and will think your content is valuable if you name your images in the right way. So next time instead of uploading an image called ‘DSC4567.jpg’, try naming it something more relevant like ‘Optimize_Images_for_Web.jpg’. I promise, over time Google will recognize your hard work and give you brownie page rank points.
Pinterest: No points for guessing my second favorite search engine - Pinterest. Whether you need a new recipe for your dinner or you need to plan your upcoming fall wedding, Pinterest is the place to go to. Now, with so many people searching on Pinterest, you want to maximize the chances of your image being found. Pinterest SEO works a lot based on the descriptions that you write for your pins. The more relevant and useful your description is, the more it is likely to attract visitors to your website. So make sure to fill in the alt text of your images as that is what Pinterest picks up as the description for your pins.
Have you ever noticed that your photos look awesome on your desktop and suddenly when you upload them to your website, they start looking a bit dull - the colors are not as bright and the contrast is off? This is probably because you are not saving your images in the format that is suitable for web. The color mode that is suited for the web is the sRGB mode, so while saving in Photoshop, make sure to save your images in sRGB. Here is a screenshot of my Photoshop workspace while exporting an image with the Save for Web option.
Images take up a lot of space and over time they can take up a significant slice of your website size. If your website is very visual and is image heavy, you might want to explore some image compressing apps to speed up your site. Image compression can compress your image files without losing quality, thereby reducing the size of the file. For Wordpress users, I'd highly recommend using a plugin like WP Smush which will do the job for you. WP Smush strips hidden, unnecessary information like geo information, camera information etc. from your images thereby reducing the file size without losing quality. Image compression instantly speeds up your website. And guess what? The faster your site loads, the more Google, Yahoo and other search engines will like it ;)
From an iMac to a iPhone, people use different devices to browse your website. Are your images responsive? Do they adapt to all the different screen sizes? Let’s take the cover image of a twitter page for example. When you upload it on your laptop, everything looks great and high quality. But when you view the same page on an large screen iMac, if you haven’t used an image that is of sufficient resolution, it will appear pixelated and blurry on it. So before you upload your images, make sure they have the sufficient resolution to look great across all screen sizes.
Additionally, to make your website images responsive, you can set the image width to 100% in your CSS code. This will ensure that the image automatically resizes according to the device its being viewed on.
width: 100%; height: auto; }
These tips may require a few extra minutes to implement, but they will go a long way in keeping your website fast, healthy and running smoothly!