This post is geared towards fellow bloggers and internet lovers, so if that doesn’t apply to you, feel free to peace out and join back in tomorrow!
In my day job, I spend a lot of time making sure things are appropriately sized for web. What exactly does that mean? It’s actually pretty important, and something anyone who maintains a website containing images and graphical elements should pay attention to.
So what’s the short answer as to why you should save and optimize your images for web? File size and site speed.
First, let’s break it down with a few basic definitions.
File size – the actual SIZE of the jpg, png, gif that you’re working with. Is it a gb, mb, kb? To find out, you can usually right click an image on your desktop and select “get info”, and the file size is typically listed at the top. A gigabyte is much larger than a kilobyte.
Image dimensions – the width and height of the image in pixels, so when referencing an 800 x 600 image, one is most likely referring to the image being 800 pixels wide, and 600 pixels tall. This is also sometimes passively referred to as resolution though.
Resolution – put simply, refers to the quality of the image. “High resolution vs. low resolution.” Basically, resolution is the total amount of pixels in a given space. Put even more simply, the more pixels in the width and height of an image, the higher the resolution and the sharper the image. The less pixels, the lower the resolution. Think of it this way – the more pixels you have available to fill a space, the denser it will be and the sharper the image will be, and the less pixels there and the more stretched the pixels are over a space, the less dense and the blurrier an image will be.
Pixel density – the number of pixels per unit area, usually described in pixels per inch, or ppi. This is not to be confused with dpi, or dots per inch which refers to print ONLY, and not web. Pixel density and resolution go hand-in-hand.
Image quality – the amount of compression. What this means is how much is the data in the image being compressed, which will affect how clear or distorted the image appears. Usually, visible distortion starts to appear at or around 50%.
File type – what kind of file, a jpg/png/gif/pdf/tiff/etc
JPG – a compressed file format that slightly reduces image quality to provide a much smaller file size, pretty much the standard file type for uploading photos or images online or for printing average photo sizes, uses an unlimited color palette
PNG – a much larger, lossless file which means image quality is never compromised when it’s compressed, can handle transparency, png’s are typically huge files
GIF – a very small and efficient file, all colors of the image are forced into a 256 color palette, image quality is usually much poorer than a png or jpg, easily supports animation
Ok, hopefully that gets you started.
Now, without going into too much detail, there’s a big difference between resolution needed to PRINT an image, and the resolution needed for an image to display properly on screen. Image resolution itself, actually has nothing to do with how an image appears on screen, so go ahead and throw that notion out the window. Gone are the days where “images for web need to always be saved at 72 ppi.” A screen only cares about pixel dimensions. A 900 x 600 pixel image, will take up exactly 900 pixels horizontally, and 600 pixels vertically. A pixel is a pixel. Regardless of if the image’s resolution is set to, 72 ppi or 300 ppi, it will have no affect on how the image displays on your computer monitor. The image will still be 900 pixels by 600 pixels. On the contrary, printing a 72 vs 300 resolution image is a huge difference. So bloggers, don’t worry about the resolution of your images, but instead you should focus on other factors.
File size, pixel dimensions, and image quality.
In the world of SEO, having a site that loads quickly is imperative. In fact, you can test your page speeds HERE, for free. Google prefers sites with faster load times over slower sites. Want to know what can have a major impact on site speed, other than your core code? Your images!
Before you get ready to upload an image or photo to your blog, take a second and do the following:
- What are the dimensions of the image? As a rule of thumb, unless you’re uploading an image for use as a huge background image or a huge slider on a website, sizing an image down to less than 1,000 pixels will be perfectly fine. MOST blogs and websites are around 960 px wide total anyways, so add in a sidebar, and the biggest you will probably ever display an image on a blogpost is ~800 pixels. A medium quality iPhone image is typically ~480 pixels, at least that’s what I’ve noticed. There is absolutely NO need to ever upload an image that is 4,000 pixels wide because you think it will look better in your post and be “more high res”. If you plan to print that image at poster size, then have it. But your blog images simply do not need to be 1,000’s of pixels wide. This will only make your image’s file sizes bigger than necessary.
- If your image is much larger than let’s say 800 pixels wide, you’ll need to resize it. Since image size can affect file size, this is very important, and you’ll always want to do this BEFORE you upload it to WordPress, instead of after the fact. Once you upload your image to WordPress, or whatever CMS you use, when you use their photo editor to resize the image, you are simply changing the dimensions of the image, not typically the file size. Save yourself some storage space, and resize beforehand. This will help improve your site speed as well. Think of it like this – which site is going to load faster, one that’s pulling a truck full of boulders, or one that’s pulling a truck full of pebbles?
- When you resize, you’ll want to pay attention to the quality of the image. In photoshop, this often appears in a pop-up after you save-as, with a scale of 1-12. (In the “save for web” feature, it’s in the top right corner as a percentage 0-100%) 12 meaning the image is compressed as little as possible, maintaining as much of the original file size as possible, aka a bigger file. Since changes in image quality aren’t super obvious until you start to get close to 50%, saving your image around 60% is usually a safe bet. This will keep your image looking great, while shrinking the overall file size. The more you compress the image, the grainier it will appear. And remember, changing the quality of your image, is NOT messing up the dimensions of the image. Two totally different things. You are still working with an 800 px image, but one that doesn’t “weigh” as much now.
- Before you finalize your save, make sure you’ve got the file extension correct. This is a biggie, especially if you stole an image off the internet somewhere, or did not upload the image straight out of your camera. Make sure the file type is a jpg, or jpeg. (same thing) Unless you’re needing your image to have a transparent background, you do not need to upload a png. Png’s are inherently much larger files, so convert those babies to jpgs.
- And finally, check your file name. First, make sure your image only has one period, and that it is correctly placed before the file type. You cannot upload an image called cool.image.jpg. And for SEO purposes, you really need to name your file something useful. Uploading important images as dsc_1234.jpg will do nothing for your SEO, but something like chocolate-chip-cookie-recipe.jpg will easily tell Google what your image is about. For those of you who don’t already know, Google and other search images can’t read an image, nor can they read the text ON an image. The only way they know what an image is, is by reading the file name, and the alt text. You can edit your alt text within your WordPress photo editor, so make sure you do that every single time as well.
Making sure your images are a smart dimension, and your image’s file sizes aren’t too large, will greatly help your blog to be more efficient. As bloggers, we often “talk” through our images and getting into the habit of uploading them correctly will do wonders overtime.
Here’s a quick comparison –
This first image is saved at 600 x 400 pixels, 100% quality, and 300 ppi (resolution). Pretty average. File size is 703 kb.
The second image is saved at 600 x 400 pixels, 100% quality, but only 72 ppi (resolution). Can you tell a difference? File size is still 703 kb.
Clearly the resolution does not make a difference, so don’t waste time changing it. Instead, change the pixel dimensions and quality, which will help lower the file size.
This next image is the full 4,096 x 2,734 pixel image, 100% quality, at 300 ppi. File size is 4 mb originally. You do not EVER need to upload a 4mb picture for your blog. I promise you that is crazy town. The dimensions of my blog’s body area are set to a max width anyways, so it won’t even display the full image. There is no need to have a 4mb image that is innately 4,000+ pixels wide, when it will only display at maybe 800 pixels wide when it’s all said and done. For the purpose of this discussion, I then changed the dimensions within WP to be 600 x 400 so it would match the other images, which you can see right below it.)
Point being – the resolution and quality of the 4mb image looks the exact same as the 600 pixel image below it.
This final image is saved at 600 x 400, still 300 ppi, but only 60% quality, bringing the file size down to 46 kb. The smallest file out of the four, and it looks the exact same as the images saved at 100%. Bingo.
So then why worry about any of this? It’s basically just to show you that a digital image is going to look the same regardless of its resolution. But a smaller file size will load faster, save storage space, and fit your blog better. Quick takeaway: size your images to be between 400 and 800 pixels wide, and 60-75% quality and you should be good to go.