Optimize Images for the Web

Published by Designzillas on September 17, 2013

View it here!


Pictures speak a thousand words; a photograph can convey emotions that even the best writers can’t always achieve. But if your website is filled with pixilated photos, or worse, photos that don’t even show up, well that right there is a thousand words and emotions that are lost in cyberspace. If you don’t properly optimize your images for the web, this could be your fate. Disinterested users lead to lost business opportunities. Can you afford not to optimize your photos?

NAME YOUR PHOTOS CLEARLY

Every single person has been through this scenario. You’re writing a blog or posting something on Facebook and you think of a great idea for a photo that you saved to your computer a while back. This photo will add so much spark and pizzazz to your post that it just can’t not be used. But alas — you go to search for it and it is somewhere in the middle of the hundreds of DMC930.jpg files on your drive. You regret not giving that file a relevant name now, don’t you?

The best way to avoid this terror is to name your file appropriately when you save it. Take the picture to the right. Don’t just haphazardly name it something like 342934sdkgh.jpg. It’s a picture of a an adorable cat, name it as such: Cat-in-Tophat.jpg. That’s more like it.  Now, when you need it in the future, you will know exactly what to search for!

Ease of search on your own hard drive is not the only reason why you should name your photo files with clear, relevant descriptions. It’s good for SEO too. Search engine spiders don’t just read the text on your website, they read your file names as well. Image files are great ways to pack some extra keywords in there without making your content impossible to read. When naming, think about how your users would search for their query and name your image file something akin to that. Remember, your website isn’t just there to look pretty — it’s also a resource for searchers.

REMEMBER “ALT TAGS”

“Alt tag” stands for “alternative text tag” and they are essential to the photos on your page. Sometimes, a photo is too big to load (more on that later…) and it either shows up strange, or doesn’t’ show up at all. Remember how images speak a thousand words? Images might also be the make-or-break to a sale, especially if you have an e-commerce website. Alt tags are useful when a browser cannot properly load a page. Instead of the picture, the description of the picture will show up so that users know what is supposed to be there. Alt tags help out your disabled users as well; they allow text-to-speech software to “read” the image to them.

Alt tags are also good for SEO. As stated before, search engine crawlers read the text in your image files; they also read the text in your alt tags. This is especially important for e-commerce websites looking to get their products to feature on regular and image search pages. When creating your alt tag, use the same strategy as when you name your files: name them something useful, relevant, and descriptive. For example, the alt tag for the picture above might be “Cat in Top Hat.” It’s simple!

WATCH OUT FOR FILE SIZE

You may think that using a gigantic photo and just resizing it in the actual source code will suffice when it comes to sizing your images, but this is not true! It will still read as a huge file, and huge files take up unnecessary bandwidth, making your page load slower than molasses in January. Studies by Amazon show that slow page load times can lose tons in revenue; they lost over $1.6 billion in sales when a page took a few seconds longer to load than normal. Do you want this to happen to you?

People are very fast-paced and impatient on the internet. They expect everything to come instantaneously. Google also takes notice when your page takes forever to load. Giant image files can oftentimes be the culprit of a slow page. How can you fix this? Decrease your image size! You can do this many ways. If you have access to Photoshop, take advantage of the “save for web” command; this allows you to adjust your photo to much lower sizes without forfeiting quality.

Don’t have Photoshop? Don’t worry! There are plenty of free image editing softwares and programs online that can help you to resize your photos. Here are just a few:

JPEGMini — This is a quick and easy program for resizing your gigantic JPEG files.

PicMonkey — This website is super adorable, but more importantly it lets you choose easily which image settings are the best to use depending on your situation.

Pixlr — This one comes with a free app for your smartphone so you can edit pictures on the go.

FotoFlexer — This site lets you work with layers!

GIMP — This one is a software you have to download, but it’s pretty great for a free image editing program.

TAKE CARE OF YOUR IMAGES

Good images can make or break your website. Pay attention to them and give them the right treatment, and they can do wonders for your site. Neglect them and throw them around willy-nilly and they will come back to bite you. Just remember that images are not only important on the surface — the things you can’t see like alt tags, file names, and size are essential to the success of your website.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s