Have you uploaded photos to the web to display to family and friends on such sites as Facebook and Flickr to find that it takes forever to upload or the page freezes before the upload finishes? Have you sent emails with image attachments that take  a long time to send.  If so, it is important to know the basics about image sizes for the web.  If you are displaying images on your own website or blog you will need to understand in more detail.

Images that are slow to send, upload or load have large file sizes. In general this also equates to the actual size of the image but two photos that look the same size can have very different file sizes depending on their quality.

Although faster internet speeds mean that you can now use larger file sizes than a few years ago you still have to cater for those people using dial up connections and for those whose speeds have been reduced because they have used up their allotted allowance of bandwidth.  Even with faster connections large size image files can take too long to load on a web page. You are likely to lose your reader’s interest if they have to wait too long to view your image.

What does image file size mean?

Here I am talking about the size in bytes, kilobytes (kb) or megabytes (mb).  To get an idea of the file size of images stored on your computer:

• Windows users can open windows explorer (not internet explorer) to view their files. If you are in thumbnail (large icon) view, hover over an image and its size in kb or mb will show up in a pop up box. If you are in detail view you will see the kb size in the size column.

• How to view image sizes on a MAC if they are not already showing;  Select list view from a Finder window,  then open “View Options” from the View menu (or hit Command+J). Select the checkbox next to “Calculate all sizes”.

Photos taken with my camera have a file size of about 3-6 mb or roughly 3000-6000kb (1024kb=1mb) whereas the 125×125 square images in my right sidebar are all under 20bytes (0.020kb) The original file size of the photo below was 4044kb but the reduced size shown here is only 33.3kb. A huge difference isn’t it? The quality of the image as seen on the web has not suffered at all.
 

Why can you reduce image file sizes so much for the web

A computer screen is still incapable of displaying images at the same quality as your camera saves or your printer prints. Your camera may save an image at  over 300dpi (dots per inch) or higher but your monitor just cannot display it at this resolution.

Pixel Size

For monitors it is the pixel (px) size that counts when displaying images and the pixel size depends on what resolution your monitor is capable of displaying. Pixels are the tiny square or rectangular dots that your monitor uses to display text and pictures.  PPI refers to the number of pixels per inch.  On  a higher resolution monitor, the pixels are more numerous and smaller, so what you see on the screen  also appears smaller and more items fit on the screen.  According to a January 2011 survey by w3schools http://www.w3schools.com/browsers/browsers_display.asp 85.1%  of computer users now use screens with a resolution higher than 1024×768 pixels . If your webpage content is larger than this scrolling is needed.

Although you can now display images with many more pixels than a few years ago you still have to be concerned about upload time and webpage loading times. Here is an example of three images (click thumbnails to see full size ) all the same pixel size, but they have been saved at different quality.

100% file size 553kb

50% file size 91.7kb

25% file size 61.6kb

As you can see the image saved at 50% quality still displays very well, when it is saved at 25% it is not good enough (see all the waves in the sky). The file size saving is also much less between the 25% and 50% images than between the 50% and 100%. The 50% image looks fine on my  screen and I would consider that it is optimized for the web.

For a website I suggest you use images of lower pixel size than the 91.7kb I have used here, as it still takes a while to load (far too long if you have a number of images on the same page).  As I have done here, you can display a smaller size image or a thumbnail on the main page which links to the larger image. Keep in mind that the better quality your image the more likely people are to copy it, even if you have a copyright notice on your site as the images will print out better. I would not normally use images of this pixel size in a post as they would be too wide for this blog column which is only 515px wide.

Here  are close ups of the images – (click on the thumbnails for the larger images). You can clearly see the pixels here. Again at 50% there is not much difference, at 25% the colors start to smudge.

100% quality

50% quality

25% quality

