The prevalence of high speed wireless data networks and free wifi, combined with the vast increase in processor speeds and screen size for today’s smartphones, means more and more people will see your site on their mobile device first. And first impressions, of course, count.

There’s a good case to be made that  the design for your next site should start with the mobile version and expand from there. Mobile phone and tablet sales now make up more than half of computer purchases. If your target audience also includes the office desk-bound user, you’ll want to consider using a responsive design to develop the site.

Responsive web design is a new approach to web design in which a website’s layout and content adapt to the size of screen and type of device the website is being viewed with. This way, the same website will display in one way when viewed with a standard web browser on a laptop, and another way when displayed on a tablet or smartphone, without requiring a second “mobile” website be developed. All of this is accomplished using the latest CSS and HTML.

Most commonly a responsive website’s layout will be automatically reduced to a single column, and its content and navigation will be simplified, when it displays on a mobile device.

There can be an advantage to paring your site content down to the essentials for easy reading in a smaller format. It asks you to focus on the most important functionality and message. It also demands that you design your communications strategy to consider the mobile user. They want information on demand. If you don’t provide it, they’ll move on. Attention is ever more fleeting. Not only is the format constrained, but you are competing with what else is going on in their environment.

in our next instalment, we’ll discuss who needs mobile and why.

How we did it: Looking at the Aquabus Ferry website.

Our friends at the FontShop offer a regular critique of contemporary album design. Their recent newsletter comments on 17 covers ranging from the latest Rolling Stones and Rihanna CDs to lesser known artists like Holly Herndon (with a cool accompanying video). The cover for British ska band Madness features work by Peter Blake who is known for his work for the Beatles’ Sgt. Pepper album.

Have a look.
 
Of course contemporary album design is delivered in much smaller formats than the vinyl record album covers that preceded the compact disc and MP3 files.  This has lead many people to decry the loss of the larger format and its expanded design capacity.

However, Web2Carz Managing Editor David Merline disagrees. He suggests it is an unexpected bonus: “As with all things in life that change, there’s a temptation to bemoan the loss of album cover art as somehow symbolic of some great loss to civilization, another step in the ongoing decline of everything that was better when we were young. But there’s something to be said for not having all that ‘stuff’ cluttering up one’s life, even if that stuff was beautifully designed and printed,” he observed.

“By jettisoning the physical ‘product’ of the record album, or the DVD, or the book, the art that was once contained within these packages has to stand on its own merits. With no nifty package to lure you into a purchase, you have to want to listen to your albums, or read your books, or watch your movies, or play your games, because there is no longer any ‘thing’ to own, or admire, or display on a shelf.”

Just because you have a web site doesn’t mean it’s going to get noticed. That’s like building a house and expecting droves of guests to arrive without telling them you’ve moved in.

Making sure your site gets noticed starts well before its launch and continues long after. Here are 5 things your site needs in order to start and continue working for you:

1. Describe yourself. Make sure your web site says who you are and what you do. Are the words that people use to do a Google search the same ones used in your content? It sounds basic and it is. But you’d be surprised how many sites don’t mention key searchable information such as location.

By structuring and writing text that anticipates how users will look for you, search engines deliver results that will direct them to your site.

It means that when potential clients search the web for “fluffy bunny slippers in Vancouver” your site will rank high because you’ve consistently used that term plus variations on it.

It comes down to marketing. Your key words are part of your marketing message. And the main job of your site is to spread that message!

2. Have a unique domain name. Ever wonder why so many web sites and related businesses and products have unusual names? Wufoo, Quibids, Google, Kindle, StumbleUpon. These names are memorable and unique. Use any search engine to look for them and they’re at the top. Aim to make your domain name as unique as possible.
3. Have a great launch strategy. Your launch is your moment to shine. It gives you an excellent opportunity to promote yourself. Make the most of it.

Weeks – or even months– before you launched your site, start creating buzz:

