How to prepare images for your website

[Rob Clarke]

Many people want to manage their website themselves. One of the implications of this is they may not understand how to prepare images and other types of media so their site continues to look good, and function well. These general tips are designed to get you started.

1. Start with high-quality images – you don’t have to be a professional photographer to use great images on your website. Some of our favourite stock image sites are: Pixabay, Unsplash, Barn Images, PicJumbo, SplitShire, Getty Images, iStock, StockVault.
2. Use the right file type: JPEG or PNG – generally, JPEG/JPG is for photos, while PNG is for illustrations and non-photography imagery.
3. Resize images properly – this is important and the most common cause of website performance going down the gurgler… usually caused by people rushing to get the image uploaded. With web images, you want to find the right balance between size and resolution. The higher the resolution, the larger the file size will be. If printing images, high-resolution images are a good thing. But on the web, large size, high-resolution images can slow down your website. This hurts diminishes user experience and causes other issues (such as search engine ranking). Big images and slow load times are especially annoying for mobile visitors. There are three main aspects to this:
   1. Optimal file size: the number of bytes the file takes up on your computer. A 15MB (megabyte) image is huge. A 125KB (kilobyte) image is small. If your file size is really big, it’s an indicator that either your image dimensions are too large or the resolution is too high.
   2. Image size: the physical dimensions of your image. On the web, image height and width are measured in pixels. So for example, a typical image on a website or blog might be 795×300 pixels.
   3. Resolution: the quality or density of an image, measured in dots per inch (dpi). A professional printer might require images to be at least 300dpi. But most computer monitors display 72dpi or 96dpi, so anything higher than that is overkill and makes your image unnecessarily large. When a design program has the option to “save for web”, it means saving it at a low, web-friendly resolution. Did you know, that if you take a screenshot on your Mac and upload this, that file will be 300dpi (which is more than 3 times the resolution required!)?
4. Same size/style images: this will make your website better for the user, more consistent and easier to keep to the design.
5. Name the image file correctly: this has an important impact on SEO (search engine optimisation) and also in helping you organise your website as you put more content on it.
6. Always put in the alternative text: alternative text, or ALT text for short, is important for accessbility. This means that blind people using screen readers can tell what the image is about, plus on slower connections (eg. mobile phones) the user gets a clue as to what the image is for.

Tips for resizing images

• Optimal file size: Large images or full-screen background images should be no more than 1 MB.
• Most other small web graphics can be 300 KB or less.
• If you’re using a full-screen background, we recommend an image that’s 2000 pixels wide.
• Resolution for web images: If you have the option, always “Save for web” which will give your image a web-friendly resolution. Or 72dpi.

Free tools to use on your computer for this:

1. Apple Mac – the inbuilt Preview app is great for resizing images and exporting to get smaller file sizes and resolution. This tutorial gives you some tips for this: https://www.youtube.com/watch?v=7gavmkmp_9E
2. Windows – use the inbuilt Photo Editor
3. Online – fotor or pixlr are both great options.

Reference: adapted from jimdo.com

 

[Author]

Posts