Besides the usual office software, you will need to learn at least a little about how to work with images on the web, whether it be pictures or clip art. We have all seen web sites and blogs where the header overhangs the edges. That not only looks flunky, but it isn’t good when you can’t see the whole image. It’s a sure sign of an amateur!

We’ve also all received email pictures that are so huge you have to scroll both up and down as well as sidways just to see them. The answer to such things is so easy that there is no excuse for not doing it! We’re going to show you some easy fixes for such things.

What is wrong with my image?

Images have two very critical size issues to worry about. One is the file size, usually measured as kilobytes or megabytes. The other is the visual size, measured in either pixels or inches. In most web work we usually set to pixels, rather than inches, but if you are printing your pictures, then maybe inches might be more important.

Both file size and visual size are important in web work. The larger a file is, the longer it takes to load, whether it be on an email or on the web. We’ve all gotten pictures emailed to us where the file was so huge it took minutes to load instead of seconds, and after it opened, it was enough to fill four times our screen area! I hate it when people do that to me, because there is no way I’m going to waste space on my computer that way, which puts the burden on me to correct problems that other people created, (another pet peeve of mine)!

In building web sites or blogs, you are going to learn that people’s attention spans are about three seconds long. If a web page doesn’t open in three seconds, they are ready to move on to a different one, and then you have lost them forever! Therefore, it is important to keep the file size as low as possible to speed up page opening. This is one of two reasons you often see products displayed with small images first, and then if you want to see a larger image, you have to click on it and open it in a pop-up, or in a completely new page that has ONLY that picture on it. You’ll see this done very well on Facebook photos. They only tend to show a part of the photo on your timeline, but if you click on them, they enlarge to fill the whole page. Catalog sites already know why this is important! The other reason they do it has to do with better page SEO when you can concentrate on one product at a time, but we’ll get into that later.

Also, when someone sees pictures that are way too big, as happens many times with page headers going past their borders, it doesn’t do a thing for his image as a professional. Every blog program that I have ever seen will tell you in the settings for your header image what it should be. They aren’t telling you that just for the fun of it. Some will resize your image smaller if it is within the scope of doing so, but if your image is too wide or too tall to begin with, it may crop the image, in which case you will end up with blank areas at the top or the sides, which still looks flunky. If your picture is too small, it may not accept it at all, or it could distort it, or leave a lot of blank area around it, none of which looks visually appealing. Pictures cannot be enlarged beyond their original size, because they become fuzzy due to pixel distortion. You NEED to pay attention to these things and follow the proper recommendations, and if necessary resize and/or crop your picture BEFORE you upload it to your site!

Resizing Pictures for Beginners

So how do you “properly” resize a picture? I’m sure some of you will say to click on it to get the box around it and then drag the corners. WRONG! That only changes the visual size, but the number of bytes remains the same! In other words, it may look smaller, but it will stay the same amount of time to load onto the web page.

The correct way is to use any number of free online tools, but my favorite is PicResize. When you go to that site, there will be a one-line form with a “browse” button next to it. I usually use the browse button, and then go to the file on my computer where the picture is that I want to change.

For everyone, your pictures are default saved to a folder called “My Pictures”. As you gather more pictures, you should also create sub-folders to sort them, so you know where to find them. If you use a photo management program like Picassa, you can also locate the pictures there. When you find the picture, you can double-click on it or use the “open” button to put it into the form box. Hit the “continue” button.

The next window is your complete editing dashboard. You will see your picture there, where you can crop your image, rotate it, flip it vertically as well as horzontally, resize it to either a reduced size by percentages or by custom size (pixels or inches), choose from 15 different special effects (frames, sharpen, and more), choose your file type, picture quality, and even your “bytes” size (although that will automatically adjust with the visual size you have already chosen). Then you click the button where it says “I’m done! Resize my picture!” , and the next screen will give you four choices, to view it, resume editing, save it to disk (on your computer), or save it directly to the web.

I normally choose the disk option, and then a window will open with your default folder (where the picture came from on your computer) and it will save it back to that folder with the prefix “resize” on the file name, so you know which one it was. If you want to save it in several file sizes (you’ll have to go through the process again for each one) you can also edit the file name to insert the size, the date or any other identifier of your choosing.

