Optimizing Images for Web: A Practical Guide
Images are crucial to running an
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
There’s also the fact that it’s good for your users. Image optimization, aside from generally being more
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
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
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
There isn’t a
As far as file size goes, your images should never be larger than 1MB, and ideally, most of them will be around
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
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
- 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.
It’s best to use square images for your product and category pictures, as square images are
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.
For example, Twitter’s
Some of the image creators in the app section below have
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.
The apps you need to optimize your images
If you want a free Photoshop replacement, check out GIMP. It’s free,
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.
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.
Haven’t set up your