Image Size Terms
Before we dig into this too much, I want to be sure I clarify a term. Most often, when people
refer to the "size" of an image as it pertains to a website, they mean the file size that
the image needs when downloaded and saved. Just so we don't get anyone confused, here are
two terms for you to know right now.
- File Size: This is the actual size of the image in terms of download or storage
on a hard drive. This is usually referred to in terms of megabytes or kilobytes, such as
1 MB or 200 KB. (When "size" is used below, this is what we'll be referring
to.)
- Dimensions: This is the visual width and height of an image as you see it. This
is usually referred to in terms of pixels (instead of inches or something). An example
of this could be 600 x 400 pixels.
"As you see it," can be deceiving because the way a website is put together can
easily make it look like your very large image is very small, when it really isn't.
Image Size
There are many different best practices when it comes to the optimal size of an image on your
page and website, but it varies based on what you're trying to do. In general, you want the
image file size to be as small as possible at all times to ensure the fastest page load
times across all devices.
When it comes to those large images on the top of primary pages (called hero images), you'll
want to keep the image lower than 500 KB if possible. For other normal images, you'll want
to be closed to 50 KB or lower.
In either case, you'll want to refer to any documentation your website has and/or a designer
on your team for some feedback. Like I said, it can vary.
Finding Images
If you have the budget, I'd always suggest that you hire a photographer to take original
photographs every time. If you don't have the budget, then there are great stock photography
websites out there that allow you to either buy or use royalty-free images.
It's very important that you don't choose images that literally look and feel like they're
"stock." It will only hurt your brand and lower visitor engagement.
Here are a few of our favorites for images and videos:
Editing Images
If you feel comfortable enough, you can easily edit the images yourself. For years, the tools
you'd use to do this were expensive or difficult to use. For example, most people couldn't
figure out how to use Photoshop, despite it being one of the most popular image editing
tools on the market.
These days, there are a variety of tools that you can either use online or install locally
that allow you to edit images like a pro, regardless of the type of computer you're using.
Some are free and many are low-cost.
Free
Paid
Online Tools
Unless you already have a preference for a tool, I'd suggest using Pixlr. It's free, online,
no software to install, no registration required, and super-easy to use.
Compressing Images
When it comes to compressing images, almost every image editing tool available has options to
help you do this. You'll want to be careful to not compress images so much that they become
pixelated and ugly. It's a fine line and you may find that sometimes you use a slightly
lower or higher compression, depending on the tool you're using and the image itself.
Don't make the mistake of assuming that because you may be using a platform like Squarespace
that it's doing the optimization for you. Almost none of these website builders do that.
They instead save multiple versions of the same image with different dimensions and then try
to make their best guess as to which one to use based on multiple factors when the page is
requested.
If the image editing tool has an option to compress and optimize the file size of the image
when saving, always choose to do this. Even if this is the case, you still may want to
consider compressing the image again. An online tool that I use for this seems to eke out
even more compression - even when compared to Adobe Photoshop.
Save as a JPG or PNG?
A lot of images you'll find are already saved as PNG files. When saved and even after
compressed, PNG images tend to be larger than a JPG.
In general, you only want to save an image as a PNG if there are either (1) a very small
number of colors, or (2) transparency is required.
If the image is a literal "image" (photo), the JPG (a.k.a., JPEG) file format will always
compress to a smaller file size. In short, you almost always want to use JPG images for
"images" and PNG for low colors, logos, etc.
What Do You Think?
Did we miss a question you had? Is there something we could go into more detail for you?
Please leave a comment below and let us know.