The Big Picture On Your Website’s Images

a laptop and desktop monitor on a desk

Images, like engaging text, are a key cornerstone of great web content. The right photo or illustration content sets the tone for a blog post, invites the user to click on your post via social media, and adds appropriate context to your pages. When we add images to body copy for clarity or as design elements, we break up the monotony of text and white space and create attractive, compelling content for our users.

Like any component of web content, however, images don’t just impact the form of a page or site. Image size and format impact factors like page usability, loading speeds, and the overall usefulness of a site. Search engines take these things into account when determining how to rank your page.

A page with great written content that loads slowly due to its images is not as effective as one that loads faster. No one likes to wait, especially if you’re looking for information on mobile. Some visitors may decide to leave your site entirely if the page doesn’t load fast enough. This is why optimizing your images is important. Having a good grasp of image formats, file sizes, and other basic graphic principles can go a long way toward giving you an edge.

Image File Types and Formats

There are dozens of image file types available to use, but content creators will typically only work with a few when they’re putting together blog posts or other page types. More importantly, different image types have preferred uses.

JPG

JPG files are lossy, compressed images that are great for photographs. Lossless compression tries to minimize the amount of artifacting by making very slight adjustments to the color of the image to smooth it in the least noticeable way possible. Lossy compression makes even more abrupt changes and could strip some of the sharpness and clarity from the image. Because of this compression (read: smaller size), they’re a common choice for many sites. JPG images don’t support transparency and can sometimes experience pixelation or fuzziness known as artifacts. One key takeaway is that JPG files aren’t really suitable for logos or text-heavy images.

PNG

PNG images are another common choice when visual content is needed. This lossless graphics format replaced GIFs once it became apparent that more colors were needed. PNG files are great for images with lots of artwork or sharp edges, like fonts and shapes. Because this format supports transparent backgrounds, there’s a good chance that your site’s logo is a PNG file.

GIF

GIF images are lossless and are the original forms of animation on the web. And while they are an often hilarious way to comment on social media posts and in Slack channels, they’re not just animation. They’re image files in their own right. But because they only support 256 colors, people tend not to use them for static visual content. They are more recognizable for their use on social media platforms than anything else.

SVG

Unlike previously mentioned file formats that are made of pixel grids, SVGs are another graphic format that uses shapes, numbers, and coordinates – also known as vectors. They scale infinitely and are independent from resolution, meaning they work great for illustrations, logos, and text. The image quality remains the same regardless of screen resolution or size. In addition to retaining quality, SVGs carry a lot of information in a smaller size format than raster images.

What Size Should My Image Be?

A large part of determining the proper size for your image has to do with the design of your site and the size of displays you wish to cater to. Generally speaking, you do not want to use an image that is larger than necessary. But how do you know what the best size is?

One best practice for sourcing images, especially when downloading them from a paid stock photography resource like iStock, is to download the largest resolution possible and resize as necessary. In addition to giving you the most flexibility with regard to formatting, you can always crop or compress unnecessary elements before saving in a different format.

istockphoto.com screenshot showing that images may be downloaded at a high resolution and edited after the fact

At the end of the day, the best answer to the question of image size is to keep your audience’s screen size in mind. Most people will not be looking at your content on expensive 4K monitors. Featured images should, generally speaking, be around 1000 pixels wide. A good rule of thumb for images that fall within content is to keep them around 800 pixels wide by 600 pixels tall.

How to Compress Images for Web

Whichever format you choose to use, there are some key steps to take to ensure that your image is properly compressed enough for web use. Some of these may require access to image editing software, while others can be accomplished by using the available tools on the web.

Resizing and Constraining Proportions

In order to ensure your image does not skew or warp in any way, make sure that you’ve chosen to resize it while maintaining the aspect ratio or constraining proportions. Usually this will allow you to format the image to an appropriate size for your content. Cutting your image down from a width of 5000 pixels to 1800 pixels, for instance, will shave quite a bit off the size of the file.

Resampling

If the image you’ve chosen has been formatted with a high DPI (dots per inch), you can compress the image by changing that number. Most images formatted for the web have a DPI of 72. If your image has a DPI of 300, use an image editing tool to resample. In some cases, resizing the image may also resample it, depending on the software or service you’ve chosen to use.

Using Web Services

For images that have already been resized and resampled, it’s possible to apply even further compression to bring the file size down even more. Services like Compressor.io and TinyPNG allow you to compress images even further. These files can then be redownloaded and uploaded to your site.

tinypng.com is a service that allows you to easily compress your JPG and PNG images.

Just note that you want to – where possible – use lossless compression instead of lossy.

Which Format Is Best?

When it comes to choosing an image format for your content, the most important thing to remember is that there is no “one-size-fits-all” solution. As you choose which image format to save your files in, keep the following in mind:

  • JPG files work best for photos with minimal text or shape objects
  • PNGs are great for logos, illustrations, and infographics
  • SVG files, when properly optimized, can really help with SEO

There’s no perfect solution that works in all cases, especially when your content features many images. Every item on a page slows the pagespeed, which is why optimizing your content is important.

If you’re truly concerned about how images in general affect your SEO, there are other factors to consider. In addition to image size, ensuring that images have alt tags to describe them for screen readers and other services is key. Ensuring that your images are correctly named and optimized can have a great impact on how useful your page is considered to be.

Image Types are Technical – Not a Technicality

Concerned about the impact of images on your SEO strategy? You’re not the only one. At Go Local Interactive, we specialize in looking at every aspect of your SEO program from a technical, yet holistic perspective. To learn more about how images impact your site performance, customer behaviors, and content strategy, reach out to our team of specialists today.

More Posts