Understanding digital image terminology: file size, pixel dimensions, resolution, file formats, quality and compression.
Answering the eternal question — does size matter?
And the answer is… it depends.
In the print world, bigger is almost always better when it comes to the digital source file. That’s why photographers are obsessed with Megapixels and the quality of camera sensors. Throughout the history of the medium, we have been on a quest for the sharpest image than can be enlarged into a giant print. We geek out on that stuff.
But now that most images are viewed online, and most people taking photos are not professional photographers, things have changed. In this blog post, we will explore some key terminology and concepts related to digital image sizes, and what you should pay attention to when resizing your images.
Sometimes smaller is better. Resizing images for websites and mobile devices.
If you have your own website, do you know that Google site rankings depend on page load time? One of the biggest drags on site loading time is large images.
Another reason to use smaller files is that most of us pay for data on our mobile devices. If you are uploading or downloading huge files on your cellular data plan, it will cost you more money over time. And it will cost you time in waiting for the image to upload or download, as we have all experienced.
I will go into more detail about resizing for websites and social media below, but first let’s get familiar with the terminology used for digital images.
Digital Image Terminology
When working with digital images, it's important to understand the terminology and sizes involved to ensure that your images are optimized for their intended use.
Resolution
Resolution refers to the number of pixels that make up an image. Pixels are tiny dots of color that combine to create an image. Resolution is typically expressed as the number of pixels in the width and height of an image, such as 1920 x 1080 pixels.
Resolution is important because it determines the quality and clarity of an image. Higher resolutions will result in sharper and more detailed images, while lower resolutions may appear blurry or pixelated.
DPI / PPI
DPI stands for dots per inch and refers to the number of pixels in a printed image (sometimes called PPI, pixels per inch). The higher the DPI, the more detailed and clearer the image will appear when printed. Common DPI values for print are 300 or 600 DPI.
While 72 DPI is often referred to for website images, it has become irrelevant with today’s technology. If you want to go down the DPI/PPI rabbithole, check out The 72 PPI Web Resolution Myth.
File Size
File size refers to the amount of space an image takes up on a computer or other storage device. File size is typically measured in kilobytes (KB) or megabytes (MB). Larger images with higher resolutions will have larger file sizes, while smaller images with lower resolutions will have smaller file sizes.
Compression
Compression refers to the process of reducing the file size of an image by removing some of the data. This can be done in a variety of ways, including reducing the image resolution or using a compression algorithm to remove redundant information from the image file.
Compression can be lossless or lossy. Lossless compression removes data without affecting the quality of the image, while lossy compression removes data and may result in a loss of image quality.
File Formats
There are several different formats in which digital images can be saved, including JPEG, PNG, GIF, and TIFF. Each format has its own unique features and is best suited for certain types of images.
JPEG is the most common format and is used for photographs and other complex images. PNG is great for outputting vector graphics and images with transparency. GIF was big before PNG came on the scene, and can similarly be used for transparent images and graphics. Today it is mostly used for simple animations like you find on the Giphy app. TIFF is a high-quality format often used by professionals in graphic design and photography.
Guidelines for Websites and Social Media
Different platforms have different requirements for image sizes, and posting images that are too large or too small can result in images that are distorted, blurry, or cut off.
Resizing images for your website: The three second rule!
As I mentioned above, Google will reduce your ranking for having a slow loading page. More importantly, you will lose traffic if it takes more than 3 seconds for your page to load! OMG!
There are two factors affecting website load time in regards to images. The first one is the screen size vs. the actual image size in pixels (resolution), and the second one is file size.
Screen size vs. actual size: If your image is displayed at 300×300 pixels, but you are using a 1000×1000 pixel image, you’re losing load time for that 700×700 pixels. This is a little esoteric for most of us. If you design your own website, a good rule of thumb is that images generally don’t need to be bigger than 1000 pixels on their long edge (resolution), unless it is a banner image, which might be up to 2000 pixels.
File Size: This one is easier to understand. I try to keep the file size for images used for my website under 100kb, regardless of their resolution. Most online photographs are currently in JPG format, and photo editing software will allow you to play around with the compression. If you don’t have photo editing software, here is a list of free photo resizing software.
Resizing Images for Social Media.
Most social media sites will resize your digital images when you upload them, so you can start with a larger file. Just remember, a large file will take longer to upload and use more cellular data if you are doing it from a mobile device that’s not on Wifi.
Guidelines for image sizes on the most popular social media sites (2023):
Facebook Posts: the recommended image size is 1200 x 630 pixels. This size ensures that the image appears clear and crisp on both desktop and mobile devices. Facebook also allows for larger images, up to 2048 x 2048 pixels, but they may be resized and compressed, which can result in a loss of quality.
Facebook Cover Photos: the recommended size is 820 x 312 pixels. However, the cover photo will appear differently on mobile devices, so it's important to preview the cover photo on both desktop and mobile devices before posting.
Instagram Posts: For square posts, the recommended size is 1080 x 1080 pixels. For landscape posts, the recommended size is 1080 x 566 pixels, and for portrait posts, the recommended size is 1080 x 1350 pixels.
Instagram Stories: The recommended size is 1080 x 1920 pixels. Stories should be in portrait orientation and are displayed for only 24 hours, so it's important to make sure that the image is eye-catching and relevant.
For Twitter Posts, the recommended image size is 1024 x 512 pixels. Twitter also allows for larger images, up to 4096 x 4096 pixels, but they will be resized and compressed, which can result in a loss of quality.
For LinkedIn Posts, the recommended image size is 1200 x 628 pixels. LinkedIn also allows for larger images, up to 7000 x 4000 pixels, but they may be resized and compressed, which can result in a loss of quality.
In conclusion…
Understanding digital image sizes and terminology is crucial for anyone working with digital images. By understanding these concepts, you can ensure that your images are optimized for their intended use and will appear clear and crisp on any device or in any medium.
I like to give my clients options, and provide my edited files in several sizes. I am always happy to output them at specific sizes to make life easier for people.
