Images for the Web 101

Table of Contents

    Subscribe for Email Updates

    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 Displays

    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.

    Image Rights

    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!

    Website Strategy and Best Practices

    If you need more information about image best practices or assistance with your website marketing, please contact us - we'd love to help.

    Related Tags:

    About the Author

    Emily Oskay Gerrick

    Emily joined the Marketpath team in December of 2014 as a User Experience (UX) Designer. She serves as the product designer for Marketpath CMS, and the lead designer for the Pro Services division. Emily works directly with clients to establish their online marketing goals and outlines any functional requirements the custom website may need before designing client websites.

    Emily obtained her Masters of Science in Information Architecture & Knowledge Management with a concentration in User Experience Design from Kent State University in 2018. She previously attended Purdue University and graduated from Purdue University in May of 2013 with a B.A. in Visual Communication Design and Computer Science. In her free time, Emily enjoys cooking, drawing and designing, traveling the world, and spending time with her family and friends.

    Subscribe for Email Updates