Web Graphics for Beginners: A Best Practices Handbook

The right web graphics can transform an otherwise bland site into a striking and powerful communication channel for your brand. Beautiful photographs can set an emotional tone or amplify one that you create with the text on your page. However, selecting the right images for your website is only part of the equation.

Optimizing Images

Preparing an image to be used online requires selecting the right size, file format, and image resolution, plus additional considerations of which you may not be aware. Whether you repurpose some graphics that you previously used with your offline marketing efforts or if you have new images you would like to prepare for use on your website, there are a few web graphic best practices you should follow.

 

Where do you need images?

Images are very powerful, but they can be overused quite easily. Try to use photographs and graphics only where it makes sense. Keep your web graphics relevant to the content being presented on each particular page of your site. Use them when a visual explanation or demonstration will help your audience such as when you are presenting a tutorial or when you need to show the fine details of an object.

However, it is important that you have at least one image on every page of your website. If you have no natural uses for any graphics on a particular page, use an image to simply capture your reader’s eye near the top or to break up the text on a page.

Using a large photograph that fills the browser window as a background is a very popular web design trend today and can be very powerful if done correctly. These large backgrounds can limit the amount of images needed within the body area of a page as well. Jimdo makes using full screen very easy with our awesome background feature.

 

Use the right file format for your web graphics

There are three primary file formats used on the web: .jpg, .gif, and .png. Each one has different pros and cons. If you have images in other file formats, you will need to convert them to one of these three formats before uploading them to your website. Some website building tools will automatically convert file formats, but it is safest to do this on your own and upload the correct version to begin with.

 

.jpg

This file format is optimized for photographs. It handles the thousands of colors in a very manageable way allowing you to get a very good looking image with a file size that is very reasonable. Most tools that allow you to export or save as .jpg files (also called a JPEG) will allow you to adjust a quality setting that will balance the quality of the image versus the file size.

JPEG Examples

Save all photographs for the web as JPEGs. Make sure to set the quality high enough to avoid JPEG noise which is comprised of small rectangles called artifacts.

I recommend doing a trial and error method for each output image to find the best looking image at the lowest size. An overly compressed .jpg file will be identified by different sized colored rectangles appearing within the colors of the photograph, normally in larger fields of the same color. Avoid using this file format for graphics that are large flat colors (like many logos) as they will never look as good as they will with the other options.

 

.gif

GIF is the older format used for flat color graphics. Created in 1987, the format is pronounced like Jif, the peanut butter. GIFs are falling out of favor for standard web graphics but still are quite popular for their ability to save multiple frames within a single file. This allows one to make animated .gifs which are very popular on the web although more for entertainment value rather than practical application. GIFs do compress solid fields of color well and even allow you to set one color to be transparent which can be very helpful when placing graphics over a colorful or photographic background.

Gif example

GIFs are primarily only used for animation these days.

When saving a file in this format, you may be required to select the number of colors you want in the file, from 8 to 256. The fewer the colors, the smaller the file. Again, trial and error can be used to find the correct setting for your particular situation.

 

.png

The PNG file is the new kid on the block from this group. For non-animated situations, .png files have almost completely replaced the use of GIFs in all other situations. They also are excellent for large fields of color and not only support transparency, but they even support different levels of transparency. This is very powerful as it allows you to have semi-opaque portions of your image where the background show through but not completely as opposed to the cookie cut-out feel of transparency with a .gif.

PNG Example

PNGs can have fully and partially transparent areas. A gray and white checkerboard is the traditional symbol for transparency. The logo on the right is just three white letters and two semi-transparent white letters on top of a blue background.

Saving files as PNGs has two options—8 or 24 bit. For semi-transparent images, you must use 24 bit which I would actually recommend for all flat graphic images unless you have something with only a handful of colors. In those cases, you can select the 8-bit version to save a little file size without it affecting the quality of the image. There are also online tools that can optimize PNGs without degrading quality. You can drastically reduce the file size without losing quality by using free online tools like TinyPNG.

 

Pay attention to the image file size and resolution

These two terms are quite common and somewhat related.

File size refers to how much space a file, in this case an image, takes up on a hard drive. Smaller file sizes are better for web graphics as they will allow the website they appear on to load more quickly. This is still important for many of the people who are accessing the web from a slower internet connection, an old computer, or their phone. The trick is that as the file size decreases, so does the quality. You will want to find the best middle ground between quality and file size which is easier now than it ever has been in the past.

When you take a photo with a digital camera or your phone, the images can be quite large, often several megabytes. Ideally your images should be no larger than 1MB, with most smaller web graphics showing up at 100kb or less. And only a very large image like a full-screen background should be anything close to 1MB. So how do you decrease the file size?

Reducing the resolution is one way to drastically decrease file size without decreasing the quality of the image on the screen. Resolution is a measurement of how dense an image is. It is measured in DPI or dots per inch. It is a legacy term from the world of print. For printed images, you want very dense graphics that are normally above 300dpi but can go up to 1200dpi.

The important thing to understand about resolution however is that most computer monitors will only display at 72dpi. This means that any resolution higher than that is not adding anything to the quality of the image, but is rather just increasing the file size. So a 300dpi image and a 72dpi version of the same image will look exactly the same on the screen, but the 300dpi one will be over four times larger in file size.

For years, Photoshop has been the defacto image editor in the world, and Adobe has built-in feature called “save for web.” This feature allows you to change the dimensions of an image, change the resolution to 72dpi, and save the file in one of the three acceptable web formats with different quality presets built-in. There are less expensive versions of Photoshop now that also allow you to use this tool, but there are also free alternatives such as Pixlr that can allow you to correct, resize, and optimally save your images for use on your website. Some website building tools offer rudimentary editing tools inside of their systems as well, but I’d recommend preparing your web graphics using tools that are specially designed for that purpose to get the best results.

 

Crop an image to focus on the important parts

Most photos have a lot of extra and unnecessary space in them. Cropping is the process of cutting out part of an image to maximize the impact. This could be simply removing extra background to better emphasize the subject of a photograph, or it could be properly aligning the subject within the frame of the picture.

Many amateurs make the mistake of placing the subject of their photographs, either person or object, dead center in the frame. This is not appealing to most people. Typically we prefer subjects, especially people to be off-center.

Rule of two-thirds

Good cropping will place the eyes around the two-thirds line of an image.

A good rule when cropping photos of people is a famous aesthetic tool called the “rule of thirds.” If you imagine overlaying two evenly distributed horizontal lines across the width of your image, you will be able to picture the image broken into thirds. The eyes of the person should be along the top of the two lines which would be 2/3rds of the way up.

Bad cropping example

Bad cropping looks slightly wrong to the viewer. The subject shouldn’t be entirely centered on the left. The photo on the right looks strange because of a lack of nose room.

Also pay attention to the amount of space in front of a person’s nose (nose room or lead room) and the space above a person’s head (head room). If someone is looking to either side, you will want to place a bit more nose room (space between the nose and the edge of the image) so the viewer can see part of what the subject is looking at. This also comes into play when the subject of an image is an object that is obviously in motion—a race car or a jet.

 

Resize or crop your images to maximize the impact

Most digital photographs you take or acquire will be much larger than they need to be to use on your website. After cropping them, you will likely still need to resize them to make them fit properly on your website. Most website builders will allow you to resize an image within their system, but you will always get better results by preparing your image to be the exact size you will want it to be on the web page.

One important fact that many people do not understand, however is that you can always make an image smaller and keep the quality, but you can never make it larger. Trying to make an image larger than it is will basically require your image editing software to “invent” pixels. This will result in fuzzy edges and pixelated images. With this in mind, if you do not know what exact size you will need for your image, err on the side of being a little too large. You can always make an image smaller inside of your website builder and retain the quality.

Note: Always make sure to keep a copy of the full-size unedited image in case you need to make changes later.

 

Make sure you can legally use an image before putting it on your website

Although it is super easy to find images on the internet, that does not mean that you are allowed to legally use these images, especially on a for-profit business website. Using a standard Google image search, or simply downloading and using images from any random source on the web, can easily land you in legal and financial trouble.

If you don’t have any good original photos of your own, you may want to consider acquiring some stock photography as an alternative to simply “borrowing” images you find on the web. Some of the images do have commercial usage limitations, so please make sure to read the licensing for any image you plan on using. I would also strongly recommend ignoring the common cliche stock photos, especially for service industries or more generic business websites. We have all seen the airbrushed businesswoman shaking hands with men in suits countless times.

There are so many great options for finding free or low cost images for your website. Here is a list of the places that I personally use:

Conclusion

Stunning photographs and stylish graphics will help set your website apart from your competition and make it much more memorable to your audience. In order to get the maximum effect from the visual aspects of your design, it is important to prepare your web graphics by selecting the right file format, image size, and resolution. You want to ensure that your site looks great and is still quick to load. Don’t forget to crop and resize your images to maximize their emotional punch.

Do you have any questions about images for websites? Let me know in the comments or share your own tips!

 

Follow Me

Brent Gummow

Multi-talento at Jimdo
Brent Gummow has been building websites for small businesses, non-profits, artists, and educators for the past 17 years in both Ohio and California.

He currently serves as the Multi-talento in Jimdo's San Francisco office, solving problems, educating users, and helping to grow awareness about Jimdo, the easiest website builder on the web.
Follow Me

Latest posts by Brent Gummow (see all)

The Psychology of Color in Web Design: Part 1
How to Naturally Get High Quality Backlinks

15 Comments

  1. Great summary! Everything you need to know in one single article.

    Reply
    • Thank you Dirk!

      Reply
  2. I have been trying to create a table on my website, the problem is that I could make the table displayed as a table becuase the lines are not shown. I tried to resize the border, but it did not work at all. please adivse.

    Reply
    • Hello Terry, Are you using the tables element on your Jimdo website? The lines are not necessary for a table to be a table, but you are able to add a border of 1 or 2 pixels that will show up when you add the table itself.

      Start by clicking the button that looks like a pencil writing on a calendar. That will launch a small pop-up window with more options, one of these is “border”. Just enter a number into there. You might not see the border in edit mode, but if you switch over to view mode, it should be there.

      Reply
  3. Hello, may I suggest two simple tools to make files (jpg or png) smaller in filesize? JPEG mini and TinyPNG. I get great results. The bigger (and more sophisticated) image, the better result.

    Reply
    • Thanks Rok! I mentioned TinyPNG in the PNG section of this post, but not JPEG mini which I agree is also a great tool. Anyone interested can try it here: http://www.jpegmini.com/

      Reply
    • Thank you Tangram!

      Reply
  4. Brent, this is a nice general introduction to web graphics; well done. I would like to make a couple of points, however. You tell us that DPI is a legacy term from the world of print; however you should also tell us that the correct term for on-screen work is PPI (pixels per inch). Also, 72 ppi for a monitor is out of date; most modern monitors are around 100 ppi.

    Reply
    • Two excellent points Chris! You are absolutely right. PPI is the correct term, and I often fall in to the old school realm of using the terms interchangeably, which is incorrect. All the points I made regarding the concepts are sound though and anyone following along should be able to correctly set the resolution on their images. If anyone would like a more indepth overview of the differences between PPI and DPI, please see this 99designs article.

      Reply
  5. This was very helpful article, I’ve been struggling with getting my images down to reasonable file size for web, but not having to sacrifice resolution.

    What is absolute largest file size one can use for web before you start sacrificing site speed? Is there a hard number to strive for?

    Reply
    • Hi Matt! Thank you for the kind words. There isn’t really a hard number to shoot for. It depends on how many images you have loading on one page too. You have to remember it is all about your reader and how long they need to wait for your page to completely load. I tend to shoot for a full-screen background image to be under 400kb and for most images to be under 200kb. This isn’t too difficult. If you’re photographs are coming in a lot larger than that, they are probably at a higher resolution and can be resized/optimized using photoshop or a similar tool.

      Reply
  6. Great article! Pictures are the soul of your websites!

    You can see what can be done with animated gif in my header (it’s only one gif file animated to create the changing photo effect)

    Hope it helps.

    Reply
    • Thanks Joe! Animated gifs are really interesting and have come a long way since they were first on the scene over a decade ago. Now with modern compression schemes, they look better than ever and have more and more use cases. We’ll be posting an article about this topic in the future.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>