Did WordPress tell you you the picture you took with your cellphone was too large to upload to your website? Is your webpage loading slowly? Are you feeling confused by all of the image options? Let me see if I can help you understand what size your image should be when uploading pictures to your website. After you understand how web images are different than print images, we’ll learn about image compression, file types, and how to choose the correct resolution and compression for your images.
First, understand how images for print are different than images displayed for web
Most of us have a general understanding that bigger files mean better quality on images. That’s usually true when talking about photographs. However, one thing that we find many of our clients don’t understand is that bigger files may not mean crisper images or more detail on webpages. It’s also important to realize that large file sizes mean slow downloads. Slow downloads means frustrated users, and frustrated users will leave your website.
In addition, we find that many of our clients don’t realize that their computer monitors show only a certain number of pixels at a time. For example, the monitor I’m using right now has a resolution that is 2240 pixels wide. This means that no matter how wide my image is, my monitor can only display 2240 pixels at any given time.
For example, If the photo I take with my phone is 4000 pixels wide, and I display it on my computer monitor, I’m only seeing 2240 of those 4000 pixels. I can zoom in, but I will only see part of the image. The remaining pixels are “off screen” somewhere. If I zoom out so that the full image can be seen, my computer will guess which pixels it should not display.
Your computer can only display the number of pixels available to it, and that is controlled by your computer’s resolution.
Now that you understand that your computer has a limit on how many pixels it can display at any time, you need to consider download speeds. You have visited websites when either your internet was slow or a file was very large, and it took a long time to download and view. How did you feel? You want to avoid doing anything on your website that makes customers feel frustrated or irritated if at all possible, and that means reducing file sizes when it makes sense.
One of the ways we can reduce file size is with compression.
On Compression
We’ve all see images that look terrible on webpages. These images have gray dots that may look grainy, or they may have weird little goobers, called artifacts, that seem out of place. Maybe you’ve even uploaded an image somewhere only to find that it got compressed by the system and lost some of its detail and came out looking fuzzy.
The type of compression that causes this type of poor image quality is called lossy compression. Lossy compression means that the image file does not contain all of the data to color each pixel individually, and so the computer must guess what colors some pixels should be. More compression means smaller file sizes, but it also means more guessing, and sometimes your computer will guess wrong, resulting in artifacts, or discolored pixels. JPG and WEBP use lossy compression to get small file sizes.
You’ve probably guessed that there’s also lossless compression, which is, of course, lossless. This means that while a file is compressed using math magic to make it a little smaller, the color of every single pixel is saved so that no color is lost. PNG, WEBP (lossless), and GIF are lossless file formats.
SVG is another common filetype use on the web, but note that compression doesn’t really apply to SVG because it is not a pixel-based file format. You may hear about compressing an SVG, but what’s really happening is minification, which is removing unnecessary spaces in the data file.
Next, understand file types
It’s important to use the correct file type for the image you’re displaying. There are several options, so let’s talk about the advantages, disadvantages, and limitations of the main file types:
JPG – for photos
JPG remains the most accessible and easy to use file format for most people. JPG images are compressed in a way that makes them efficient for storing photographs. Using some complicated math that I don’t fully understand, JPG uses surrounding pixels to make educated guesses about what neighboring pixels look like. When you compress a JPG, you’re deciding how many “guesses” the computer should make when rendering the image. This is “lossy compression”. Lossy compression means that on highly compressed images, the computer will probably guess wrong, and you’ll end up with some goobers, er, artifacts:
As you can see above, a moderately compressed JPG is less than half the size of a JPG without compression, but it’s easy to go too far with JPG and get images that get that awful grid pattern as in the image below, because the computer tries to guess how neighboring pixels should be colored and inevitably makes mistakes.
JPG is best for photographs that are large enough that a goobered pixel here and there won’t make a huge difference. Its compression makes it a poor choice for graphic or cartoon-style images.
Also, you should know that when you save a compressed JPG with more compression you end up with more goobery artifacts. This means that when you upload a JPG to say, Facebook, or a WordPress site that is using Short Pixel to compress images, your image may be compressed more than you intended, and you can end up with images that look pretty awful.
Pro-tip: The image above is just 300px wide although it’s being displayed much wider on your screen. Hopefully you see that although the image is small dimensionally, JPG images can look pretty darn good even when scaled up. It’s not absolutely necessary to make a JPG be the exact size you will display it at if image perfection isn’t a primary concern.
WEBP – the next cool thang
Google has created a relatively new file format called WebP that offers superior compression to JPG plus transparency. This makes WebP a great all-around file format that can be used for both graphics and photographs on the web. WebP does offer far, far smaller file sizes for photographs than JPG, but it’s not much better than PNG for graphics. In addition, it’s not everywhere. For example, Photoshop doesn’t natively export WebP files. You have to download and install a plugin, and I can tell you from experience it’s challenging to do.
But, it’s worth it.
Check out the images and file sizes below. WebP is incredible at making tiny, great-looking photographs. It’s supported in all major browsers, and I’m using it myself for photographic images on our webpages.
These images are also just 300px — exactly the same as the JPG images above so that you can compare them. Note the file sizes. The moderately compressed WebP image looks nearly as good as the JPG above, but it’s 11k vs 54k. You can compress a WebP image less and still get a far smaller file size than a JPG image. WebP files can use either lossy or lossless compression, but as shown in these examples, the lossless file size for a WebP image is smaller than lossless JPG.
WebP is a game-changer.
PNG – for graphics and transparency, sometimes for photographs
PNG is a non-lossy file format that is excels at making small graphic-style images. Consider the graphic below. Even though the full size version of this image is a ridiculous 3800px wide, it’s just 30k. PNG is perfect for images like this one that have large fields of one color and that are graphic or cartoon-ish in style.
PNG is sometimes the right choice for photos, but since PNG is nonlossy, it can result in files that are larger than a JPG at the same resolution with tolerable compression. It’s kind of tricky to know when to use PNG for photos. Here are some questions to ask yourself:
- Does this photographic image need transparency? If so, consider PNG or WebP.
- Have I compared the PNG file with a compressed JPG or WebP image? See below for examples.
- Is this a product photo for a e-commerce? Sometimes PNG is the best choice for this application.
PNG is always a good choice for graphic-style images that require pixel perfect rendering, but it’s not always a good choice for photographs where some compression won’t affect user experience.
SVG – for icons and some logos
SVG is a totally different filetype that does not use pixels to display images. SVG uses math to represent curves and fields that are filled in to make images that can be scaled to any size. This means that SVG files can be super small, like just a few pixels across, or gigantic, like hundreds of feet across, and look perfectly crisp and clear with no change in file size. A 10k SVG of your logo is 10k when displayed as a tiny icon on your website or if you display it billboard -ized. SVG images are naturally transparent. SVGs can be any color or group of colors, but usually we make them black and change their colors using CSS. Webpages are starting to utilize two-color SVGs now to make two-toned icons, but this is still pretty new tech and not very common.
SVG may sound like it’s the perfect file format, but it has some limitations. For one, SVG is not for photographs. SVG can not be used to display photos. In addition, an SVG file may be larger than a small JPG, PNG, or WebP image, which means that if your logo is always going to be displayed very small, such as in a header, it may be smarter to use an 11k PNG instead of an 40k SVG.
GIF – for old school graphics, animations, or transparency
When I first began building websites more than twenty years ago, GIF was the gold standard of graphic/cartoon style animations. Few people use GIFs on websites any more because of their poor quality — I myself haven’t used GIF in probably a decade because PNG’s compression is non-lossy and also has superior transparency. We still love GIFs, but we use them now for memes and funny reactions on Facebook posts like these:
GIF can make simple animations of photographic images, but as you see above, the resulting animations are grainy and choppy. One of the reasons GIF images are small is that they use a limited color palette. When a photograph has a color that is not part of the GIF palette, it displays as gray, which is why GIFs like the one with the woman eating the taco look so grainy and gritty. So while GIF is lossless, it’s color palette is limited, which means poor quality on photographs that require a full spectrum of colors.
Rarely would you ever use a GIF on a professional website today. Even the beloved, formerly ubiquitous “under construction” GIF is now considered passe. Today we mainly use PNG where we formerly used GIF, unless animation is needed (pro-tip: and it’s not).
BMP/TIFF/RAW – never use for web
BMP files are non lossy and have no compression, which means they aren’t great for web. Back in the olden days, BMP was the only way we could display photographs on the web until JPG came out in 1992. Imagine the pain of trying to download a 800k picture of the Enterprise in BMP over your 28.8k dialup modem only to have your sister pick up the telephone with just 10 minutes to go. I’m still scarred.
TIFF and RAW are especially good file formats for printing on paper, but they are terrible for internet, where their enormous file sizes download too slowly for practical use.
Next, think about how large your image will be when it’s displayed on your webpage
Now that you’ve chosen the right file type, how do you know what size images to upload? How do you know what resolution your image should be?
Well, first off, never put an image on your website that is larger than it is possible to display on your screen. Remember our discussion about computer monitors at the beginning of this post? Today the most common monitor resolution is 1920 pixels wide. If I upload an image that is 2000 pixels wide, that image will never display at more than 1920 pixels wide, and there are at least 80 pixels that must be discarded.
In addition, if you know that your image will be displayed in a blog post or somewhere it will NOT be displayed across the entire width of the monitor, your image should be sized appropriately. For example, if your website is not full width (you can see empty space on either side of the main text — like this post), and your image is going to be only half the width of the main text area, your image is unlikely to be displayed wider than 700px, so don’t upload an image that’s wider than 700px. If you’re going to use the same image, say, as a hero image and again later in the text, upload two images, sized appropriately.
For example, earlier in this post I used the image of the girl with the flower behind her ear to show examples of WEBP and JPG’s lossy compression. I also used the image of the girl as the wider, full width header image. I output the image in the smaller sizes for display in the text, and I also output the image at 1800px wide for use in the header with a lot of compression, where the image quality isn’t as important.
Ensuring your images are sized and compressed properly for their intended locaion is an essential part of image optimization for web.
Conclusion
In order to uploading correctly sized images to your website, you need to take into consideration the resolution of the screen where the image is likely to be displayed (like mobile phones or desktop computers), determine if you need lossy or lossless compression, choose an appropriate file format, and output a file that is appropriate to the location where it will be displayed on your website.
We understand this can be confusing, but that’s okay. Here at Metro Nova Creative, we have decades of experience with image optimization, and we can teach you how to optimize images as part of our small business consulting services. If this is all just too much, we can go back and optimize your images for web as part of our SEO packages. Reach out!