When you are deciding what pixel size to use for your image you need to consider the issue of displaying information “above the fold” (within the area you see without scrolling).  Information (text, image , video etc) that you want to be noticed the most should, where possible, appear above the fold. This way they are likely to stay on your page longer and to click on any buttons or links you have placed there.

Tools to check web page loading speeds

Free online tool – Web Page Test

Page Speed online or use with browser extensions for chrome and Firefox

There are many programs that can reduce your image sizes for you and I will cover that in a future article.

Image Sizes and Optimizing for the Web | Blogging Sueblimely

Mimicry is the highest form of flattery

If you are short on ideas, or are just unsure what other colors you can add to those you already like, browsing other websites can be useful but time consuming. Screenalicious, which showcases websites, also displays the color palettes off each featured site, along with the corresponding hexadecimal numbers.

If you have seen a website whose colors you like but are having trouble reproducing them I Like Your Colors will tell you exactly what they are. Simply type in the site URL and you will be given a graphical representation of the colors and their numbers. Here are the results from the Mashable site:

The Firefox Addin Colorzilla not only provides an eye dropper and a color picker tool but allows you to analyze and save a color palette of any webpage.

DOM Color Analysis Results

http://www.smashingmagazine.com/

Color Palette Generators

Then there are the many color palette generators. A few stand out from the crowd with regard to features and ease of use:

Adobe Kuler allows you to explore and vote on color schemes created by others as well as create, save and share your own. You can generate a color theme from scratch or use colors from an uploaded image or from Flickr. If you are not feeling creative you can choose from the gallery of user created schemes.Your swatches can be downloaded as Adobe Swatch Exchange (.ase) files for use in Adobe CS (2,3 and 4) programs. Kuler is integrated into CS4. If you do not have these Adobe products an Adobe Air application, Color Browser, allows you to import and save downloaded .ase files to.organize your favorite color palettes locally.

Color Lovers offers simple and more advanced color palette creation tools; although I find the simple tool harder as it offers no suggestions as to color combinations. As with Kuler you can browse and search for user contributed color palettes and use these yourself. Color lovers provides a whole host of other features to help you with your creations. Vote on the user created palettes and patterns and submit your own. View a showcase of websites to keep up with color trends. Connect with others via forums and groups. Follow their colorful blog. Proclaim your love of Color Llovers to the world by purchasing their T shirts.

Aviary Toucan allows you to create a color palette from scratch or choose colors from imported images (from Flickr, Facebook, Picassa, by URL or from your computer). A “color deficiency preview” shows you how a color palette will appear to those with various different kinds of color blindness.

Color Jack has two tools, Color Sphere and Color Studio, providing you with plenty of ideas and suggestions as well as catering for your own creativity. Export your creations to a bookmark, delicious, illustrator, photoshop or to a URL.

Colors On The Web has 3 basic color tools and mixers as well as articles covering color theory, color terms, combining colors and contrast..

Absolute Color Picker is a free downloadable program that lets you select and pick colors using various color models. It also features a color picker, color scheme generator, color history builder, color scheme management system, screen color grabber (eyedropper)

If you just prefer to choose from existing color palettes rather than create your own there are a number of sites, in addition to those mentioned above, that offer listings with search capabilities including:

• ColorCombos – they also have a tool to “grab” colors other websites.
• Colors on the Web.
• Color Schemer Gallery The Color Schemer products are not free but you can use their gallery and forums without buying..
• Color Hunter is different in that its user created palettes come from uploaded images and its tags are based on the type of image as well as colors.

Yet more tools

Your header image needs to be in line with the other colors on your site. You may have an image already chosen and then base your other colors on this. If not, Idea Labs clever MultiColr Search Lab can help you choose images using colors you have already decided on or just give you ideas for an overall color palette This tool searches through 10 million Flickr Creative Commons images based on your choice of up to 10 colors. They also provide other tools which search the Alamy stock photo site.

