If a picture is worth a thousand words, you want to be displaying the sharpest, cleanest and best images to represent your business on your website. Graphics can transform an otherwise bland site into a striking and powerful communication channel for your brand. With screen retina displays providing greater clarity and device sizes constantly varying, it is important to put a conscious effort into your photo size, clarity and choice when adding photos to your website.
Images are very powerful but can often be overused. Try to use graphics where it makes sense and keep images relevant to the content being presented on each page of your site. While limiting the use of graphics, keep in mind it is important to have at least one graphic per page. It is difficult to process a lot of text and lengthy web pages and adding images to your web pages, even if it’s just one, will break up drawn-out text.
Retina display is the new wave in screen resolution coined by Apple. What does this mean for the images on your site? It essentially means that everything you see on a screen with Retina Display, iPhones, iPads and the newest MacBook Air, is displayed at double the quality previously shown. On your desktop, you are viewing 72DPI or Dots Per Inch (DPI) but on your Apple Devices, and now some Android devices, you are seeing a picture so clear, pixels can’t be deciphered by the naked eye roughly translating to 180-300DPI. It is important to remember the clarity these devices offer when adding images to your websites. While you want to have a larger image size for better quality, you still want to keep the file size down to prevent a slow page load for your site. A good rule of thumb is to double the size of your image before uploading and adding it to your website to compensate.
Common Image Types:
.jpg – A “JPEG” is the most common form of photograph for photographs. It handles thousands of colors with a reasonable file size.
.png – a PNG is great for images with large fields of color or if you would like to upload a vector object with a transparent background (or no white background)
- GIF – a GIF has animation capabilities. These are slowly being phased out in favor of more informative videos and png’s, however they are still great for short images with large blocks of color or placing an image over a photographic background
Image Resizing and Photo Editing Tools
Not everyone has access to Photoshop for image resizing, but there are some great online tools you can use to insert images into your site. Picresize.com and GIMP (GNU Image Manipulation Program) are great alternatives to paying for a photo-editing tool. If you do have access to Photoshop, remember to “Save for Web” when saving your image files sot that the program compresses the rendering to reduce file size. Clarity is key but equally important is speed.
Probably the most important thing to remember when adding images to your website is to make sure you legally have rights to use the photos you are adding to your website. It is ILLEGAL to use photos from Google image searches and you can be sued for copyright infringement with potential fine for doing so. There are some free and low cost options to finding pictures for your website outside of taking them yourself – Pixabay offers free photos, istockphoto.com ranges from $10-30 for photos and if you use an advance search filter on Google Image searches (under the search tools tab / usage rights / “images labeled for reuse”), you can find free images.
Beauty and Credibility
Beautiful photographs and stylish graphics will help set your website apart from the competition, add credibility, and make it much more memorable to your audience. It is an additional opportunity to reinforce your brand or add authority to your knowledge on a subject. Whether you repurpose graphics previously used in marketing materials or if you have new images you would like to prepare for use on your website, follow these best practices for optimum output!