• Send out an e.newsletter or just regular emails to your lists.
• Let all of your Facebook, LinkedIn and Twitter contacts know that you were embarking on a new venture.
• When you launch, let everyone know through all of your channels from word-of-mouth to a launch party, a contest or draw and even paid advertising if that’s your style.

Traffic to your site, and your contacts posting your URL to their blog or social media, all ramp up your visibility to the various search engines

4. Post fresh content regularly. After your site is up, use it! Post content every day or week depending on the nature of your work. Search engines favour sites with new information. And, of course, the new information is always on message, using your key terms to market effectively and be searchable.

In addition, use your social media such as Twitter, Facebook and LinkedIn to let your follows, likes and connections know you’ve posted something new and interesting.

5. Make sure you’re popular. External links are the most important piece in getting good search engine rankings. “Link popularity” determines your ranking. The more sites that link to your site, the higher it will rank. External links validate that your site is interesting and worth looking at. There are many ways to achieve that. The two keys are:
• Ask others to link to you (you could offer an exchange)
• Make sure your site is always worth visiting through superior and regular content.

You can draw attention to your site and your work through social media as well as by participating in online groups and commenting on blogs and posts related to your service, product or area of interest.

At Working Design we’re clear about that. You do. They wouldn’t exist if you hadn’t paid us to make them.

It’s the same when we develop your taglines and slogans or help write your key messages. They are yours to use because that’s what you hired us to do.

Traditional copyright says that all art is owned by the creator, even if it is specifically commissioned. And there’s certainly a strong argument to be made if artists have produced an original piece of work – and allowed your organization to use it – that they should retain ownership. The terms of usage should be agreed to in a contract.

However, at Working Design we regularly transfer our design files to our clients for your further use. We charge a transfer fee to cover the time it takes us to dearchive and send the files if they weren’t requested as part of the original job.

If you request or receive electronic files from us or another designer there a few things you need to keep in mind:

• You’ll need software in order to work with the files. We use Adobe InDesign as our Macintosh pagemaking software, and Adobe Illustrator or Photoshop for logos and images. Most Adobe files will also work in a PC environment.
• We can only provide you with the files we developed. We cannot give you fonts because they are under copyright. If you don’t have the fonts used in the job, you’ll need to buy them
• If the files contain stock images there may be time limitations or terms of usage for their continued reproduction
• Design manipulated by inexperienced hands might not look like it was supposed to. That’s a risk everyone takes. (You can dress your children properly for school in the morning but that’s no guarantee they’ll come home clean and tidy!)

If you’re concerned about that there’s at least two things you can do:

1. retain the designers as consultants to review materials and offer feedback and develop new materials as needed
2. have the designers develop a Usage Guide (or Guides) for the various materials. This is a good idea even if you don’t plan on working with the files inhouse. Many organizations supply Usage Guides to third parties to instruct them in the proper use of logos and related materials in order to maintain brand identity and consistency

Digital technology has accelerated this discussion in recent years. Time was when there was only one set of original negatives for jobs such as photography or publications. They could only be housed in one place. But digital files are shared and reproduced easily. Further, the skills needed to work with them have become widespread.

There are many grey areas in this discussion, and different professionals have adopted various approaches. We’ll leave that for another conversation. Enough to say that when you work with us, you own the work you paid for.

You may have heard about “brochure-style” sites. Or Web 1.0 vs Web 2.0. Sites developed in the 90s and early 2000’s were a lot like online brochures. They featured “covers” or “splash pages”.  Their content was written and structured much like any piece of standard print material. This is Web 1.0. And there are remnants of it all over the web.

Things have changed. Welcome to Web 2.0

Interactivity has replaced one-way communication. The front page of most contemporary sites functions as an interactive table of contents. Strategic marketing, key messages, calls to action and directing visitors around the site all come into play. The visual design, points of entry and structure of a home page and a website are entirely different from anything you see in print materials. Writing for the web is its own form, distinct from other ways of telling a story.