Google have very recently integrated color search tools into their Image Search. You are able to filter Google images by the predominant color. Click on “All colors” above the search results and you can choose one of the 12 available colors based on your search terms. For example this was a result of a search for beach sunset filtered by the color pink:

To ensure accessibility for those who cannot distinguish colors easily there are tools to check for legibility and contrast on your site. In addition to the Color Deficiency Preview tool in Toucan, ColorSelector is free desktop software from Fujitsu for judging the legibility of background and text colors. The online tool, Color Accessibility Wheel, shows you how a background and a foreground color will look to those with three types of color blindness, based on colors you choose.

You may not be interested in whole palettes of colors but just want to know the details of one particular color you see online. Eyedropper tools are the simplest way to accomplish this.

• Instant Color Picker is free to use on one machine, with nag screens, or to buy. More than a basic color picker, this tool allows you to zoom in on websites, save up to 20 colors and copy color swatches as bitmap and paste it to other applications. You can also test color combinations using various layouts.
• My trusty favorite program MWSnap is a screen capture tool which includes a color grabber and measuring tool.
• If these are more than you need try the more color grab only ColorSelector for PC or Mac from Fujitsu or ColorPic

Finally, for WordPress users the Theme Tweaker plugin displays the existing colors from your current theme, and gives you a color picker to replace them. You can also change colors in bulk by for example inverting them, converting them to greyscale.. Once you have chosen your colors, you can preview or activate the new theme. You can save your new stylesheet locally and then upload to your blog server to replace your current theme or create a child theme.

There are a whole host of Firefox addins that will help you with your site colors which I will cover in my next post.

You now have the tools at your disposal to choose your site colors but may not have the know how to implement them into your theme. In upcoming posts I will provide you with instructions and details of tutorials and tools you can use to help you with your CSS stylesheet coding.

Best Color Tools For Your Blog | Blogging Sueblimely

Graphics and Icons

Smashing Christmas Icon Sets Smashing Magazine always has great resources.

Nicu’s holiday gallery contains these:

There are 16 icon sets to be found at FreshFreeStuff.net including social networking and RSS buttons – Free Christmas Holidays Icon Roundup . This is a selection from the sets available:

Gifts From Designers To You: Best Of 2008 – goodies include icons, fonts, wordpress themes and headers.

50 Most Beautiful Icon Sets Created in 2008 including this Christmas set:

A set of Christmas smilies is offered by Christmas Corner, many of which are animated:

DigiScrapDepot.com has 3516 Christmas Freebies if you want to
decorate the pages of your Christmas photo scrapbook pages.

1stWebdesigner brings us a range of Photoshop brushes- 48 Snow, Ice, Snowflake and Christmas Brushes

Mel’s Photoshop Brushes gives us a set of Christmas Illustrator Brushes

A search for Christmas on Adobe Exchange shows a plethora of Illustrator and Photoshop images, gradients, patterns, shapes, styles and brushes.

Desktop Wallpapers and Screensavers

25 Outstanding Christmas Wallpapers to Decorate your Desktop! from sagacious of Weird Resources

Vlad Studio has a whole range of Christmas Images/Desktop Wallpapers (higher resolution by subscription) and E Cards.

Wallco.net has a huge selection of free Christmas wallpapers in various resolutions – 42 galleries to date. I really went to town with these and created a whole folder of them to use as a My Pictures Slideshow Screensaver.

To create your own Christmas screensaver slideshow (or any other sort) in Windows XP – go to Desktop/Properties/Screensaver and choose “My Pictures Slideshow” in the drop down box. The default folder is My Documents/My Pictures but in settings you can choose any folder of pictures you want.

Not free but a good bargain – Woo Themes have a 4 for 1 special going until 24th December – $70 USD for a single licence and $150 for a developer licence.

Christmas Image Tutorials

Strobist lets us into some secrets of How to Photograph Christmas Lights using even a basic digital camera. I love Christmas lights although the ones I have appreciated the most this year were the new green and red lights in the car park of a newly renovated shopping centre which showed me the way which spots were free.

Smashing Magazine gives us 60 Beautiful Christmas Photoshop Tutorials

PS Lover has a whole range of Photoshop Christmas Image tutorials but turn your speakers down as they advertise those very annoying smilies who keep saying “Hellooo”

What not to do when blogging

Finally but not least, Michaela Lica of eWritings has provided us with some good Christmas blogging reading by publishing her ebook Blogging Tips: How to be Cocky and Vexatious – a collection of blog entries that followed her 10 Ways to Make Your Fellow Bloggers Hate You meme.

Thanks to Design Bliss for putting me on to many of these freebies in their – Over 100 Free Christmas Design Resources – A Design Bliss Mega-List post

I am now off to join the teaming throngs at the shopping centre which is enough to provoke this Christmas emotion in anyone:

100+ Free Christmas Images and Blogging Gifts | Blogging Sueblimely

Brightening up your blog for Christmas may need the services of stock photo sites. There are plenty of sites offering free Christmas images and clipart but it is hard to find your way through popup ads and flashing glittery images (that is not intended for Christmas) to find something useful.

For Photos Morgue File, FreeFoto.com and Dreamstime’s free section offer a good range; Flickr too if you search for images that you are allowed to use. I always use the Compfight Flickr search site to look for Creative Commons images.

For Christmas Clipart, hellasmultimedia.com has a large selection of images, lines and borders and Clipart Guide has almost 500 images. Microsoft Office clip art library is always worth a look at for simple clipart.

If you want to easily add some graphics to Christmas Newsletters try one of the free Christmas Dingbat fonts. The one below is from Winter Yawns.

More ideas are welcomed. If you want to join in the Challenge please read Blogging Christmas Challenge for details. My Christmas Link Love List can be found on its own Christmas Page

Christmas Challenge – May Your Days be Merry and Bright | Blogging Sueblimely

Yearbook Yourself

Its amazing how much I look like my mother once I add a 1960′s look.

Wigflip

A range of generators including:

• Superstickies

• Easy Street – street sign generator

• Say What – add speech bubbles to an uploaded photo
• roflbot Add text to an image -create lolcat or lolband type images

Dumpr

Another site with multiple generators. e.g.

• Rubics Cube Generator – upload an image and turn it into a rubics cube

Doppel Me – create your own avatar.

Reflection Maker

Image Chef

There are many different kinds of generators at Image Chef – example:

• Fun Generators

Comic Strip Generator – choose backgrounds, characters and add your own text.

Create a graph

Why would you want to do this for fun you may be asking – well, you may want to submit them to graphjam:

Big Huge Labs Flickr Toys

LoonaPix – add frames and borders and trim your images

Why would you want to create silly images?:

• As a break from tedious work.
• You need more practice perfecting procrastination
• To add special effect images to your blog and possibly get them Stumbleupon Photoblogged – hint hint.
• You want to be a star contributor on:
  • icanhascheezerburger sites (lolcats, loldogs, pundit kitchen….), althouth they do provide their own generator (if you need to learn lolcat speak try the Definitive Lolcats Glossary) or take a PAWS Universitee course
  • graphjam
• Just to be silly – the only reason needed?

Thanks to the Generator Blog for putting me onto some of the image generator tools- it would have saved me a lot of time if I had found this site to begin with.

Online Image Generator Tools | Blogging Sueblimely

Image Search Tools

Creative Commons Images

• Creative Commons Search by Creative Commons – searches Google, Yahoo and Flickr for Creative Commons works. If you want to use an image on a non commercial site then you can use any image you find here. Additional search options allow you to look for:
  • only CC works that you can modify, adapt, or build upon, and or
  • works that can be used for commercial purposes.

Source: g-hat Flickr

• Compfight is a site that provides a quick method of searching for Flickr images. The results are displayed as quick loading thumbnails, 250 to a page. Clicking on a thumbnail takes you to the photo’s Flickr page. The option is provided to search within tags or all text for Creative Commons usage only or for Creative Commons commercial usage allowed. Still check the CC licence if you intend to adapt the image to make sure this is allowed.

• Flickr’s Creative Commons Page search for photos according to their type of Creative Commons License. I would use this if I knew I was going to edit a photo otherwise I find Compfight is quicker.
• Every Stock Photo – a search engine for free photos from many sources. View a photo’s license by clicking on the license icon, below and left of photos or use the advanced search function to choose which sort of license you want.
• Firefox – Use the Creative Commons search engine that is built into Firefox by choosing the CC icon from the drop down menu to the right of the Firefox search box.

• Wikimedia Commons is a database of 3,089,392 freely usable media files which includes images from these sites.

Source Cool Image Bank Ios – memories of holidays long past

Images without Creative Commons search criteria

• Google Image Search comes up with a treasure trove of images but, as the search results contain images from all Google listed websites, you are unable to use a great deal of them; for copyright reasons. I do use this search but only for ideas when creating my own images and for personal browsing purposes. Today for example after doing an interview with Kuanyin on Blog Blond my interest in Maui was peeked and I ended up searching for images of Hawaiian volcanoes.

Source: mattsabo17 Flickr

• Pixsy – a search engine for images and videos, including stock photos. Allows search to be customized by criteria – vector graphics, black and white, greyscale and backgrounds, digital photos. Categories covered are: News, Celebrities, Sports, Travel, Viral, Video, Entertainment, Music, Stock Photos, Edge and Miscellaneous. (Pixsy is the search engine powering Compfight, Lycos image search, Mokoseek and various other sites that distracted me from writing this post)

Images from people you know

Ask a fellow blogger if they would mind you using an image from their blog – they may be pleased to allow it to get a backlink. How are these for pairs of crocs??

Source: Ultraviolet Observations aka Sueblimely’s daughter

I have justed added a new site to my free image post – a smallish collection as yet but very impressive – unprofound.com

Search for Free Images | Blogging Sueblimely

I have spent considerable time researching the best sites to find online free images/stock images, along with their copyright/ Creative Commons licences. Some of these sites will probably already be familiar to you but others new, as they were to me. I hope you find this of use, as it makes the time spent all worthwhile. Sites are listed in alphabetical order.

Free Images

• BurningWell – a repository for public domain (free for any use) images. Donations welcomed – anyone have any Melbourne images they could upload, Melbourne is not represented there at all!

Waterlillies – Fiji

• Flickr Usage: image pages display their Creative Commons licences
• Free Digital Photos Dot Net – Royalty free images Usage: commercial and non-commercial.
• Free Photos Bank Usage: see terms
• Free Public Domain Photos You may use these images for any purpose, including commercial

Morning Glory

• Freerange Stock free stock photos – Freerange is an advertising revenue supported photographic community – photographers get paid when users click on the ads that appear next to their submissions. Usage: commercial and personal.
• Free Web Page Headers – Usage: Creative Commons Attribution-NonCommercial 2.5 License.
• freewebphoto Usage: Free for linked web use
• Image*After a free online photo and texture collection. You can download and use any image or texture from the site Categories covered: architecture, art, food, nature, industry, humanoids, human parts, landscapes, objects, vehicles. (pretty much everything) – Usage: commercial or personal but no redistribution.

• Kave Wall – Free Stock Photos, Images and Textures. Usage: Creative Commons Attribution-NonCommercial 2.5 License.
• morgueFile – free high resolution stock photos. Usage: commercial personal.
• Openphoto is a wiki-based photography site. All images on the site are marked with Creative Commons attribution. Anyone can register and upload images. Users can browse or search by tags to find photos they are interested in.
• Pixel Perfect Digital Free Stock Photos Usage: Personal non-commercial use, restrictions apply for commercial use (also features premium low-cost images from Dreamstime).

• Microsoft Clip Art
• StockVault – stock photo sharing website. Over 100,000 images. Usage: Free for personal and non-commercial purposes.
• Stock.XCHNG – over 350.000 free user submitted images – terms of use vary but are displayed on each image page.

Smaller Free Image Sites

FreeImages.co.uk – over 2,500 free stock images. Usage: Only a link to site required. *

unprofound.com which was started by one photographer, Jim, has now grown to become a “a global collaboration of photographers” all generously sharing their work freely with the only restrictions seeming to be on redistribution of the photos. Check the FAQ if you are unsure. No attribution is required although I think that giving credit is the right thing to do wherever possible. Search is via photo color or photographer and a search tool still to be refined. I had trouble choosing only one image out of this wonderful collection of high quality photos and I hope to see this site grow and become well known.

Specialist Free Image sites

There are so many of these that I cannot mention them all here but I would appreciate it if anyone can recommend any that are worthwhile checking out.

These sites contain images relating to specific topics or genres, those that have been designated as public domain, creative commons or are of an age where copyright has expired.

• Gimp Savvy Photo Archive – images come from three main sources: the National Aeronautics and Space Administration (NASA), the National Oceanic and Atmospheric Administration (NOAA), and the U.S. Fish and Wildlife Service (FWS) Usage: copyright free, some restrictions with regards to privacy for commercial usage.
• Old Book Illustrations includes galleries of animals, plants, landscapes, characters, scenes, buildings and monuments, science and technology and miscellaneous illustrations scanned from old books.

Source

• Plants of Hawaii – Creative Commons Attribution 3.0 License

Agapanthus aka Mt Eliza leprosy Source

• The Best Copyright-Free Photo Libraries - a post on gov.watch with links to specific public domain (copyright free) government photo libraries.
• PhotoEverywhere UK Free Travel Images Creative Commons Attribution 2.5 License – Free to share and remix with attribution. *
• Wikipedia:Public domain image resources includes links to sites of historical images, 2,600 realist painters (many in the public domain), copyright expired visual artworks, scanned images from old books, logos, stamps, US government sites as well as general collections.
• wellcome images -
  2000 years of human culture Usage: unless otherwise stated – Creative Commons Attribution-Non-Commercial version 2.0 or Attribution-Non-Commercial-No Derivative Works 2.0 UK: England & Wales

Crystals of a DNA repair protein bound to DNA

Source Bernard O’Hara & Renos Savva, Wellcome Images

Personal Photo Sites

Personal sites where images are offered for download free of charge:

• PD photo.org contains public domain photos taken by the site’s owner, Jon Sullivan who also has a blog, aptly titled, Jon Sullivan

John reminds us that if an image is in the public domain then it must stay there. You cannot claim it as your own nor add any extra restrictions on its use. He also advises that it is wise to assume that no model release has been given for commercial use; unless stated otherwise or indicated by its Creative Commons Licence.

Future posts in this series will include image search engines, directories of free image sites, where to find low cost images, useful image tools and Firefox image tools. I know because most of them are written already

* New sites added since original post. Last update: 17 July 08

Best Sites For Good Free Stock Images | Blogging Sueblimely

I have been trialling the WordPress ‘Yahoo Shortcuts‘ plugin for a week or so now. As I found it a little tricky to come to grips with, I thought I would give you a bit of a run down on how to use it and a review based on my experiences. The images and popup links in this post have mostly been embedded using the plugin.

This plugin uses Yahoo Shortcuts to add Yahoo search popups and Creative Commons-licensed Flickr photos to blog content.

The image to the left is an example of a Yahoo Shortcuts “badge”.

As you are writing your post, the plugin searches for media relevant to your content. A message, at the top of the sidebar in your post window, alerts you to the number of ‘Shortcuts’ that have been found, allows you to review the post and choose whether to include all or some of suggested links and images:

The information suggested is based on various Yahoo search topics and services. A ‘Shortcut’ may lead to a Flickr image, a financial data, stock quotes , a map , a news item or information about specific companies, products, and people. More services are to be added (maybe maybe sports, movies, and music?)

If you want to view and add what has been suggested for inclusion in your post, click on the “Review this Post” button. You will be taken to an edit screen, which shows your post with the suggested shortcut ‘keywords’ underlined with a blue dotted line and a small arrow icon to the right of them. Hovering over the underlined word gives you a preview of the link suggested. Clicking on the arrow brings up options based on the type of content suggested. From here you can delete the link. Where graphical representations are available you can choose to convert the link into a badge, which embeds an image instead.

A section at the bottom of the Yahoo post review window post shows Flickr thumbnails based on keywords in your post. If there are no images to your liking, a search function allows you to browse for more within the same window.

Hovering over a thumbnail will produce a popup window showing you a larger version of the image. If you decide to include it, clicking the “Add to Post button in this window produces another popup window where you can choose the size of image. Pressing “Submit” here will insert the image into your the review post window. Once you are happy with the shortcuts included, press save and you will be taken back to your post window.

Opinion:

Flickr Image placement – if you wish to move the image from its automatically embedded position at the top of the post to somewhere else, care has to be taken that your post layout is not messed up and that text is not floating in places you don’t want it to go. Center placement may be the safest. This image came up for the words “Flickr Image” and he is cute so I thought I would leave him here:

I have not found much use for the linking and badge features, but it was only its Flickr image capabilities that initially attracted me to the plugin.My blog topics do not lead to many automatically suggested and relevant Flickr images. I can, however see this feature being of great use to some blogs.

Once I got used to the interface the plugin became much quicker to use.

Let me try some words to see what the plugin comes up with:

“Funny Sign”‘

“Chocolate”

That is too tempting, I feel a chocolate attack coming on.

Links:

• Yahoo! Shortcuts page
• Yahoo! Shortcuts Download page.
• Yahoo! Shortcuts Demo Video

Yahoo Shortcuts plugin for WordPress | Blogging Sueblimely

Definition of the alt attribute

The alt attribute is a method of providing a descriptive text alternative for images. Example:

<img src=”http://www.yourdomain.com/your-image.jpg” alt”this is the alt text” />

Reasons for using the alt attribute

• To display a text equivalent for an image in browsers where images have been turned off.. Reasons:
  • To speed up page load time for users on slow dial-up connections.
  • To avoid viruses that can be spread through image files, where the user does not have adequate virus protection.
  • To save bandwidth when users are concerned about using up download limits.
  • To save download amounts if using a pay per download scheme (e.g. when connecting to internet via a mobile phone)
  • To aid browsing when using a handheld device e.g. PDA, mobile phone, electronic books, Blackberries.
• Accessibility purposes for users with disabilities:
  • For those who use assistive technologies such as screen readers which convert text-to-speech, sound icons, or a braille output
  • For those with color blindness which precludes them from distinguishing detail in images.
  • For those using audio-based browser technologies
• Search engine optimization:
  • Most search engines interpret the meaning of objects by analyzing their alt attribute. They cannot see images!
  • Use keywords in alt text to help with indexing and pagerank.

How to add alt text in blogs

In Blog Posts:

Blogger – In your “Create” post screen upload or point Blogger to your image location using the “Add Image” icon in either the visual or html post tabs. Once this is done look in the Edit HTML window and you will find an empty alt attribute which looks like this alt=”" . Add your text in between ” and ” e.g. alt=”this is the descriptive alt text”

WordPress - add your image using the image icon in the new post visual tab. Add your “alt” text in the Image description box of the Insert/Add Image window.

Elsewhere in your blog:

If you are manually adding an image to your blog via widgets or straight html coding add the alt code to the image tag: For example:

