How To Optimize Images
One thing we know after more than 20 years in this business is that people make a split-second decision weather they stay or leave your site. This is far too little time to read text and understand what it is saying. So, what this means is: USING HIGH-QUALITY IMAGERY IS THE SINGLE MOST IMPORTANT THING YOU CAN DO FOR YOUR WEBSITE.
The problem with that is big images load slowly which will impact SEO. This is why we have VERY strict rules as to how we optimize imagery so they load as quickly as possible and counterbalance any negative impact to SEO that a large image and slower load speed might cause. So here’s how you do it:
Name your images descriptively and in plain language
Name your images for SEO.
When it comes to image SEO, it’s important to use relevant keywords to help your webpage rank on search engines. Creating descriptive, keyword-rich file names is crucial for image optimization. Search engines not only crawl the text on your webpage, they also crawl your image file names.
Think about how your customers search for products on your website. What naming patterns do they use when they search?
• John Smartguy
• John Smartguy CEO of SmartCompany
• John Smartguy Speaker at SmartConference
Look at your website analytics to see what keyword patterns your customers follow. Determine the most common naming patterns they use and apply that formula to your image file naming process.
Be sure to use Alt Text.
Alt text are the text alternative to images when a browser can’t properly render them. They’re also used for web accessibility. Even when the image is rendered, if you hover over it, you will see the alt attribute text (depending on your browser settings).
<img alt=”John Smartguy” src=”/writable/images/john-smartguy.jpg” />
Be sure to use Title Tags and Caption Tags.
Add title tags to the images, and at times that you link to any of the images, use relevant anchor text too, as this can help.
<img alt=”John Smartguy” title=”CEO of SmartCompany and speaker at SmartConference” src=”/writable/images/john-smartguy.jpg” />
If you really want to go deep, consider using <caption> tags, for example, <caption>John Smartguy winner of Smart Award for Smart Stuff in 2017</caption> as this can give an extra bit of help in regards to Google & other engines understanding what the image is all about.
Reduce the file size of your images
Google uses page load time as a ranking factor in their algorithm. When a customer arrives on your site, it can take a while to load everything, depending on how large your files are. The larger the file sizes, the longer it takes a webpage to load. If you can decrease the size of the image files on your webpage and increase page load speed, less people who visit your site will click away.
Of course if the images look terrible, this just means people will leave you site faster. So there has to be a balance.
If you use photoshop, here is what we recommend:
• Save in the jpeg format whenever possible.
• Keep your image with under 1400px (many SEO companies would say this is huge, but images are powerful sales tools so we advocate using boundaries here).
• Keep you image quality at a 6 or 7 anything else will not be noticeable on the web.
If you don’t have Photoshop, sue an online editing tool to optimize your images:
PicMonkey has been described by experts as a “staggeringly great photo editing tool”.
PIXLR is super user-friendly and comes with a 100% free app for your smartphone, so you can edit on the go.
Canva is another fairly advanced online image editor.
GIMP is an open-source, free image editing software application that can be run on Windows, Mac or Linux. It can do everything Photoshop can do, but tends to be a bit clunkier.
How large should image files be?
A good rule of thumb is to try to keep your image file size below 70 kb. But that can be difficult at times, especially for larger images.
One way to help reduce image size is to choose the appropriate file type. The three most common file types that are used to post images to the web are: JPEG, GIF, and PNG.
JPEG file type
In most cases , JPEGs will be your best bet. They provide the best quality for the smallest file size. JPEG (or .jpg) images is the classic file type. JPEG has become the de facto standard image of the Internet. JPEG images can be compressed considerably, which results in quality images with small file sizes.
GIF file type
GIF (.gif) images are smaller in size and lower quality than JPEG images and are used for more simplistic images, such as icons and decorative images. GIFs also support animation.
Regarding image optimization, GIFs are great for those plain, simple images on a webpage (which include just a few colors). But for complex images and photos, GIFs are not always as attractive. This is especially true for large images.
PNG file type
PNG images are becoming more popular as an alternative to GIFs and JPEGs. PNGs allow for transparent backgrounds so they are ideal for logos that may display over a colored banner or footer. They also support many more colors than GIFs and they don’t degrade over time with re-saves, like JPEGs do. Even though the PNG file type is starting to be used more often, the file sizes can still be much larger than JPEG images.
Optimize your thumbnails
Many e-commerce websites will use thumbnail images, especially on category pages. They quickly showcase products without taking up too much real estate.
Thumbnails are great, but be careful; they can be a silent killer. The victim? Your page load speeds. Thumbnails are usually presented at critical points during the shopping process. If they are preventing your category pages from loading quickly, you could lose a potential customer. (Note: Shopify merchants don’t have to worry about thumbnail optimization as we take care of that for you.)
So, what can you do?
Make your thumbnail file sizes as small as possible. It may be worth letting quality slide in favor of a lower file size here. Remember, the cumulative impact of your thumbnails will have a huge impact on your page load time.
Vary your alt attribute text as to not duplicate text that you would use for the bigger versions of the same image. As a matter of fact, make your alt text wildly different. The last thing you want is the thumbnail being indexed instead of the larger image. A case could be made to leave out the alt text entirely.
Use image sitemaps
Web crawlers can’t crawl images that are not called out specifically in the webpage source code. So, in order to let crawlers know about unidentified images, you must list their location in an image sitemap.
You can insert the following line in your robots.txt file, showing the path to your sitemap:
Or you can submit the sitemap to Google using the Search Console.
Google has many guidelines for image publishing, which may help your website rank higher on SERPs. In addition, you can use Google sitemaps to give Google more information about the images on your website, which can help Google find more of your images than it would on its own.
Using sitemaps doesn’t guarantee that your images will get indexed by Google, but it’s certainly a positive step towards image SEO. Google Webmaster Tools has many suggestions for correctly formatting your sitemap.
It is important for you to add specific tags for all of your images. You can also create a separate sitemap to list images exclusively. What’s important is to add all the necessary information, while using specific tags, to any sitemaps you have or will create. Follow these guidelines that Google suggests when creating a sitemap with image information.
Be cautious when using content delivery networks (CDNs)
Content delivery networks (CDNs) are a go-to place to host images and other large media files. They can increase your page load speeds and help solve bandwidth issues.
The one drawback is when it comes to backlinks. As you may know, backlinks are critical for SEO and the more backlinks you have, the better your site does in the search engines.
By placing your images on a CDN, you are removing the image from your domain and placing it on the domain of the CDN. So when someone links to your image, they are actually linking to the CDN domain.
Best practices are:
• Determine if a CDN is really the best move for your business first.
• If your website is doing tons of business every month, then a CDN is most likely a good idea since it can help solve bandwidth issues.
• If your site only gets thousands of visitors a day right now, chances are your current hosting situation can handle the load.
There are ways around the image SEO issues associated with CDNs, but be sure to have a professional help you strategize your move first.