Optimizing Images for Web: A Practical Guide

Nov 8, 2016 by Michelle Nickolaisen
A practical guide to optimizing images for the web
Posted Nov 8, 2016 by Michelle Nickolaisen

Images are crucial to running an e-commerce store successfully — after all, if your potential customers can’t see what they’re buying, they’re not very likely to buy it. Images can also make or break your blog posts, boost your SEO, and more.

Keep reading to find out how to make your photos and images work for you.

Why does image optimization matter?

The most obvious benefit to optimizing your images is that it’s better for you in the long run.

It makes users want to stick around on your website (because they can clearly see your images and they aren’t taking forever to load).

It makes your website easier to find in search results (because good image optimization is also search-engine friendly).

There’s also the fact that it’s good for your users. Image optimization, aside from generally being more user-friendly, also helps make your website more accessible for people with visual impairments (who might be using screen-readers that draw off of the alt-tags to describe the image to the user).

Which means more visitors for your websites and potentially more sales.

Read also: Simple Ways to Make Your Products More Appealing to Consumers

Image optimization 101

So what goes into image optimization?

File names and code

The first and easiest thing you can do is change your image filename to something descriptive, rather than 10934.jpg.

Describe either what’s depicted in the image (“RedCorvette.jpg”) or what’s in the post, if this is for a blog post (“MaintainingYourCorvette.jpg”).

After that, you can add an “alt” tag.

This is a tag that goes within the image code that gives a brief description of what the image is  you want to describe the image in a few words while using relevant keywords.

Going with the above example, you might have an alt tag of “2010 Red Corvette Maintenance.”

But don’t keyword stuff the alt tag — you wouldn’t add “car red corvette maintenance 2010 automobile shop buy” as an alt-tag because that can set off spam filters in search engine algorithms, and it’s also not user-friendly to visually impaired viewers.

Most sites have an easy way to edit the alt tags, but if not, you can click “view source” or “view HTML” in the text editor to access and edit it yourself.

Alt-Tags_HTML_Image_Code.png

Aside from filename and alt tag, many site builders (like WordPress) will give you a space for image title, caption, and description (and will easily let you edit the alt tag) when you upload an image, as shown below.

Filling out all available fields is the best rule of thumb for optimization. The caption will be shown to your average viewers, but everything else will be mostly be used by search engines and screen readers (for visually impaired viewers who rely on image descriptions).

 image descriptions

Image descriptions in WordPress

Size and format

Reduce your image file sizes. Obviously, you want the images to be big enough to see, but you don’t need to be uploading images that are thousands of pixels wide and tall.

Make sure not to upload the full-size image and then just change the dimensions that it appears as via the image code. If you do that, the visitor’s computer will have to load the full-size image and it’ll slow your load time down.

There isn’t a hard-and-fast rule for file size or dimensions, but the general gist is “the smallest file size possible without making the image too small or unreadable.”

For in-line blog images, many sites are going with a width of 500-800 and a height of 300-600. You can always include a link to the full-size image so that people can get a bigger image when they click.

As far as file size goes, your images should never be larger than 1MB, and ideally, most of them will be around 100-200kb.

You can also reduce the resolution to make the file size smaller, but with the rise of retina displays, you don’t want to reduce the resolution too much or the images will look blurry on those displays.

To change file size, you can usually choose to export an image at a slightly lower quality, change the dimensions of the image, or change the file type (see below).

Use the right file format for the job. For most uses, .jpg will be your best bet. It supports the most colors with the least amount of size possible.

Gifs tend to be larger file-size wise for static images, but they’re great for animated images (Giphy, anyone?).

This is a great way to show your product from all angles or in motion without making users load a full video — Ecwid lets you use animated gifs for that.

For images with text, .png is a good choice — those images tend to be larger in file size, but have crisper text (and also support transparency).

Best practices for images

On your site:

  • Make sure to include all of the additional description possible, to make your product pages and blog posts search-engine friendly.
  • Include multiple angles of your products.
  • Make sure you set a featured image, as that’s usually the image that’s pulled for social media previews.

Always use high-quality images wider than 500px-1000px for your product pictures. After uploading them to your store, Ecwid hosts images and makes the load fast automatically. To be sure your load time is the best possible, try not to upload very large images, for example, ones in 4K format.

It’s best to use square images for your product and category pictures, as square images are mobile-friendly and always look good on every device. Check out Ecwid demo store for an example.

Ecwid supports retina-ready thumbnails created from your product images, so don’t worry about your shop looking good on retina displays!

All you have to do is log in to your Control Panel, then go to Settings and then “What’s New” to enable the feature.

the Ecwid Control Panel

Learn more: How to Optimize Product Images: Step-By-Step Instructions and An Overview of Services

On social media:

In general, you don’t want to use the same image across multiple social networks — it’s better to tweak the image to optimize it for each social network. Check out Hubspot’s social media image cheat sheet to get the exact image specs for all the networks.

If you have important text in your images, make sure that it’s easy to read as someone scrolls through their Facebook or Twitter timeline.

Make sure you optimize your listings to have featured images that look good on sites like Facebook and Twitter.

For example, Twitter’s auto-generated link summaries (the Summary Card or Summary Card with Large Image — for more on Twitter cards, head here) will use either the first image on the page or the featured product image, like so:

Your featured image should be optimized to look good on the link preview

Your featured image should be optimized to look good on the link preview

Some of the image creators in the app section below have pre-made social media image templates that you can use to get a jump start.

Related: Best Free Apps for Perfecting Your Social Media Images

In your newsletter:

Don’t rely on images to convey important parts of the email.

Many email providers don’t show images by default (and will give users the option to show images), so if you have important parts of the message in an image, a user might scan it quickly and miss it. Instead, use images as visual accents to complement the words in the email.

More and more people are reading emails on their phones, so make sure to test how your emails display on smaller screens by sending yourself a test copy of the newsletter and reading it on your phone.

This also means you want to make sure your images are a high enough resolution to look good on phone screens — for example, the iPhone 6 has a PPI (pixels per inch) of 326 and the 6 plus has a PPI of 401.

Also read: Where to Find Free Images on the Web: Stock Photos, Databases, and Newsletters

The apps you need to optimize your images

If you want a free Photoshop replacement, check out GIMP. It’s free, open-source, and works on Windows, Mac, or Linux.

The downside is that it has a slightly steeper learning curve than Photoshop, but there are plenty of online tutorials to help walk you through things.

That said, GIMP (or Photoshop) is probably the overkill for your average blog post/product image. PicMonkey can help you do basic image editing, along with collages and image creation for social media.

If you want to edit your images on the go, Pixlr has several app options plus an online option. If you’re editing photos, VSCO is a great choice for

Last but certainly not least, there’s Canva, which is less of an image or photo editing app, and more of a graphic creation tool for online images. You can easily add text, photo frames, backgrounds, and it also offers social media ready image templates.

Still in need of product images to edit? For a crash course on taking product photos using your smartphone, head here.

Read also: How to Make a Good Background in Pictures of Your Products Without Using Photoshop

Haven’t set up your e-commerce store yet? Sign up and start using Ecwid today.

About The Author
Michelle is a freelance writer living in Richmond, VA, with her Shiba Inu and cat named after the Hulk. When she's not writing about business, she can usually be found working on her novel series or other side projects, or training Brazilian jiu-jitsu.

Stay up to date!

Get free e-commerce tips, news and inspiring ideas delivered directly to your inbox

Also read