<img src=”http://www.sueblimely.com/images/icons/ifollowblue.jpg ” alt=”You comment, I follow” /> will produce:

If you are using IE, hovering over the image will show this text. Another attribute, “title”, can be used for displaying image description and this does show up in Firefox.

Tips for the text in the “alt” attribute

• Keep the text short – if too long it may break page layout where images are turned off.
• Ensure the text is meaningful and adquately descriptive for accessiblity purposes or where graphics are not being displayed.
• Include keywords for search engine purposes but still take account of the first two points above.
• If the image is a text image, use the same text for the “alt” attribute – e.g for blog titles
• Use CSS background images for bullets, lines or other decorative elements where descriptions are not necessary to make sense of the page. If you need to add them directly to your page you can leave the alt tag empty (alt=”") or, for example, use alt=”*” for a bullet and alt=”—” for a seperator.
• Use the “title” attribute in addition to the “alt” where you want to add longer descriptions. Example:

<img src=”http://www.sueblimely.com/images/icons/ifollowblue.jpg ” alt=”You comment, I follow” title=”Your comment backlink is followed by search engines.” />

Checking out your page:

If you wish to see how well you are using the alt attribute,

• Turn off images in your brower – see if your alt attributes make sense -try reading your page out loud.
• Convert your blog post into audio using a service such as Odiogo

I guess my blog topics do not lead to relevant Yahoo Shortcut images but as this was suggested for the term “alt”, I liked it and appropriate or not I am using it

The “Alt” Attribute | Blogging Sueblimely

This is what I caught:

The images here were all captured using “Kwout” which I mentioned in a recent post Blogging Toolchest Kwout . This really saved me some time, although the images are being hosted by Kwout rather than on my own server. If you wish to download copies of any of these buttons please click on the text links or the images themselves, as I reduced the quality of the images to speed up page loading.

RSS Buttons

Metallic RSS Buttons by Snoskred

30 Free Vector RSS Icons - smart looking square icons
Circle Social Bookmark Icons

Rss Icons Orb v2

Feed Icons – small feed icons in various colors

Free Glass Style RSS/Feed Icons

Free RSS Feed Icons by Nyssa Brown a Web Designer from Brisbane

Zeusbox Studio

Feed Icons for Guitar Enthusiasts

Christmas RSS Icons – a bit late for this year

On Flickr:

Social Networking Buttons

Social Bookmark Icons -Circle by Fasticon

Social Bookmark Icons – Square by Fasticon

GT McKnight Buttons – nearly 4000 pre-made 80 x 15 buttons

Smashing Magazine Icons, buttons, templates

Add this – small buttons and script good for the bottom of posts

Absolutely Del.icio.us Tools Collection from Quick Online Tips

Technorati Widgets from Technorati

Online Button Generators

freshbadge – A very versatile button maker, choose shape, size, effect, text… (Thanks to Snoskred for putting me on to this one)

80×15 text icons

• Kalsey’s Button Maker – Custom Feed Icons
• Button Generator
• Button Maker Online from Dynamic Drive
• Feedforall RSS Graphic Button Maker
• RSS Buttons
• Brilliant Button Maker

Larger rectangular text buttons

• Chicklet Maker
• Online Button Maker
• Blogflux Button Maker
• RSS Icons

Standard Buttons

• RSS Button Maker creates standard or drop down menu and code for Blogger and WordPress
• Create Social Bookmark Chicklets for digg, del.icious, furl, yahoo
• One Button, For All XML/RSS Readers

Other

• Glassy Button Maker

• Cootext Graphics Generator – thanks to Jayne of Our Great Southern Land for this one.

DIY – Photoshop Tutorials

• Design a custom RSS feed icon
• Glassy & Vibrant Rss feed icon Tutorial – Vista Style.

Please let me know if you know of any more useful resources like these.

Feed and Social Networking Buttons | Blogging Sueblimely