How To Optimize Images for SEO

Maddy Sharkey

SEO,
Web Design

Why is it important to optimize photos for SEO?

According to Forbes, "It has long been considered an essential part of on-page optimization, especially if images are a central part of your content strategy." If you optimize images for SEO, you will increase your chances for ranking for relevant search terms through image search results, decrease web page load time and enhance user experience by avoiding loading issues.

Image optimization for the web (resizing images)

Do you ever visit a website and the background image loads slowly, layer by layer? The photo used was not "web optimized." Web optimized photos means reducing the file size in order for websites to load quickly.

Use Adobe Photoshop (or another photo editing tool) to optimize your photos for online. In Photoshop, go to File > Export > Save for Web. Save as a JPEG or PNG. Photoshop offers a preview of what your photograph looks like at a lower resolution, and you want to go as low as possible without affecting the quality of the photograph. Ideally, you want your image below 200KB. Typically, you should try to keep them around 70KB, but don't sacrifice the quality of your images. Web page load time is included in Google’s ranking algorithm and if it takes too long, you will lose visitors and hurt your chances of appearing in Google’s search results.

How-To-Web-Optimize-Photoshop

Naming files

Naming your image file helps people find your image as search engines will crawl the actual file name of your image and populate the image search feature. Label the image what it is and how people might search for it. Instead of uploading the image with the title given from your camera or “hat-1” “hat-2” label them “red-baseball-hat-side.”

Be descriptive and unique. Avoid spaces or numbers in the file name and decide a very consistent way of file naming from the beginning. Using hyphens/dashes instead of underscores is easier to type out. Decide whether you will use title case or all lowercase and stay consistent.

How-To-Name-Image-Files-For-Web

Alt tags

An alt tag, also known as "alt attribute" and "alt description," is an HTML attribute applied to image tags to provide a text alternative for search engines. Basically, a search engine can not read a photo but it can read an alt tag. This is vital to your search engine optimization. Every image should have an alt tag. Alt tags should be to the point. You can and should separate your alt tag words with spaces. To create your alt tag, there will be a space to type it after you upload your image onto your web platform.

Take time and consideration when naming your files so that you can simply re-write the file name (without dashes) as the alt tag form. So your alt tag might be “red-baseball-hat-side.” So you are using your main keyword, “red baseball hat” and it is being repeated numerous times throughout your post.

Image title tags

Image title is another attribute that can be added to the image tag in HTML, however, this is more for usability purposes and does not affect SEO. The text you enter inside the title tag will not be shown to a user when a image cannot be displayed, that's the alt tag. The title tag will be displayed in a popup when a user hovers their mouse over an image. Image title tags are entered the same way as alt tags, but should be a different description than the alt tag.

Below is a step-by-step process of how-to optimize images for SEO in this blog:

  1. In Photoshop, setup your document size WxH in pixels, 72 Resolution, RGB color mode, 16 bit.

2. Drag and drop your high resolution photo into your document. Drag the corners to expand your image and hold down shift + alt keys to avoid warping your photo, and keeping it centered as you expand and crop.

3. Export and save your photo for Web as discussed above.

4. Optimize your photo for fast web viewing. Click "Save" not "Done."

5. Optimize your photo for SEO by properly naming your file. For header photos, always name it the name of the page or blog title.

6. Upload your content to your website and copy the Title into Alt Text and remove the dashes.

*Notice how the proper naming conventions were followed to optimize every image within this post.

Optimize your photos for websites through correct sizing and file naming, and always Alt and Title tags. Increase your opportunities to be found online by following these steps and optimizing your SEO potential! Having photography trouble? Click here for tips on original photography content!

Brainchild-Studios-Team-Maddy

Madeline
Digital Marketing Coordinator

Maddy is a graphic designer and enjoys being immersed in everything digital. She has been an East Side resident for over six years and believes Milwaukee is the place to be! She prides herself on always having a restaurant recommendation and believes a screen should be replaced with a good book every night.

more posts by Madeline

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *