Wondering why your page is literally taking YEARS to upload? Is this some kind of sick joke?! How were you able to make a three course meal and come back only to find your site is still not ready to rock? Chances are you are a victim of “THE UNPROCESSED IMAGE.” Don, Don, DOOON! Not to worry, image size is a common problem on blogs. Aside from being annoying to your readers, this is a big issue with search engines. Google and others will penalize your site if you have long load times. Which means, you may have relevant content, but if your page takes a year and a half to load you won’t be showing up high in those results.
In this post we are going to hold your hand (figuratively) and walk you through how to compress an image. After that we can braid each other’s hair and talk about the cute boy, Daniel Drintex that live across the street. BUT ONLY AFTER. For now, we have better things to do. There are a ton of other tips of the trade that we have in regards to speeding up your site and showing up in search engines, so remember to keep up with our new posts by subscribing! Now, onto the good stuff.
WHAT PROBLEMS DO YOU NEED TO FIX BEFORE UPLOADING?
There are two main issues that you need to fix in regards to your images, image dimensions, and how much space they take up. File format is important to be aware of so you can assess the right option for what you are trying to showcase.
1. Image Dimensions: Many people upload the images that come straight off of their camera. This is a BIG no-no. Seriously, if we see you do it again we will slap you on your wrists with a ruler. When you upload images straight from your camera you run the risk of those images being ginormous! These obscenely large images are completely unnecessary. Most blog posts are 800 px wide. Get your dimensions down to something below 1000 px. The height can be whatever you fancy, just be sure to size down your width.
2. Space: When you upload pictures, they are saved with much more data than is necessary. EXIF data tags along for the ride and reveals personal details about you (camera type, GPS location, etc.) which are redundant. The initial images will be a few megabytes in size (MBs). However, you really do not want images to be much bigger than 500 KB, and even that is pushing the envelope a bit. You should be able to get it much, much lower.
Here is a little extra tip, you may think that when you upload photos to Blogger or WordPress they are compressing your images. Sorry to break it to you, but they are most certainly not. They might shrink your image down to smaller dimensions (when you choose small, medium, or large), but that has nothing to do with compressing your file size.
3. File Format: You do not have to be a rocket scientist to figure out what type of file format you are using. Simply, look at the end of your file name and you’ll see “jpg,” “png,” or “gif.”
As long as you are using pngs and jpegs you are in the clear. We recommend sticking with jpgs because these are generally smaller files and are a good option for color photos. To put this in perspective, if you have a 400 KB png it would be equivalent to a 100-200 KB jpg. If you’re planning on getting fancy schmancy with your images here is a brief rundown on the three types and what they are good for.
THE JPEG
As mentioned above, jpegs are better suited for colorful images. This particular format uses compression in order to reduce file size. Which means, you can save a high quality jpg at just a fraction of the file size taken up by a png.
THE PNG
Pngs are the cream of the crop when it comes to screenshots and website design images, i.e. icons and buttons. While the quality is higher, the file is larger. Pngs also let you use transparency, which may be important to some of you Photoshop wizards out there.
THE GIF
Gifs are best for low quality images with few colors. These days gifs are usually used with short animated clips of a cat doing weird things, celebrities doing weird things, babies doing…you get the picture.
FIRST THINGS FIRST, DO YOU ACTUALLY HAVE A PROBLEM?
As they say, if it ain’t broken don’t fix it HONAAY. Check out some of the images you’ve uploaded on your blog to assess whether or not you even have an issue. Drag an image off of your website onto your desktop. Once on your desktop if you are using a MAC, right click on the image and selected “Get Info” to see what the dimensions and the size is of the image. If you are using a PC, click “Properties,” then “Details” to see the same information.
In the info panel, the two areas of concern are under “General” and “More Info.” In this case, the size of the image is 1.2 MB and the dimensions are 685 X 1028. Here, the dimensions are A-okay, but the image size is too big and will require some compression. This type of problem is probably what you will discover with your own images. As we previously mentioned, Blogger and WordPress will shrink your image dimension size. But they will not compress it. Meaning, the file size is still large, and will affect your load times.
FIX-IT-UP!
Depending on what your problem is, we have a solution!
1. HELP! BOTH my size and dimensions are off!
Whoomp, whoomp, looks like you got the short end of the stick. Never fear! We use Shrink Pictures. This allows you to shrink the dimensions as well as the file size! Yay! Not only that, but it is super easy to use. All you need to do is:
1. Choose your file.
2. Select Custom and type in your final width : we suggest 800, unless you have a super wide blog theme.
3. Don’t check Number 3 unless you want the image to be processed in black and white. If you do want black and white, then check away you 1950s glam-star you!
4. Step 4, we tried all three of these, and “Best” seems to be the best option. It will export a very compressed version of your image, but it will still maintain a good quality. The lesser options might export out pictures that are grainy or too low-res.
2. HELP! JUST my file size (NOT dimension) is off!
Lucky you! You have a lot of options at your disposal. You can use the steps above with Shrink Pictures or you can use one of these other options which let you take care of a whole bunch of images at once!
1) SmushIt: This is one of the most popular and reliable online tools by Yahoo Network for compression. Additionally it before your compress your image it will show you what your new optimized image will look like. No surprises here!
2) JPEG Optimizer: This tool reveals a compression value from 0 to 99 and is a great option for compressing digital pictures.
3) Image Optimizer: Easy as pie. Simply, find your file, set the quality, and boom your new optimized file is ready to go!
4) TinyPng: This handy dandy tool allows you to drag and drop up to 20 images to get compressed at once! Additionally, you can play with lossless PNG image optimization will full transparency support.
3. We hate to be a broken record, but AGAIN your file format this isn’t actually a problem.
Feel free to use either png or jpeg. Again, if one of these services gives you the option of choosing, we recommend jpg for colored photographs (sidenote: Shrink Pictures will save your image as a jpg regardless. You can kill three birds with that one little program!).
To sum it up, with these easy steps you can avoid painfully long lag times AND you’ll show up higher on Google. A win win. It doesn’t get much sweeter than that!
Leave a Reply