Site Building Advice 0

PNG, JPG, GIF – OMG What Is an Image These Days?

Images, memes, gifs, pictures, photos, illustrations – there are so many different kinds of images and photos circulating the Internet, deciding what to use and how to optimize your images for the Internet can be overwhelming.

Images are vital to your brand and can significantly help your first impression to visitors. In a recent study by Princeton University Psychologists Janine Willis and Alexander Todorov postulate that it takes less than 0.1 seconds for someone to form an impression and that longer exposure times do not readily alter that first look.

Images can help grow your brand, create memories and lasting impressions with your site visitors. Not to mention, articles with relevant images receive 94% more total views on average than those without. The infographic at the end of this article from MDG Advertising has plenty of statistics and data underlining the importance of having an image on your website.

Ok, fact: images are important for website design, but how do you know which images to choose and what is all this jargon?

PNG, JPG, GIF and When to Use Them
PNG, JPEG (JPG) and GIF are the most common and widely supported image file formats. Choosing which format and cropping and resizing your images will make it easier for your web pages to load quickly.
wow

Here are how these file formats work and how they are typically used:

  • GIF and PNG formats are generally used for compressing graphics that are flat and have plain color and text, such as logos, line art and transparent files.
  • PNG image files will not distort or alter your image and reproduces lines and detail accurately. The rule of thumb for PNG files is 8 bits, or 256 color.
  • JPEG, or JPG, format is generally used for photo-style images like photographs and still shots of movies or computer games.
  • GIF image files are more often used for comic-style illustrations where the 256 color limit is optimal. Typically GIFs are used for animations.

For more information on file formats, resolutions and image editing, check out our Tutorial: Images and more.

Images-Infographic