That’s all there is to resizing pictures, so there’s no excuse for not doing it. You will need to learn this, because many times, you will need an ad banner or photo to fit a certain place on your blog. If you go to your web page, and then click on “View” from the menu bar, and then “source” in the drop-down menu, you can see the html code of your site. Within that code, will be the widths of your header, your body, and any sidebars that your page has, so all you have to do is make your picture is the width that you need (or smaller, and then center it) and you can fit any picture “properly” to any space on your page. If you are creating catalog pages, and need all the images the same size, this is how you do that.

Alternatives to Photo Editing on the Web

Nearly every digital camera made has settings to adjust the picture size right on the camera BEFORE you take the picture. You NEED to read your camera user’s manual and learn how to do that, so that you can change it at will. Many of them will have it set at the maximum size when it ships from the factory. You NEED to learn how to change that!

There may be times when you want a larger, high resolution picture for things like headers, or just larger product images, and other times, you may just want pictures for email that you can send to people. DON’T overwhelm them and their computers with huge images that they can’t even see without scrolling!

Normally the largest images you need for most “body” work in a site is no more than 640 pixels wide. For sidebars, usually 125 pixels is enough. Some cameras have default settings of around 480 pixels, and that’s fine for 90% of what you will be doing. You can also use the next smaller setting of about 360 pixels. NEVER use higher settings unless you are doing things that require a larger image, like header pictures, which should never be over 1200 pixels wide, and actually 1000 is even better!

Sometimes image file types can be downsized (within certain parameters, usually no more than about 25%), but if you try to shrink the visual size too much, the number of pixels will cause it to start distorting, which is why you need to control both the bytes and visual size. If you will be using both thumbnails (stamp sized images) and want them to enlarge when clicked on, then take the picture in the larger size and reduce your thumbnails by the process above, and that way you wil be sure to have clear images in both sizes. Some programs will automatically accept the full size image and offer you a check box to provide thumbnails, and then it will do that for you. This is why it pays to read the instructions on anything you are using.

My old reliable Sony Mavica actually creates two files with the same picture. One is full size and the other is with a folder called “email”, and it is a size that is perfect for uploading to emails without having to do any resizing, so that is a handy feature. Most cameras don’t have that. When I open the “A” drive to save the photos to my computer I see a folder icon that says “email”, immediately followed by all the pictures in full size, so I can go to either one very easily.

Basically this is all you need for most web work using photos. I don’t do a lot of extra work to my photos, unless I am going back into the archives to try to use old slide photos that may have changed color, or they were taken with the wrong lighting. Fluorescent lights tend to turn pictures green (even digital ones), so to make them look natural, you have to blend some red back into them, but that should be a rare occurence if you take them right to begin with. To do any fancier web work you may have to use a program with more capabilities.

Serious Photo Editing and Graphics work

You have probably heard of a great program called PhotoShop From Adobe. It’s a great program for professional graphic artists, but it’s pricey. But there is also a free “open source” program which does the same things, called “Gimp“. But be prepared, they both have a huge learning curve! The more complex a program is the longer it is going to take to learn it.

But no one says you have to learn everything all at once, so don’t get scared! If you need to know how to remove “red eye” from a photo, then concentrate on learning that. Use the help feature to do a search for instructions for that specific task. If you need to change the entire hue from an old photograph, then learn that. Do one task at a time, as you need to do it, and it won’t seem so daunting a challenge. Don’t try to learn it all at once, because some features you will never use!

Some of the image manipulation programs can be quite daunting to learn, but there are many simpler programs available, just like PicResize which can perform specific limited tasks with very little learning time involved. I will try to present those to you little by little over the course of this blog, as you need to learn them.

The one thing that I will not do is get into the specific instructions on how to use each of the tools I recommend to you. Not only do most of them come with their own help screens and tutorials, but most of the tools I will be recommending already have a great number of followers and users who have already uploaded their own instructions and tips to the web in the form of YouTube Videos. From my own experience, I would venture to say that 99.9% of literally ANYTHING you want to know is already on a YouTube video. All you you need to know is how to search for it, and this also applies to other sources on the web, especially Google. By now, I expect you to know how to do searches on Google, as well as on YouTube, because those will be the two main sources of information that you will use in marketing.

