How Do I Optimize Images?
While image optimization is often considered an intermediate SEO topic, we’re going to dive right into it here. That’s because it’s a lot easier to optimize images correctly right from the beginning than it is to go back and re-optimize existing images.
There are two things you need to know about images:
- The bigger they are, the better they look
- The smaller they are, the faster they load
That means we have two competing goals for the images you put on your real estate website. You need them to be as small as possible for speed, yet large enough that they still look good across numerous devices.
There are numerous factors that impact the size of an image, including:
- File type
- File size
- Image detail
Let’s talk about what you need to know about each one:
Image File Size
The absolute perfect sized image will be exactly as large as it needs to be, and no larger. That means that if you’re going to fill up a space on your screen that’s 350 pixels wide, then you also want your image to be 350 pixels wide. This ensures the image is only as big as it needs to be, and loads quickly.
Image File Types
The larger the file size, the slower the photo will load. A lot of things will impact the size of your file, including the type of image file (JPG vs. PNG, for example), and how detailed the image is. For online photos, you’ll generally want to stick to JPG files, as they are small and display well.
This is also the standard default for a lot of image editors, so that makes things simple. You may also occasionally use a PNG file for transparent backgrounds. This is the only file type that will support a transparent background, but its large file size means they should only be used sparingly.
Image Detail & Compression
An image of a city skyline is significantly more detailed than an image of a red balloon, and this level of detail is reflected in the file size. The more detail in a photo, the larger it’s going to be. But the reality is that the naked eye often can’t tell when some of that detail is taken out, and that’s where image compression can become extremely beneficial. By compressing your images, you take out some of the detail and make your image smaller.
There are plenty of tools out there that will automatically size your images, including tinypng.org and compressor.io. We recommend running all your images through a compression tool prior to uploading them on the site.
Lossy vs. Lossless
There are two “levels” of image compression you’ll see on most tools: lossy, and lossless. Lossless ensures that none of the image detail is actually removed, while lossy allows for less detail—but still isn’t that obvious. It naturally follows that lossy images are much more compressed than their lossless counterparts, so we recommend going the lossy route whenever you can get away with it.
When More Isn’t Merrier
The number of images on a page will also significantly impact the load speed of that page. For this reason, you should only use as many images as you need on a page, and no more. If one image is all it takes to visually portray your message, then stick with one. If it takes three, then use three—but not four. And so forth.
Image File Names & Alt Tags
In addition to the image type, size, and compression, image optimization also includes the way we name our images. Because search engines can’t see the image itself (although Google’s working on it), they rely on two other factors to determine an image’s subject: file name, and alt tag.
Optimizing File Names
When choosing a file name for an image, it’s best practice to choose a name that reflects the image itself. But if your image is relevant to your page, there’s a good chance it also represents the keyword you’re targeting, and that’s where your main opportunity exists. Name your image after the keyword, using hyphens to separate individual words.
You’ll also want to keep the image name as small as possible. For example, a picture of houses in Victoria could be titled any of the following:
However, you wouldn’t be able to give those same file names to a picture of a couple in front of a house, so choose your images wisely.
Alt tags are the text alternative for an image, typically used when images aren’t visible—either because the user has turned off images in their browser, or because he or she is visually impaired and uses a screen reader.
Search engines also use alt tags to identify what an image is about, which makes this another opportunity to enforce your page’s main keywords. Like filenames, the alt tags need to reflect what the image actually depicts, so pick your images and keywords strategically.
Next Section: How Do I Avoid Duplicate Content?