Most modern websites are built on content management systems (CMS), which allow you to change the text and images yourself, rather than paying your web designer for every minor update. However, there are some pitfalls, particularly when it comes to the images on your website. Photos from your camera are too large for the web The images coming from your camera or even from your phone are likely to be far too large for the web, and you’ll need to prepare them before inserting them into your website. Uploading images directly from your camera will slow your website down as the file size is extremely large (commonly 2-6MB per image). Image resizing tools There are many tools that allow you to resize your images, including Microsoft Picture Manager, Picasa, iPhoto (Mac), and if you have the budget and need the advanced functionality, Photoshop. In addition there are many free image resize tools available on the internet. Pic Resize is a simple to use, free web based tool that allows you to resize and crop your images to prepare them for your website. Define your image size in pixels Image size on the web is measured in pixels. To give you an idea of scale, many websites are around 960 pixels wide. Therefore, images that are used to illustrate a page on your website will often be no wider than 200-300 pixels. If an image spans the entire width of your page or sits in a photo slide show, it may be larger, e.g. around 800px for some slide shows. Depending on your camera, your photos can easily be 4000 pixels wide – far too large for the web, so you may have to reduce the images size by 90% or more. Image resizing tools allow you to define a target size for your image, so you can simply type in the desired width and the rest will happen automatically. Reduce your file size The images I take on my camera are over 5MB in size. On a website, images should ideally be kept under 100kb in size. Sometimes a large image may have a bigger file size, and this can be addressed by reducing the image quality. However, quality comes first, so make sure your images look good, even if they exceed the ideal file size. For a larger image used in a slide show, up to 300kb is ok. Generally, the smaller the file size, the faster your website loads. This is not only good for the users, but also for search engines as they prefer fast websites over slow ones. When you resize your image to a smaller size, the file size will automatically reduce. However, some image editing tools such as Pic Resize allow you to specify your desired file size directly. Choose the right file format Your image resizing tool will give you a few different file format options. Here is a rule of thumb to help you choose: JPG – best for photos PNG – best for any graphics, as well as images that include transparent areas GIF – best for simple graphics without gradients, as well as for animated banners Happy resizing! I hope this post was useful and will help you prepare your images to keep your website running smoothly.