And, visitors to your site can talk back. They can comment on your blog, send you mail, participate in polls, make donations, sign up to volunteer, buy things and more. This is Web 2.0 and it has made what came before virtually irrelevant.

Beyond that, you need more than a website. You need an online presence that’s informed by an online strategy. More about that later.

Why worry about the latest web trends?

What prompted us to write this blog was a website audit request from a highly successful and longstanding not-for-profit organization. Their campaigns have been winning for decades. Their small and devoted base of volunteers has been using the same methods for years and getting great results. Phoning, printed direct mail appeals, door-to-door, word-of-mouth, printed brochures and cards were the standards elements in use.

However, the organization’s younger members know that the days are numbered for the traditional outreach campaigns practiced by the group’s founders. And, they’re concerned that hard-won victories and organizational strength could be lost if the group fails to reach a new generation where it lives: on the web using social media. They asked Working Design for an assessment of how effective their website is and recommendations for improvements.

Here’s some of what we told them.

The web as an organizing channel

The role of the internet, a website and social media has become key for everyone: individuals, businesses, institutes, social movements engaged in political action. It’s almost impossible to connect effectively with audiences without a considered web presence and strategy.

In 2012, it’s essential to understand and use the full array of online tools available to us.

What are the tools? Why a website is not enough.

So, is your website old fashioned? Yes, if it’s only sending information one way and if it’s the only element in your online presence. If it doesn’t embody some or all of the following, your online profile needs attention.

A website is the foundation of an online presence. It has tremendous potential and capacity to present text and visual information ranging from the latest news, images and appeals to detailed archives.

However, a site cannot exist in isolation from other online channels. That would be like a house without electrical lines or water pipes.

Email is, for many people and organizations, the primary online channel for sending and receiving information. For businesses and member-based organizations an email address list is one of the most important ways to reach your audience as well as direct it to your website.

E-newsletters take email one step further. They use email delivery to drop a news package into your audience’s inbox. Depending on their purpose, e-newsletters typically link subscribers to further information, usually found on the website.

A blog housed on your website is another potentially interactive tool.

Social media offer an array of platforms for organizations to communicate with their audiences. Twitter and Facebook are the two most popular platforms in the world and both are augmenting and replacing email as main ways of reaching your audience.

Texting is the channel of choice for an increasing number of people. Many rarely use email, favouring Facebook, text messages and Twitter for immediate information.

Being mobile. All of your platforms need to be accessible via mobile devices. The growth in sales of smartphones and tablets in the past two years is phenomenal and the trend undeniable.

It’s all so complicated.

If you’re getting the sense that communication has become more complicated, you’re right. The upside is that this new environment offers greatly expanded scope. However, along with the broad reach and immediacy offered by online communication comes a set of challenges and potential threats.

Key opportunities

• Websites make information available to all potential users – from key constituents to casual observers– all the time and wherever they are located.
• Online communication has changed how we do business from one-way, push marketing to interactivity and dialogue. This means establishing and nurturing relationships with clients, colleagues, consumers, members and the general public
• The information can be easily and quickly updated and shared
• Engaging audiences through a website and other online channels allows immediate, targeted contact which helps build and connect a constituency of clients, collaborators, committed supporters, buyers, subscribers and more.
• There is almost no limit to the information types that can be housed and presented on and through a website: the latest news, policy papers, research, historical information, videos and photos, downloadable documents and media kits, podcasts, live streaming, and so on.
• Online tools can assist in fundraising and membership drives
• Online hubs such as blogs or virtual gathering places such as Facebook, can facilitate discussion as well as build and engage a community of users which includes donors, members, supporters, potential volunteers and others interested in your message
• Ongoing development of a database of users who can be contacted via email or texts for a range of reasons such as event notifications, action requests, volunteer opportunities, emergency appeals and more.
• Being in touch and staying top of mind with your audience
• Collaboration – your site can have password protected areas available to certain members in order to facilitate information exchange  such as collaborating on articles, research and sharing information.

Key challenges and threats

Along with the opportunities come an equally daunting array of challenges. If they’re not addressed intelligently, they could turn your online strategy into an organizing and marketing disaster.

Here are a few of the challenges you need to know about:

• Building a comprehensive strategy to successfully develop and manage communications across the array of possible channels and platforms from website to blog, e.newsletter to twitter and more
• Developing organizational know how and capacity to update and manage online information requirements
• Lack of an integrated and current online strategy places an organization at a disadvantage in relation to competition and future growth
• Poor damage control can cause mortal wounds. Instead of deploying your online communication quickly and effectively to diffuse a problem, poorly chosen commentary or tactics can fuel the issue and make you look bad
• Outdated content on chosen channels and platforms can damage an organization’s credibility

A checklist for your modern website and online presence

How can you tell if your site is old-fashioned? This brief checklist covers some of the essential elements and functions of an up to date site. Of course, it depends on the purpose of your organization or business. Not all sites will have all these features.

Your site should :

1. Outline and detail your organization’s main issues, key messages and calls to action
2. Clearly highlight what your clients, members and the general public want to know
3. Direct users to your main offers and create opportunities for them to interact with you directly and immediately. Typically, at least one call to action per page
4. Allow you to gather contact information such as email addresses, phone numbers and more of clients, colleagues, supporters and potential volunteers
5. Present current text and visual information and be easy to update
6. Point to significant recent and past accomplishments
7. Present in depth information
8. Be fully search engine optimized so people can find you on the internet
9. Raise funds online
10. Act as a sign-up point for an enewsletter
11. Advertise events
12. Present a range of videos and photos of your projects and your people
13. Allow users to share the site’s news, images and videos to their contacts through a “Share” tool
14. Feature a blog so you can write about your areas of expertise
15. Have a Twitter feed to let people know what you’re doing and to have a presence in your target area whether its your industry or organization
16. Link users to a Facebook page or to Twitter
17. Showcase news stories from various media sources about your activities
18. Feature inbound links from other websites
19. Have lots of internal links connecting users to other pages on the site
20. Facilitate users finding information on the site through a “search” function
21. Allow specific users access to password protected areas in order to share information and collaborate on research, writing and more
22. Be part of an integrated marketing strategy that employs social media and social networking, content development and distribution

In my next blog about what goes into a modern website, I’ll discuss some tangible things you can do to to have an up to date website and online presence.

posted by kris klaasen

Monday’s tragic sawmill explosion in Prince George, BC has taken the life of two workers and seriously injured many others. It’s a sad and timely reminder that no one can take workplace safety for granted.

In fact, one in every 65 employed workers is injured or harmed on the job, according to Statistics Canada 2009 data. Construction and mining are the most dangerous, at 24 injuries per 1,000 workers, but Health and Social Work are not far behind at 19 per thousand.

Once again, Working Design was involved in designing materials for BC’s Day of Mourning. This year we created a poster for the BC Federation of Labour, based on a concept by Mike Konopacki. The quote is from Mary Harris “Mother” Jones, a dedicated labour activist and organizer in the late 1900s, and it’s just as powerful more than a century later: “Mourn for the dead and fight like hell for the living.”

The BC Fed is involved in two ceremonies in the Lower Mainland: On Friday, April 27 at 10:30 am at the New Vancouver Convention Centre, and on Saturday April 28 at 11 am at the New Westminster Quay. Find locations of other ceremonies throughout BC.

Last week I saw an article in the Globe and Mail about using natural dyes to colour eggs. Red beets, red cabbage, red wine and turmeric were featured. I tried various experiments with those dyes as well as a variety of resists: elastic bands, hair ties, wax. The results were very interesting and I’m sharing some here.

When I posted about this on my Facebook page I received a lot of comments and a few more suggestions. As a result, I wrapped some eggs in onion skins, tucked them into nylon stockings and boiled in water for about 20 minutes. Worth trying.

I’ve done quite a few additional experiments and I’ll be posting results on Facebook and to my Pinterest page (under Kris Klaasen) in the next few days.

BTW, I always thought the easter egg and bunny tradition had to do with fertility and the emergence of new life. Not so according to Wikipedia.

Happy Easter to you all!

Most of us signed on because we don’t want to miss out on a useful online, social media opportunity. But, what exactly is the opportunity?

To find out I took a seminar at UBC Continuing Ed last week on the benefits of Linked In. The session was led by Njeri Watkins, an entertainment industry consultant and Linked In enthusiast. She uses the platform to network with the more than 400 professionals she counts as “connections”. She  keeps up with various user groups, reads news customized to her interests and follow companies related to her work.

I wanted to know what Linked In offers in the way of marketing and networking opportunities. Is it something I could use personally and for Working Design? Should I recommend it to you  – my clients and friends?

Here’s a brief overview of what I learned. There’s a lot to know and I’ll share more in future posts.

Who’s Linked In?

Who will you find in Linked In’s virtual bar?  Your clients and colleagues, businesses small and large, job seekers, fellow net workers and recruiters fill much of the space. However, the site’s research capacity, groups, third party applications, reporting procedures, and news updates make it more than a regular meet-up-happy-hour-multi-office-party get together.

1) Networking. This is it. The main reason you and your business want to link in and up. Linked In urges all users to connect only with people we know and trust. This means the virtual bar is filled with people you’re connected to and stand behind.

2) Looking for a service or supplier. For instance, if you’re looking for a pest control specialist or a book editor we can search for them through your network of primary connections. If they’re on your list you can be pretty confident that these leads are valuable and trustworthy.

3) Job and opportunity searching. Linked In will warm up what would have been a cold call. If you want to market your business or personal services to a particular niche – research institutes or sport equipment suppliers for example – you can search for them and see how many of your connections have connections with individuals or businesses in the field. When you make your pitch, you can say that you have people in common and who they are.

Or, if you have connections in those sectors and you are looking to broaden your presence, you can see who your connections are connected with, see where they hang out and who with.

You could also be direct and ask your connections to introduce and recommend you to companies and individuals they know.

4) Groups. Most of us are looking for like-minded people and businesses whether it’s online or in our regular lives. We welcome conversations with other people and professionals about things that interest us and help us do our jobs. Linked In has a feature that lets you search for, find and join any number of groups. If the group doesn’t exist, you can start it

Using the groups, you can simply get information or you can subtly pitch your business and yourself by joining in the conversation or starting one.

Say you’re a freelance editor trying to tap into a larger market. You can explore the numerous Linked In writer and editor groups. Find a few that seem to have networking and employment potential, join and get involved.

5) Following companies. Linked In has researched and lists thousands of companies world wide and provides a range of information about them: number of employees, categories of work (sales, management, IT etc.) the movement of individuals and availability of specific positions. For instance, if you’re looking for a research position with the CBC, you can follow the company and receive related news, see what positions are being offered, who’s been hired and who has left.

6) Contact Information Management. A couple of weeks ago Linked In sent me an email saying that 50 of my contacts had changed jobs in the last year. It had their thumbnail photos connected to the Linked In site and their new contact information.

Those of us who manage and use contact info databases know how useful it is to have access to up to date information. While some of our contacts blast out group emails with change of address info, many don’t.  It’s useful that Linked In acts as a central, third party source for this information.

7) News. Linked In has a customized news section that collects information from hundreds of mostly mainstream sources such as nytimes.com or npr.org. Your news page content is based on information you provided in your profile. If you indicated that you’re interested in information technology, sports and glassblowing, your Linked In news page will reflect that and present you with articles about those areas.

8) Your personal website.  Linked In can double as your personal website if you are a job seeker or freelancer. It allows you to showcase your main skills, post a cv or your work experience, write about yourself, and show the community what you look like and who you are connected with. And, it’s free.

While there are paid upgrades that increase your scope and ability to use Linked In, relatively few members do so.

One interesting note is that users in the US and UK are much more likely to join and use Linked In than those of us in Canada. Employers and job seekers in both those countries are using the online forum as their primary method of locating each other.

The first thing you’re going to need is a Google-ID. If you have a gmail address, you already have one. If not, go and get one. This is your single sign-on to all of Google’s services. If you are setting something up for an organization, you probably want to get a Google-ID specifically for that organization so that you can share it with others. Here are instructions on how to sign up for your Google-ID.

Now that you have your new Google-ID go log into Google Calendars. The first thing you’ll have to do is create a new calendar. This will be the calendar that you embed on your website, so give it a meaningful name like “My Organization’s Events”. Make sure you set the visibility of the calendar to public. If you skip this step, nobody else will be able to see it. Finally you are ready to embed the calendar into your website by pasting the embed code into (for example) a page in WordPress.

If  you need to you can create more than one calendar and include them all in one calendar view. Just check off each of the calendars you want included in the list on the Google Calendars embedding page. If you find there are too many events in your combined calendars for the Month view, try changing to the Week or Agenda views. They are better able to display more entries in each day.

I’ve completed all of these steps in order to embed a calendar into this post that displays three Google Calendars. If you click on the little down arrow in the top right corner, you can choose which of the three calendars you’d like to see.

Kinds of image data

The first concept is the identification of the kind of image data you are dealing with.

There are generally two different kinds of image data. The first type of data we can identify is what I’ll call very complex image data. This is the kind of data that comes from a camera. Photographs, paintings, sketches and any other data which are organic in nature have a great variety of tone, color, rich texture, and look like real things.

The second kind of image data we’ll discuss is what I’ll term less complex image data. These kinds of images have strong lines and edges, high contrasts, simplified color palettes, and smooth textures. Cartoons, computer generated images, rasterized vector drawings, technical drawings, icons, and rendered type all fall into this category.

Data compression

Now that we understand the two major types of image data we are dealing with, we should understand why we bother with this differentiation to begin with. The answer lies in data compression.

Data compression is the technique of taking a set of data, and representing it in a way that is smaller than before. If we didn’t do any data compression, we could handle any kind of image in the same way and it would always look great. The problem is image files are very large, and our pages would take forever to load up if there were no compression applied to them.

Since we must apply data compression to images for the web, we need to understand the two major kinds of data compression we’re interested in. There is one kind of compression for each of the two kinds of image data we are dealing with.

Lossy compression

The first is called lossy compression. This kind of data compression works by representing the raw image data in a way that is mathematically analogous to a waveform. Mathematical techniques which simplify that waveform are then applied. The simpler the waveform data are, the smaller they are to store in a computer. In this way images can be compressed to very small fractions of their original size.

The downside of lossy compression is that once the original data are simplified in this way, that complexity is lost forever. There is no way of getting it back. This is why this kind of compression is called lossy. When it comes time to de-compress the data to re-create the image, the image will not look exactly the same as it did before. The more the data are simplified, the smaller the image file gets, and the more different the image looks after de-compression.

This sounds bad, but when applied to the right kind of image, lossy compression is by far the best choice. We apply this kind of data compression to our complex image data. Images with more natural textures and greater complexity are more forgiving of lossy compression because they are so complex, that our eyes have a much harder time detecting the difference between the original and compressed images.

Lossless compression

The second kind of image compression relevant to us is called lossless compression. This kind of data compression works by searching the image for repeating identical sets of data, and reducing them. For example, if an image has a pure white background and large patches of one color, these areas of the image will be identified. These identical repeated sets are then mapped and indexed so that the data are only stored once, thus making the resulting image file smaller than the original data.

