Managing images for websites is an important function that demands planning and attention from management: This is targeted to Mid-level managers, new business owners and liaison staff.
This article drills down from a management guide to high-level technical tips.
TAGS-This site is about: planning a professional-looking website, how to select images, pictures, creating a logo, tips, how to create pictures, photo management, types, management of photos, image management, how to set up, free images, graphics, backgrounds, icons, website templates, buttons, clipart, change pictures, add graphics, gallery, purchase, content manager, image handler, web site generator, Dreamweaver tips.
Overview:
Attractive websites must utilize attractive images and graphics as key elements. Marketing strategy, Logos, style, colors and trade dress are controlling factors.
Your photos and graphics must be excellent and clear, and not look like a patchwork or afterthought. Even the background is crucial to the color scheme and style, and must not detract from the main elements. It should not be pieced together.
The site must not have clashing colors, buttons that look out of place, and lame graphics; It must not look cobbled-together over years by different designers. Nor can it look like a generic template and mostly cheap off-the-shelf clip art.
Managing web site pictures requires planning, oversight and standards to ensure cost-effective reliable on-going improvements and updates. Like any other part of computer system or site design, standards are needed for creating and acquiring images, copyrights protection, naming, placement, access, organizing, tagging, setting standards. This is all for the purpose of proper effective usage in web sites with artistic flair. These standards should be documented so changes in personnel are not a crisis, just like it should be for any computer project. Proper staffing and training are crucial.
Good management of images, logos and web media is as important as managing other technical areas to avoid crisis, create the best web presentation, manage change and keep long-term costs down. Finding the mix of technical with artistic talent requires special management ability, as it does with all aspects of good graphics and web design and site management, part of your over-all marketing strategy. A site must respect copyright rules on images of others or be subject to possible lawsuit, especially if you are successful.
Choosing good software is crucial: How images are installed and handled by the design software and scripts is critical to future updates or site moves. Some image handlers in "web site generators" and shopping carts make it impossible to reuse those pictures when you move or upgrade. And you MUST upgrade to current versions to avoid hackers, security issues and be compatible with servers.
Where to Start:Everything begins with your target customers: What do they like, where do they hang out, what are their ages and characteristics, and what benefits are to be conveyed?
From that flows the business and marketing strategy, the "personality" of the company: The "Trade Dress" has a style, look and era, whether wild or futuristic or eclectic flair, or perhaps a familiar, comfortable, conservative or classical approach-look, to reflect that personality. Think marketing, advertising, positioning and strategy. Emphasize advertising basics: Headline, sub-head, bullets, drill down to features, benefits and feelings generated. Add attention-getting relevant pictures of the the product or service in use. Pictures convey your core competence, your image (creative, professional or reliable proven) your products, the benefits to the customer and the setting of usage, testing or creation of the products. .
Start with the Logo and then the Graphics, Icons, etc, to match the stationary and to fit on business cards, banners, etc. . Begin with sketches and examples. Be sure it can also fit on packaging and products. Be sure the Logo fits with the Brand name and slogans.
The Logo is easy to identify, not too detailed, not too confusing, not easily misinterpreted. Its colors are critical. Colors must be coordinated in certain ways. You need an expert to create or at least critique your Logo in coordination with your trade dress and prospective website. Since the logo and related graphics and trade dress determine some basics of your website, spend a little extra time on that and confer with your expert web designer.
Be sure your company image, strategy, focus, differentiation, style and trade dress are well in place before choosing your final logo and logo colors. The logo can be a major limitation on site style and color.
Legibility is crucial: Remember, a Logo must also show up clearly on small business cards and stationary. That is why most logos like AT&T's and Apple's are simple and easily recognizable from a distance, without fine detail.
The nature of the company dictates it's style. The web site must be a coordinated, clear and consistent usage of layout, colors, Logo, graphics and pictures with perhaps some brief video to build interest, and substantial clear text, in a layout where people can "drill down" into the subject they like. Avoid complex background patterns that make text hard to read, and avoid most moving Marquees and moving Gifs (one or two, very conservative may be OK). Avoid word wrapping around images.
Font, graphics, icons and buttons are next. Do not choose overly complex buttons, or an overly strange font, unless that is essential to the style. Many computers will default to some other font. Buttons should be fairly large and simple, allowing text on them. An icon or simple picture on a button may be OK, but usually not.
After choosing main colors and some graphics, then discuss and look at picture examples. These pictures can give ideas or even dictate a theme or direction for parts of your site.
Avoid too much use of images, graphics and Flash:
Avoid the temptation of the latest trend, to make the home page and most pages a big beautiful picture with floating images and text. Such approaches can look OK, but tend to follow art more than function, which is to deliver headlines and text and specific pictures that sell your product. Also the beautiful picture can confuse the eye, make text harder to read, and distract the focus from the headlines and sub-heads. Focus on the pictures does not help search engines.
Likewise over-use of large gaudy graphic icons can begin to look like a bad instruction sheet for people who can't read. If over-done, it detracts from Headlines and text message.
Image usage and purposes:
Images are essential for most sites. They create more interest than most text, except some headlines or sub-headlines. Images are important to trigger emotions and can aid rapid understanding of what the site is about. Images usually appear on most pages, unless the site is a technical or white paper.
Over-use of images and Flash detracts from more important text like Headlines and sub-heads. Sleek attractive images are like icing on a cake, to grab some attention but not detract from the message.
Professional-looking graphics, color schemes and photos make the difference. Start-up and small businesses can save money by not over-doing graphics, which are not only expensive, but take a lot of time to select or design, install and track. Good graphic designers are not cheap. Really good photos in higher densities, even from image suppliers are not cheap. And Flash is very expensive for original works, and difficult to update.
Logos, buttons, images, graphics and fonts are the elements that must match the business image and trade dress, the look, the personality. A prime example is www.cornerbakery.com. That site wisely and prominently integrates various images into its simulated classy interior, with its logo as a sign, and outstanding food pictures. That design goes to the heart of its target audience to immediately inspire confidence and reminders of scrumptious foods. Corner Bakery managers know their job is to immediately make you hungry and wanting to go there.
That is also a good example of images becoming part of the personality, overall trade dress that becomes your business to people. They look for those images, fonts, graphics and colors to help identify your special brand and products. Getting it near right from the beginning is a great way to get and keep customers.
Layout and appearance should be consistent between pages, with the Logo most prominent on the home page, but usually in the banner on most pages. Do not clutter the pages, keep white space around text. Avoid too much text.
Web-Success articles emphasize planning for periodic update cycles within marketing campaigns, because a web site evolves, based on classical direct marketing (like the old "mail order") principles of testing appeals and offers, testing ads, keywords and content, then modifying the strategy to fit the market or changes in the market place. We call it an iterative process of evolving to fit the marketplace.
Management has the critical function of total integration and balancing of skills, strategy, images, trade dress and resources---to meet the market most effectively. Obviously very good planning, staffing and services are crucial.
Priorities in Creating, Selecting and Using Images:
The number one rule is: Do not let images be so striking and dominant that they get in the way of your main messages; Keep your visitor focused on your main messages: Headlines and bulleted points, which lead to the reasons your products and services and company are better or different than others in your niche.
Use sharp, attractive images and graphics that fit in perfectly and say that you care enough to do things right to make a balanced, informative and pleasing experience, so they are more likely to believe that your business is as well run as your site is designed. That builds critical trust and good feelings, crucial to emotions you want associated with your business.
Like in good advertising, remember to select images least likely to offend some special audiences, such as unwitting ethnic or sexist or political viewpoints within pictures. Young and much older business owners need to be especially cautious about these fairly common sensitivities. Older site owners should not assume much core knowledge of history.
Staffing and Web Support Services for Graphics and Images:
Good staffing and selection of web support services is crucial to the overall look, style, functionality and long-term ease of maintainability of your webs-site.
Foremost in selecting and creating images and graphics is raw artistic talent. Such artists are often sensitive and can be emotional types who appreciate being recognized and appreciated. And sometimes they have creative days, and sometime not. Give artists space and help them identify your goals very clearly. You have to work with them with mutual respect to help them see your vision, so they can take your almost inartistic fumble and run with it. If you can find someone both artistic and technical with some marketing savvy, you have hit the jackpot. Don t run them off.
Plan for back-up web support and design, to have in-house expertise balanced with professional outside web development services. Both must have technical ability, experience, advertising and design knowledge, and some artistic ability. Such diverse expertise must be able to work together well with the professional web designer. If your internal person or trusted Web designer is not available, or decides to charge too much, your backup person must be able to do minor updates.
Management must ensure the site is built using standard tools with high compatibility so another technical person can learn and study the documentation if necessary and not damage the web site.
It is worth the investment to have someone in your organization who can use standard website tools not tied to one website or hosting company, and not totally dependent on an HTML generator like Dreamweaver. Real HTML web developers do not depend on Dreamweaver to code for them. In fact they avoid it almost completely, except for perhaps a first pass new layout. See avoiding Web site Generators, Do it yourself web sites.
Determine and declare roles of staff and service providers, who is the team leader with main control and responsibility, who manages the files, who answers to whom, and have a policy that everyone can speak up, suggest and criticize when dealing with creative graphics and photos.
Quality of Images:
Unless you shoot web site pictures yourself, quality generally correlates with price. Image licensors know that quality images in high densities are worth more, and some charge a lot. Truly professional photography with attractive models, lighting, retouching and settings cost more, and look it.Beware of the number of web sites saying "Free Images". Most are not free. However, we have found some nice backgrounds and banner material from free wallpapers. Be aware that the cheaper and free images may show up on another web site, so you lose a little in uniqueness. But usually, with the millions of web sites, no one will ever notice or even see such other site.
Types of Image Pages:Graphics and images are usually not duplicated, and must be selected cautiously for several reasons, including appropriateness for some audiences, size and density of bits, ownership and use rights or limitations, aspect ratios, and artistic compatibility with the site style, color and placement reasons.
Logo's and backgrounds are especially important as images that may be duplicated throughout the site. Color, legibility, personality and style must match the site long-term.
There can be various usages on a site, such as a Slideshow, in Headers, Regular pages, a catalog, gallery or photo album page, or even in BLOBS (not just blogs) or database retrieval with certain records.
Then are the notorious "Flash" pages which we discourage as expensive and usually not as interesting as the people who dream them up believe. They slow down web site loading and usually distract from the core text that you want people to read. They are very expensive to create and modify. A few off-the-shelf Flash sequences can be conservatively integrated to help convey the core message of the site. Flash does not propagate-text does.
Allow different types of visitors to choose their site experience. Give them choices, such as heavy image pages, like galleries, and also people or technical-oriented paged, for those two types of people. Some want specification tables, and some want pictures and symbols to convey the feelings they want from your product. Pictures should express features and benefits resulting in feelings. And most should do the following:
As any good advertising expert will tell you: Show the product; Show the product in action; Show interesting people’s faces and settings; add some curiosity or interest. This is where "product pages" are handy to show more about the product line, and regular HTML must be used with image alt tags to build search engine access capabilities. No matter how much imagery on a page, there needs to be some focused text to explain, describe and give real useful information.
Image Creation and Maintainability Tips and Guidelines:
Creating images is where most site owners get into trouble. Creative art works require experts with artistic ability also versed in web site formats and state of the art graphics software. The most important tips are:
- Use high density formats for the original creations. (these can be decreased and lowered for various uses). Use good cameras and equipment.
- Be sure to use and keep "layering" of elements of graphic images as possible, especially keeping text separate from art and shapes.
- Keep two formats: the original PSD and jpeg or similar format, and then the Save for web formats with web color options (different than print settings).
- Shape images as possible for a slight wider than high aspect ratio, unless you know exactly where it is going on a web page. Consider this your "Slideshow" ratio. Columns in tables may have the opposite aspect ratio, slightly taller than wide.
- Likewise any characteristic graphics for a site, such as icons, buttons, silhouettes and special quirky squiggles or symbols are matched in style, shape, era, detail (symbolic icon or not). Even the FONTs must be compatible with the overall style, such as more Modern, futuristic, era (such as art deco or Fifth Avenue advertising) or classical look. If the font style is thin and vertical like classical ad agency style, the graphics can’t be thick, heavy and too simple (connoting dumbed down) or slanted (connotes speed).
- Photographic pictures likewise must match the style, era, targeted age groups and demographics, and look professional, sharp, be the correct ratio and be in a relatively high bit density that can be saved down to lower density and web format and color as needed. Smart management plans for images suitable for brochures and big sign banners but allowing cutting density for the web.
- Remember, some of these images may be later used in banner ads and actual large sign banners. Likewise a highway billboard advertising sign must be recognizable and readable from a distance, so like a business card, everything must be clear and not too detailed. A company must seek consistency in its presentations, color, style, image, fonts, logos and symbols, as possible.
- Be sure the photographer is talented. Check their other work. Each has their own style. Professional lighting and care in the set and lighting matter. Depending on the part of the country, expect about $100 to $300 per hour for medium grade photographers with equipment, plus props and models. Prepare and plan for some shots, with sketches or prelim examples. Consider a commercial production studio where advertising is produced, which have stages, sets and special lighting.
- On the other hand, catching people in natural settings with real emotions not so posed can add another dimension to your photography, as can good technology shots. Look through Ebay pictures and various web-sites to see widely varying photo quality – learn what to NOT do. Notice the good shots are well-lighted, clear and usually fairly close up, from just the right views-angles. Look at top jewelers and fashion ads and web sites for some of the best in "style", themes and lighting.
Image Selection:
Examples and sketches guide the initial phase of informing the artist and graphics expert what you might want. If they strongly disagree, listen to them. Be flexible in at least hearing out the expert s counter examples and reasons. At some point, the company marketer must make the final decisions.
DO NOT borrow (steal) from other web sites. Ask your artist or designer where the images came from. Be sure they are legal, original or licensed.
Whether choosing among custom original images or selecting from stock images to license, the first step is doing much research and thinking yourself to come up with some examples, even if you have to sketch or describe to someone to sketch.
Do not go with solely your personal tastes and colors much unless you are known for excellent taste in art; Ask others opinions, like a focus group. Marketing is fraught with failure to respect the prospective customer's view, who may not like your tastes.
At key stages, also ask strangers and people in the field what they think of your basic web site design and style and some images "so far". Most people have little vision, so this may not work at very early stages, but at somewhere between 20% and 50% complete a hard evaluation should be done of the entire web site including images chosen so far.
Preparation, upload, naming and organization of images:
Typically a large number of images of photos and graphics must be carefully named, tracked, cropped, some enhanced and uploaded in appropriate formats and sizes typically via FTP file upload. Be sure there is a naming scheme and good site folder organization.
Along with images, associated alt tags must be created to tag the content of the files. This can be an important but overlooked aid to search engine identification.
Be sure an expert determines and oversees the best aspect ratios and web formats, keeping original layered high density sources, and then the "save for web" versions.
Typically beginners wrongly choose some web site generator (WYSIWYG) or general purpose "content manager" with picture-handling capabilities, and sometimes limitations like one picture per paragraph in a rather set format. Don’t do it. Content managers are not recommended, except some simple ones ONLY for a small portion of a website. The popular CM's have issues, usually do not propogate as well, and open up vulnerabilities from hackers and non-professional dabblers.
Unless your business is entirely a one-woman show and you can do it all well, don’t do it.
The artist and your staff should use a good image editor, like Adobe CS. Special effects and transforms by software can be used for effective character building, to build a "look" partly based on such effect. Keep the ".PSD" files. That goes for FLASH also: keep all the original files !!
A good image editor handles photos, cropping, sizing and is used to produce layered mages, and can take drawings, shapes and fonts and turn them into graphics or a Logo.
Most of your images should be JPEG or GIFs. Avoid unusual formats.
Document main graphic effects and transforms used for setting up a special look for some of your graphic and photo elements. Again, keep all image layers.
Do not use overly complex Buttons, but DO use prominent buttons, especially for Buy Now, Get an Estimate, Talk to an Agent and Get more Information or Free Guide, etc..
Sources for Images and Graphics:
Stock and license images and graphics can be obtained from major sites and from photographers who specialize in licensing their work.
Likewise for cartoons, which in some special situations can be good means of communication because at least people will read them. But appropriate use is very limited and should be critiqued by business people and a web developer.
Clip art should be used sparingly, but can be effective, particularly if enhanced and exactly right. Some art and graphics can be reverse engineered to allow major modification.
Themes:
Each section of a site can have a theme, or an overall theme hammering your message. Picture must of course fit the theme.
Protecting your Originals:
Be sure your site has a copyright notice on each page, usually at the bottom and note the images are included.Changes and Updates:
Your marketing strategy determines campaigns, and may require a major overhaul or revision once every couple of years. You may wish to have a 2-stage transition to a much-changed site, so it is not so extreme too suddenly. Normally the transition site would run a few months to a year. That transition site can be used to test responses to changes and images for the final site.
Below next, we will touch on crucial software and scripts that can make a huge difference in crucial future upgrades, moves and changes to a web site. We emphasize not using a "web site generator", special "image handler module" (in shopping cart) or a "content manager".
Beyond this level, technical and other details are the responsibility of the experts. Management's job is to manage well by giving examples, forming a vision, making decisions, properly assigning work to those most suited, and keeping organization and responsibilities clear, and then giving encouragement and guidance.
Web site Image Software and Scripts
(Avoiding Image Handlers and Content Managers):
Plan for web site changes, moves, software upgrades, updates and promotional campaigns. That means choosing the right web site software. Web site scripts come in all typs, and novices love "image handler" modules for shopping carts, web site "generators" like Dreamweaver and web page builders offered by most hosting companies now. Beware of their long-term risks and costs. Real commercial web sites avoid those, except perhaps for initial design draft using Dreamweaver (which should be coordinated with the web developer).
Although initial website tests may be an exception, in business do not emphasize how easy and quick it is to start, but how can you manage everything when sales and problems begin to get fast and furious (if you have a good strategy and positioning). In real life, software sometimes "breaks" due to versions mismatch or a rare bug. Image handler modules added to shopping carts drop the original image name and image to usually create random 30 character name codes for versions of the image. You can not use these later on some major upgrades (full version change, not modification level)
When you have to upgrade your shopping cart (required for security) or content manager, that creates a nightmare. Many major upgrades are NOT automatic. They don't allow "importing" from special optional "modules" that you picked on a whim because it seemed "easier". In a major upgrade of a shopping cart or content manager, you will HAVE TO START OVER on your images---reloading, resizing and selecting versions. If you have similar images or hard to identify what you have sized or cropped initially, your site will be down at least another week or so. The initial convenience is far offset by the agony of trying to fix your web site, or cost you about an extra $400 to $3000 plus your internal staff labor.
The right software and scripts make a huge difference in crucial future upgrades, moves and changes to a web site. We emphasize not using a "web site generator", special "image handler module" (in shopping cart) or any "content manager". (a special text editor is OK, See below)
Avoid software that seems "easy to use" without talking to an expert web designer. Avoid proprietary hosting company software and site generators. Avoid content managers (at all cost), except for simple insertable text editors that your expert web developer can help you with if you need to update small amounts of text frequently. And avoid "image handler" modules in shopping carts. The basic cart software usually does an adequate job and you can do more image work offline from your cart, where you can manage them properly.
And that is half the problems of some hosting company's do-it-yourself WYSIWYG website generator. One issue there is that you don't really own the software of your site, unlike real businesses who want to own their own transportable code, and know better than to be "locked in" to one hosting company or their content manager. WYSIWYG editors and content managers are for beginner novices, or for a quick and dirty test site, to test a concept or appeal. CSM's look good, but are really for amatuers or big companies staffed to run them properly and plan for upgrades, as an adjunct to other parts of their site.
If you think you are smart enough to do everything right the first time and not need to upgrade, update or change much or move for years, you might get by with a CMS or WYSIWYG. You would be preparing for your own ownership and control (over browser compatibility, code quality, versions, etc. ) eventually.
Summary:
In other words, management's role in getting the best images and the best web site is the usual job of good managers, along with the essential specific knowledge to know how to manage, always planning for the future to avoid risks and increase control. Good luck !
Web Success comes from good planning, budgeting and management of web site design, development and maintenance and good web site promotion.
Our Web-Success how-to articles, tips, guides, comparisons and rankings give most of the guidance to you need to get started. This article focuses on selecting, planning, creating and using effective web site images and graphics for new and existing web sites.
As we mention in another article, most business managers fail to properly research and plan either their web business or their web site. This is especially true for the new business website owner and the novices who have never managed a real business nor managed a serious computer project. Web business entails both hazards.