Pictures and Search Engine Optimization

The other thing I see people missing on web images is using no “alt” tag. The alt tag is what shows up when you mouse over an image, and it should have your site URL as well as a simple description of what the picture is. If you mouse over any of my links you will also see some text pop up. That is an “alt” tag.  It simply means “alternate” text. On links it is just an added benefit, but search engines can’t read images… but they can read the alt text, and if they see that it is relevant to the search, they will present it on the search result page as an image result, giving you one more chance for people to find you! Most programs also allow you to insert a title and caption, as well as a link for the picture. That way, it not only helps with SEO on two more important counts, but you can insert an affiliate link within the picture or use it to direct the reader to another spot within your site or even off your site, such as to a payment processor.

So how do you insert an alt tag?

WordPress makes that very easy, because when you “insert” an image into your blog, it brings up a form window where you can enter all the information before it ever gets published. You need to pay attention to those forms and fill them out properly to accomplish what you need that picture to do for you!

On other web sites, you will typically have a similar window that pops up for that information. Think about keywords relevant to what else is on the page that you are putting the image on, and still keep it relevant to the picture itself. If you forgot to add alt tags to your pictures, go back and reload the pictures… and this time, enter all the information that the form asks for, and then re-upload it to the site. You may have to change the file name slightly or overwrite the old upload.

There’s really no excuse for people not knowing these things, The answers are all out there for free on the internet. All you have to do is look! When something doesn’t look right, like a picture hanging over the edge of the page, for Heaven’s sake, don’t leave it that way! Find the answer on how to fix it! If you are going to be in web work, you are going to be learning a ton of stuff on a daily basis. No one goes through life and gets ahead without learning something new every day.

Summary and Expectations

We’ll get into more image manipulation as time goes on, but for now, it’s time to move on to the final stages of any site… the analyzing and testing to make it the best that it can be. With this last bit of information, you certainly have no excuse for not having your site online by now, but you’re not quite ready to show it to the public yet. Hopefully, you have it set so that the search engines don’t follow it (yet), but it still can be seen by going to the exact web site. That way, if you want help, you can tell me where to find it so that I can see what you have done so far, and help you with it.

Don’t be bashful. If I don’t know you are out there by your asking questions, I can’t help you beyond what you read here, and this is just general stuff. I know you are going to have technical questions. Everyone does at one time or another! Or maybe you need more sources, for products, for images, for post material, for sales copy, for training, or whatever it might be. I can’t solve your problem if you don’t tell me what it is!

One thing that I did not make a part of this series, and one which you may be wondering about, is “How do I make money from a site?”  The answer to that deserves a series of its own, as there are so many ways to do that, and we will be getting into that as soon as this series is done. But let’s get your site online first, and get it tested to make sure everything is there that should be. Then you can decide what kind of monetization you want on it, and add it.

Then the next thing you are going to need is traffic. Some of that will come from generic SEO by being indexed, found and ranked on the search engines. Then we will get into the social aspect of marketing, adding social buttons to your site, and getting you set up with the many social sites out there. Remember, the object of any site is to be found, with the least cost to do so. And social media is a totally free and very effective way to promote your site.

Why Do I Need Social Media?

Due to the way the search engines rank your site in importance, is the main reason. The old way was with meta-tags, but because too many “cowboy” and “hot-dogger” marketers abused the use of the “keyword” meta-tags, most of the major search engines no longer pay attention to anything but the “description” meta-tag. Therefore, there has to be a new way of convincing the search engines that your site is important.

Part of that is using the right keywords in the proper places, and making sure that everything on the site is relevant to the topic of the site. Beyond that, they look at how important it is to the general public, particularly to other relevant and important sites. The best way to do that is to have your URL show up on those sites so the search engines know that someone there is talking about you! So, the best thing you can do is work the social media to the best of your ability. That means getting your site or blog “pinged” to the major social aggregators like “Technorati”, Facebook, Twitter, LinkedIn, and many others, as well as to make use of the free promotion from video. We’re going to show you all of that.

Let me know in the comments if this information has helped you. If you like what you are learning, then come back often so you don’t miss any of these posts. We have a lot more information ahead!

Thanks for reading!