The downside of lossless compression is that it cannot compress very complex image data as well as lossy compression can. If we were to compress a photograph using lossless compression, the compressed file would still be relatively large.

The good thing is that when applied to less complex data, Lossless compression yields very small files, and the de-compressed image is exactly the same as the original. This is important with less complex image data because with images of this kind it is much easier for us to notice when there are changes in the data.

Choosing an image format

So now we know that when we are compressing very complex image data, like a photograph, we should use a lossy compression algorithm, and when we are compressing less complex image data, like a line drawing, we should use a lossless compression algorithm. The question remains, what kind of image format should we be using for each.

These days there are three major compressed image formats being used on the web. I’ll explain each of them.

JPEG, which is an acronym for Joint Photographic Expert Group, is an image format which is best used for photographs and other kinds of complex image data. It is the kind of image format used in all digital cameras (unless you are shooting in raw mode, which applies no compression). It will compress your photographs, paintings, and other very complex images down to a reasonable size, and you will hardly notice any difference in the de-compressed image.

PNG, which is as acronym for Portable Network Graphic, is quickly becoming the most common of the lossless image formats used on the web. It should be used for all of your less complex images such as cartoons, computer generated imagery, rendered type, and technical drawings. It will apply enough compression to get your less complex data down to a reasonable size, and the de-compressed image will look exactly the same as the original.

PNG also comes with the added bonus of being able to store alpha channel image data. This allows you to store images with variable transparency.

GIF, which is an acronym for Graphics Interchange Format, is an older lossless image format which is still in common use on the web. While it can compress less complex data reasonably well, it only works with 256 color, or 8bit image data. If your original image contains more than 256 colors, using GIF compression becomes a lossy compression format since it must simplify the color data of the image. For this reason, it’s probably best to never use the GIF image format.

Optimization tips

Now that we understand which image formats we should use for which kinds of images, and understand why, we should be able to create websites with great looking images that load quickly. There are still a few little points which can help us squeeze just a little bit more performance out of our images.

Color palette optimization

The main recurring theme of this post has been simplification of image data. Simplified images compress better, and so become faster to load. With this in mind, it is a good idea to simplify the color pallette of your images as much as possible before compressing.

In the case of very complex image data such as a photograph, there is very little that can be done with regards to palette optimization, with the exception of black and white images. If you are dealing with a black and white image, you may want to convert the image to “greyscale”.

With regards to less complex image data, such as rendered type, palette optimization is almost always possible. Try reducing the color depth of your image from 24bit, or RGB, down to indexed color. Do you notice any image degradation? If not, great! The use of indexed color palettes will dramatically reduce an image’s file size.

Compression level, or “Image Quality”

The level of compression used is most relevant when you are creating JPEG image files. The compression level controls the amount of data simplification that occurs when compressing an image. This setting is usually called “Image Quality” in image manipulation software and is represented as a percentage value. When you compress a JPEG with 100% image quality, a very low compression level is implied, and very little data simplification occurs. When you compress a JPEG with 50% image quality, a very high compression level is implied and a lot of data simplification occurs.

It’s probably best to try and keep your image quality somewhere between 65% and 85%. Below 65% image quality the amount of data degradation starts to become distracting from the image. Anything above 85% image quality generally looks exactly the same to the human eye, and will only result in a larger file size.

Image size

This last point may seem obvious, but it remains a very common error on the web. When creating your final image, make sure you size it to exactly the size you want to display it at on the web. By size, I mean the area the image takes up on the screen, measured in the number of pixels from left to right (the X axis), and the number of pixels from top to bottom (the Y axis).

If you render your final image bigger than the size at which you intend to display it on your website, you are just making a larger file, making your website take longer to load.

Also, forget about DPI, and inches or centimeters when sizing your images for the web. The web is measured in pixels, and the size of a pixel varies from screen to screen, making DPI an irrelevant concept.