How to Optimize Your Images for the Web

Images on your website, social media or newsletter are much more than a simple decoration.
Did you know that:
  • The load speed of your product images is a crucial factor for your conversion rate
  • Every image can bring you organic traffic if uploaded in an SEO-friendly way
  • You can do all the image-related work without Photoshop?
Check out our guide to make sure the images you use are both shining and effective.

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.

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-friendlyto 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.

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).

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.
  • If you have the option to set an image as featured, make sure you do so, as that’s usually the image that’s pulled for social media previews.

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.

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.

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.

info courtesy of euclid

Author: georged31093

We at Affordable Web Sites have updated this website in line with our policy to keep evolving with the latest technologies and industry-standards. As part of this policy, we also ensure that our clients can also get access to what is current and most-suited to address their needs. - See more at: