JPEG or PNG: Understanding File Types

JPEG or PNG: Understanding File Types

You have a stunning new web site design and plan to update it regularly by keeping the imagery and content fresh. At The Web Designer Group, we offer maintenance plans to keep your site looking its best, but if you’d like to maintain your site like a pro, here are a few tips on selecting the correct file type.

Have you ever noticed that some websites contain images which are stretched and distorted? More often seen on older websites, product photos might be elongated. Logos sometimes appear too large for the space or pixelated and low-quality. This is because they have been uploaded in the wrong proportion or at the wrong scale. A website container box is a fixed shape. Let’s say a website container box is square or rectangular. The uploaded image needs to be the same shape as the container box – square or rectangular. A square image uploaded to a rectangular box will be stretched in one direction. A rectangular image uploaded to a square box will be cropped. This can be disastrous for conversions on an e-commerce site. Who wants to risk buying a product that they cannot actually see? What does it tell them about your company that you can’t even get an image right on a website? These days, with in-built editors and responsive themes designed to render fluidly on all devices, it’s less likely that your images will distort. But you can save yourself time by understanding proportion, resolution and file type when maintaining your own website.

Every photo you see online or in print is a raster image. Raster images are constructed by a series of pixels, or individual blocks, to form an image. JPEG, GIF, and PNG are all raster image extensions. PNG, by the way, allows an image to have a transparent background, which is why they are often used for icons and logos. When the pixels are stretched to fill space they were not originally intended to fit, they become distorted, resulting in blurry images.

To retain pixel quality, you cannot resize raster images without compromising their resolution. Therefore, it is important to remember to save raster files at the exact dimensions needed for the application. How can you do this? Find out the container size on your website and resize images using the website’s built-in editor, a free online image converter or open-source software such as GIMP. If you plan on manipulating and resizing lots of images, you might want to invest in paid software, such as Adobe Photoshop.

Logos are created as vector images. Vector images are far more flexible and are constructed using proportional formulas rather than pixels. EPS and AI are examples of vector images and they are ideal for creating graphics that require frequent resizing. Your logo will have been created as a vector and saved by your designer for in a variety of formats for use online and in print. Unlike raster images which can’t be scaled up significantly without losing resolution and becoming pixelated, vectors can be resized very small, for a business card for example, or blown up to billboard dimensions. If you have a logo created professionally, be sure to keep a copy of the original vector file.

TIFF was traditionally the best file type for printed images, although most print companies these days work from a PDF and may request a backup copy of the original artwork file with all assets, such as fonts included in a zipped folder. Print companies will supply you with clear guidelines for how they wish to receive your artwork to achieve the best results.

Here’s a list of the most common file types and how to use them:

JPEG (or JPG) – Joint Photographic Experts Group

Used for still images and photography. Millions of colours. Cannot preserve transparency.

PNG – Portable Network Graphics

Used for web graphics that require transparency or colour-heavy images. Can be re-edited and re-exported without much loss.

GIF – Graphics Interchange Format

Used for simple animations. Maximum of 256 colours. Transparency is an option.

SVG – Scalable Vector Graphics

Suited to displaying logos, icons, maps, flags, charts, and other graphics created in vector graphics applications such as Inkscape, Illustrator and Sketch. A recent file type which isn’t widely accepted by web and social media platforms.

TIFF – Tagged Image File

Popular among graphic artists, the publishing industry, and photographers for storing raster graphics images. Used widely in print publishing and larger than JPEGs.

PSD – Photoshop Document

An original Photoshop file used within Adobe software for manipulating and enhancing images. Usually exported as JPEG or PNG for wider use online and in print.

PDF – Portable Document Format

A popular format for files that need to be shared but not easily formatted. All of the design items on the document have essentially become a single ‘snap-shot’ image.

EPS – Encapsulated Postscript

Created by Adobe to encapsulate 2D image, bitmap and text into a single file. Primarily used by graphic designers exporting information from Adobe.

AI – Adobe Illustrator Document

An original graphic file in Adobe Illustrator. Widely used by graphic designers for logos and illustrations.

INDD – Adobe Indesign Document

An original file in Adobe Indesign. Widely used for presentations. Usually exported as PDF to be shared.

RAW – Raw Image Formats

A file which has not been altered, compressed, or manipulated in any way by the computer. Sometimes used in photography or video production. For more advice from a professional web designing agency.