The Ozarks Professional & Affordable Web Design Service
When Images Kill
Resize Your Images Properly
Once you have your images chosen, you want to make sure they are web-ready. This means making sure they are Optimized for use on the web. There is a difference between images print-ready and those that are web-ready. Images geared for print don't need to worry about if they're too big, or if their file size is too large. In fact, for print, usually the bigger the better, because it allows for sharper images. Don't images for the web need to be sharp and clear? Absolutely, hence, the need to optimize them.
What is image optimization?
"Optimize" is defined as - to make as perfect, effective, or functional as possible. If you are already using images that are web-ready, then you are really ahead of the game. However, if you plan on using images from your digital camera, then you have some work to do. The foremost and number 1 rule is,
NEVER UPLOAD IMAGES TO THE WEB TAKEN DIRECTLY FROM YOUR DIGITAL CAMERA. NEVER!
Don't, that is, unless you don't care about pagespeed load time and page rankings. If these are not important to you, then have at it. You may ask, "Why is that so bad? Don't the images look great already?" Yes, they probably do look great already, so what is the problem? Take a look at the file size of those images. Pictures coming out of your digital camera will run anywhere from 1mb up to 4-5mb, or larger. For web purposes, this is HUGE and will kill your pagespeed. Your images could determine whether you show up on page 1 of Google search or page 5, or page 10. It is that important!
Images that have been optimized for the web should really never be over 100kb (1/10th of 1mb), and should actually be no larger than about 50kb (your smaller size images should be 10kb or less). If all this 'mb' and 'kb' confuses you, take a couple of minutes and learn a little about these size abbreviations. However, here is a crash course.
- There are 1000 bytes in 1 kilobyte (kb)-(kilo = 1000, so 1000bytes = 1kb)
- There are 1000kb in 1 megabyte (mb) (somewhere you might see 1024kb = 1mb, but this standard is going away).
- There are 1000mb in 1 gigabyte (gb)
- That's as far as we need to go on this.
So if we want an image to be no larger than say 100kb, and we have an image that is 2mb (2,000kb) in filesize, we need to do some heavy optimization. Another reason to not use images directly from your camera, is the file dimensions. As an example, pictures can come out of a digital camera with dimensions 2562 (w) X 3843 (h) @ 300dpi, with a file size of 3mg+, if in portrait mode. These sizes will vary depending on the camera settings. These images are monsterous in both dimensions and file size, as far as your website is concerned.
So how do we reduce their size (dimensions, w x h) and weight (file size in kb) without losing a significant amount of the quality of the picture? That is what optimization is all about, making the images perfect, effective and functional for the web, without losing significant picture quality.
How to optimize your images.
The one thing you will need to optimize your images is an image optimizing program. Wow, was that profound or what? Whether you have one on your computer or use an online image resizing script, this is the first step. The standard for web image optimization/manipulation is Adobe Photoshop, however, since it is also rather pricey, most opt for a more reasonable option. Adobe does have a very affordable online option for those who do image optimization on a regular basis. It is a monthly subscription with all the tools a small business would need for their image work.
Another online image service is Pic Monkey. They have a free and a paid program.
Then there is the option to download free software. Free is good, right? This software is called GIMP.
What sizes do you need?
This will depend greatly on the purpose of the image. The best rule of thumb is to size an image to the largest size that is required for its purpose. For instance, if an image will be used in a slideshow, and the maximum width of the images need to be 800px, then resize those images to 800px. Slideshows might require two different sized images, a thumbnail image and the main image. So you might need to create two different sizes in this case. If the image is to be used inline, like the one to the left, then size it to the max-width that it will take. In this instance, usually you will not want it larger than 250-300px wide.
The original dimensions of the image to the left was 7102px wide X 4740px high, and its file size was 8.7mb. I obviously couldn't use it on this page in that size. I resized it so that it was only 300px by 202px, weighing only 5kb. So this image went from 8,700kb to just 5kb, and for its purpose, it still looks great.
In this age of responsive web design, that is assuming your site is a responsive design (which if it isn't, we can fix that for you), the site's responsiveness should automatically resize your images to the appropriate size. Notice the image below. It's created dimensions are 1290px wide and 220px high. However, because this is a responsive site, it will always resize itself to the window in which it is contained. If you resize your browser, you will see that it adapts to the size of the browser window. This is responsiveness at work, one image for all screen sizes and devices. No matter how small you go, it will adapt.
✓ Properly sizing your images is one of the most important things you can do to improve you site's pageload speed.
✓ Improving your pageload speed will have a positive affect on your page ranking.
✓ Improving your page ranking will enhance your chances of increased traffic to your site.
✓ Increased traffic to your site can improve your bottom line.
✓ Enough said about that.
A Final Thought
Here is a little nugget for you to chew on, just in case you think too much is being made about your site's pageload time. Amazon determined that a slowdown of their pageload time of just one second, costs them $1.6 Billion. Want to know how important pageload time is to Amazon? They can give you 1,600,000,000 reasons.
Get Your Website Health Check-up Now
Beginning to see how important it is that your images are crafted for web use? Beginning to wonder if the images you have on your website are holding back your page rank?
Sign up now and let Website Inspector check your website over for its general overall health. See what is ailing it and keeping it from ranking as high as it should be. We will run a diagnostic scan on your whole site, and check areas such as images, keyword usage, bad links, proper html structure, mobile friendliness, and blah, blah, blah.
Now, how important is it that you correctly name and tag your images? In a word, VERY!