How To Optimize Website Images For Better Design & SEO

If You have a blog, online store, or a regular website that you want to look amazing and when we talk about “optimizing” an image for the web, you can think about this in two ways:

Making sure your images can be indexed by search engines
Making sure they just look good

Most posts just go over one aspect or the other, but in this post I’ll cover both. Even better is that all of these steps can be done with free, easy-to-use tools—no Photoshop required.

How To Optimize Website Images For Better Design & SEO

Also Check: Top 5 Tips On How To Create An Perfect SEO Strategy 2015

1. Start with high-quality images

You don’t have to be a professional photographer to use great photographs on your website. Every day it seems like there are more high-quality stock photo sites out there that allow you to download their photos for commercial use, for free. Some of our favorites are:

This can help reinforce the message of the page, catch the reader’s eye, and break up your text.

2. Use the right file type: JPEG or PNG

With images, you’re most likely to encounter a JPEG (or JPG) or a PNG.

Photographs should be saved and uploaded as JPEGs

This file type deals with all of the colors in a photograph in a very manageable, efficient way, so you won’t end up with the big file size you would if you saved a photograph as a PNG.

Graphics, especially those using large, flat areas of color, should be saved as PNGs

This includes most design files, infographics, images with lots of text in them, and logos. PNGs are higher quality than JPEGs and they deal with areas of color and text with nice crisp lines, so you can zoom in and not lose any quality.
They also support transparent backgrounds (which you’ll want if you’re using a logo). If you have a choice, we recommend saving the PNGs as “24 bit” rather than “8 bit” because of the better quality and richer array of supported colors.
You can select the type of file you want with any simple photo program by going to “Save As,” “Export,” or “Save for web” and choosing the file type you prefer. There are also free online tools like Zamzar that will convert files for you.
You can convert from PNG to JPEG, but you don’t gain any quality by converting a JPEG to a PNG.

3. Balance file size and resolution to make images web friendly

With web images, you want to find the right balance between file size and resolution. The higher your resolution, the better your image will look, but the larger the file size will be. Huge image files on your site can slow down the loading of your page (page speed), which hurts your user experience and, eventually, your search engine ranking.

So how do you strike the right balance? First it’s important to understand that when it comes to images, “size” is a relative term. It can be a little hard to keep track of what’s what, so here’s an overview of the three main aspects that make up “size”:

File Size: The number of bytes the file takes up on your computer. File size is the factor that can slow your website way down. A 15MB (megabyte) photo is a huge file. A 125KB (kilobyte) file size is much more reasonable. If your file size is very large, it’s an indicator that either your image size is too large or resolution is too high.

Image Size: The measurement of the height and width of the image, in pixels. You probably think of traditional printed photos as 4×6, 5×7, or 8×10. But on the web, images are measured in pixels. So for example, the feature image at the top of this page is 795×300 pixels.

Resolution: Left over from the world of print, resolution is the quality or density of an image, measured in dots per inch (dpi). Most computer monitors won’t display more than 72dpi, so anything bigger than that is overkill and just making your file unnecessarily large. When a design program has the option to “save for web”, it means saving the file at a low, web-friendly resolution.

How do you find the file size, image size, and resolution of your image?

You can find the file size and image size right on your computer. If you’re on a PC, right click on the image file, choose “Properties” and then the “Summary” tab. On a Mac, Ctrl+click on the image file and choose “Get Info.”

Cheat Sheet for image size, file size, and resolution

Now that you know the different ways to describe an image’s size, here’s a few rules of thumb to keep in mind:

Large images or full-screen background images should be no more than 1MB.

Most other small web graphics can be 300KB or less.

If you’re using a full-screen background, Jimdo’s Customer Support Team recommends uploading an image that’s 2000 pixels wide.

If you have the option, always “Save for web” which will give your image a web-friendly resolution.

What do you do if your file size is too large for your website?

If your file size is over 1MB, there are a few things you can do:

Resize the image. If your photo is 5000 pixels wide, you can easily resize it to 1200 pixels wide, or even smaller depending on how you plan to use it on your site.

Reduce the resolution. Photo programs like Pixlr and Canva will automatically reduce your image resolution to a “web-friendly” size (72dpi and 92dpi, respectively). You can do this in PhotoShop too with the ‘save for web’ option. You can also “Save As” in many photo programs and then adjust the quality level from there.

Run your image through a free program like TinyPNG or TinyJPG. Both will significantly reduce your file size without interfering with the quality.

4. Name the image file correctly to help your SEO

Most people don’t think much about their file names. They may call a photo “Photo1.jpg” or “Screen Shot 2015-06-02 at 3.41.15 PM”. If this sounds familiar, take a moment to rename your files before you upload them to your website. Why? Because doing so will give your SEO a boost.
Think about it this way. When Google scans your website, it can read your text but it can’t see what’s in your images. The file name provides information about what’s in the image, so that Google can interpret it correctly (think eiffel-tower.jpg rather than DSC12345.jpg).
The file name also becomes part of the image’s url, so naming your file something in plain English will make your URLs easier to navigate and interpret.

5. Fill out your captions and alternative text

Once people upload an image into a Photo element, they often forget to fill out the additional information. But just like the file name, this info gives you some added SEO juice.
Alt tags (or alternative text) won’t be visible to your average visitor, but they give search engines a basic idea of what each images is about. So once you’ve added an image to your site, be sure to fill in the Alternative Text field with a phrase that describes what the photo is showing,

Note: Filling in Alt text, file names, and captions is good for SEO, but don’t try to keyword stuff.

6. Put the image near relevant text

Choose images that are related to what the text is saying, rather than something completely out-of-the-blue. An image that is surrounded by relevant text (with related keywords) will rank better.
This tip also helps you avoid stock photo cliches. If your website is about education, you don’t get any SEO boost from having a photo of an apple. Photos of teachers, students, and classrooms, though, will be more interesting for readers and more relevant to your subject matter.

Summary: Optimizing a website image for quality and SEO

So let’s look at these rules with an example from my Make-Believe Coffee website. I found a photo of a coffee mug on Unsplash. When I downloaded it, the file name was “fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg” and it was 2509 x 1673 pixels. Its file size was 586KB. Not terrible, but still much larger than I need for just displaying as a small photo on my web page.
So to optimize this image, I would do the following:

Rename the file to something that makes more sense. Maybe something like make-believe-coffee-cappuccino.jpg
Use a tool like Pixlr to resize and crop it to the size I want. For this example I chose 1000×760. If you wanted a square you could do 1000×1000.
Make sure it’s the right file size. Once I cropped it to the size I wanted and downloaded it from Pixlr, the file size was 117KB—perfect!
Upload it to the website using a Photo element, and don’t forget to fill out the Alt Text! I also added a caption for good measure.

Web Redesign Idea

How To Optimize Website Images For Better Design & SEO