Support Sign Up

How to Optimize Website Images for Better Design & SEO

Whether you have a blog, online store, or a regular website that you want to look amazing, it pays to take a few moments to optimize each image you upload.

 

When we talk about “optimizing” an image for the web, you can think about this in two ways: 1) making sure your images can be indexed by search engines, and 2) making sure they just look good.

 

Everything you need to know about website images
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. (In this post I'll mostly be demonstrating with the free web version of Pixlr, which is a great tool for basic photo editing.)

 

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:


Of course, you can’t use stock photos for everything (like photos of your team or product). If you need to take photographs of your own products, there are a few easy tricks to make your photos look well-lit and more professional, even without fancy camera equipment (like this tutorial on creating your own lightbox).

 

If you’re looking for something more graphic-based, there are a ton of new, free online tools that you can use to build your own infographics or photos with text overlays. We love Canva and PiktoChart. If you’re looking for a logo, we recommend checking out 99designs.

 

Note: Aim to have at least one image on every page of your website. 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. There are pros and cons of each, but for most cases you can remember the following:

  • 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 monster 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.

Photographs should usually be saved as JPEGs.
Graphics should be saved as PNGs Graphics and logos should be saved as PNGs.

 

What if you are using a photograph with text over it (like the feature images we use on this blog)? If the majority of the image is a photograph, you can stick to JPEG.

 

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. So for example if you only have your logo as a JPG, you’ll need to go directly to your designer and ask for a PNG from their original design files, rather than trying to reverse-engineer one from the JPEG.

 

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.

 

On the other hand, you’ll need to use a larger photo if you want to take advantage of Jimdo’s background images or hero images. If you use a low-quality image and try to blow it up to be big enough, it will look blurry and pixelated.

 

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. What you need for print is usually much much larger than what you need for a website. 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 4x6, 5x7, or 8x10. But on the web, images are measured in pixels. So for example, the feature image at the top of this page is 795x300 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.

Learn more about web graphics in our Beginners’ Guide.

 

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

 

Finding the resolution requires a more advanced photo program like Photoshop, but most basic image editing programs will automatically save images at a lower, web-friendly dpi. Pixlr's free web version presents your images at 72dpi, and Canva lets you “save for web” which gives you a PNG at 92dpi.

 

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 have the option, always “Save for web” which will give your image a web-friendly resolution.
  • You can make a large image smaller, but it’s very hard to successfully make a small image bigger. As Pixlr’s support center puts it, “If you have a 100x100 pixel image and you want to turn it into a stunning 2560x1440 YouTube banner, the resulting image will become pixelated and bIurry...If you think about it in terms of volume, you can’t make a gallon of water fit into a swimming pool.”

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


If you have a nice digital camera, you might be taking photos that are several megabytes large—way bigger than what you need for your website. Stock photos from high-quality sites tend to come with large file sizes too. 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. This will significantly reduce the file size. When you resize, make sure to keep the proportions the same so you don’t distort your image.
  • 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.

How to change an image size using Pixlr Resizing an image is easy using Pixlr. The original stock photo was 6302x4789 pixels and 16.2MB, much larger than what I need for my website. Using Pixlr, I’ve shrunk it to 1000x760 pixels, resulting in a smaller, more web-friendly file size (132KB—perfect!).

 

4. Make images the same style and size


Images on a web page will look better if you use a consistent style and size/proportion. Consistency will also help when lining up your text, columns, and other information on your page.

 

To see what we mean, take a look at the examples below.

 

In the first one, taken from our make-believe "Make-Believe Coffee" website, the photos are all different dimensions. One is oriented vertically, while the others are horizontal. This makes the page look a little disorganized. Resizing them within Jimdo won’t really help because the proportions will still be off (i.e. if you make them all the same width, their heights will still be different).

 

In this example, the photos are mismatched and sized differently, so the page looks a bit sloppy.

 

In the next example, I used the Preview program on my Mac to crop each photo to a more uniform 1000×760 pixels (you can also use a tool like Pixlr to crop). The top photo of the bright white coffee mug sort of felt out of place, so I replaced it with one that was similar in style and color to my two other photos. I also experimented with Pixlr’s effects and put in a subtle overlay over each photo (sort of like an Instagram filter) to give them a more consistent look. Once I had them all the same size and style, I uploaded them into a Columns element on my website.

 

Images that are the same size and style In this example, I chose photos that are the same style and cropped each one to be the same size. This makes my page look more consistent.


Since the photos are all the same size and oriented the same way, they all fit perfectly in one column, with my text in an other. No adjustments or guess work needed!

 

How to crop an image in Pixlr Cropping an image in Pixlr to make it the same size as my other images.

Ok, now that your photos are looking great and all the right size, how can you optimize them for SEO?

 

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

 

For consistency’s sake, name your files with lowercase letters and numbers 0-9. Don’t introduce punctuation or spaces. And it’s best to use hyphens rather than underscores.

 

Note: On Jimdo websites, your image files will automatically be renamed to match your Alternative Text (see below), with hyphens added instead of spaces. This means that you don't have to rename all the files on your website—just update your alternative text.


6. 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, preferably with a targeted keyword. (Alternative text also helps visually impaired visitors navigate your site with audio-based software, so it’s a nice way to improve your website’s accessibility.) If you're posting a graphic or a photo with text over it, your alternative text can just be a repeat of what that text or title says. Here are a few more tips on writing good alt tags.

 

File names and Alternative Text are especially important for the SEO of product pages.

 

If it makes sense, also add a caption to your image, since people tend to read photo captions more than anything else.

 

Filling in alt tag and caption in Jimdo Don't forget to fill in your Alt Text and caption!


Note: Filling in Alt text, file names, and captions is good for SEO, but don't try to keyword stuff. You just want to accurately describe an image in plain English—adding irrelevant or repetitive keywords will get you penalized by the search engine deities.


7. 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:
  1. Rename the file to something that makes more sense. Maybe something like make-believe-coffee-cappuccino.jpg
  2. Use a tool like Pixlr to resize and crop it to the size I want. For this example I chose 1000x760. If you wanted a square you could do 1000x1000.
  3. 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!
  4. 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.

Adding alt tag to an image with Jimdo
Even though this checklist might seem like a lot, especially if you’re uploading a lot of images, you’ll get faster and faster once you get used to the process. (and you might bookmark this page so you can refer back to it).

 

Plus, going through these step will make your images look better, help your website load faster, and ultimately benefit your SEO. Get into the right image habits now, and you’ll reap the benefits across your entire website.

 


Maggie

Maggie

Content Editor at Jimdo

 

Maggie joined the team to craft the voice of Jimdo for all products and marketing channels. In her previous work, she edited for organizations covering the environment, cities, and sustainable business. When she's not adding serial commas, you can find her camping with her husband, cooking, and reading New Scientist.