{"id":49,"date":"2018-11-10T17:05:07","date_gmt":"2018-11-10T22:05:07","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/chapter\/writingpersuade\/"},"modified":"2023-06-08T11:58:18","modified_gmt":"2023-06-08T15:58:18","slug":"imageformats","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/chapter\/imageformats\/","title":{"raw":"2.2 Image formats","rendered":"2.2 Image formats"},"content":{"raw":"

Using photographic images in your online presence requires considerable decision making. Beyond the image look at feel; the graphical elements and placement of the image must also be considered. After which, you need to decide where to source your images. Typically the choice is one of these three: stock (paid), public domain (free) or graphic\/photographic (new) images. <\/span><\/p>\r\n

In a business environment, images of current customers enjoying or using actual products and or services, is best<\/span><\/span>. But in reality, photo-shoots are not always easy to set-up or capture - think of an accounting office. <\/span>Before getting into which image to use when, let's discuss image formats.<\/span><\/p>\r\n\r\n

Vector v. Raster (Pixel) Image Formats<\/h2>\r\n At the heart of every image is its graphical compilation. <\/span>Graphics are either made of tiny squares (pixels) or mathematical calculations (analytical and geometrical)<\/span><\/span>. The most important difference between vector and raster images is their scale-ability:\r\n\r\nSince vector graphics are rendered using mathematical calculations they are able to be resized without the loss of definition on edges and lines. Raster images, on the other hand must be resized from the source application and re-exported in order to be resized. If not, they will be of lower quality, anti-alias and will look \"pixelated\". Different applications are set-up to create either one or the other format. For example Adobe Illustrator creates vector graphics whereas Adobe Photoshop creates raster graphics.\r\n\r\n\r\n\r\n\r\n
\r\n\r\n[caption id=\"attachment_264\" align=\"aligncenter\" width=\"300\"]\"Pixelated \"Pixelated\" 300px width photograph of the portrait: \"Mona Lisa\"[\/caption]<\/td>\r\n\r\n\r\n[caption id=\"attachment_263\" align=\"aligncenter\" width=\"198\"]\"Photograph Original 150px width photograph of the portrait: Mona Lisa[\/caption]<\/td>\r\n<\/tr>\r\n
Originally, the raster image on the left was set to 150px width and then scaled-up to 300px width without going to a larger \"pixel density\" source file creating a \"pixelated\" effect. Creative Commons CC0 License<\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nA number of popular image file formats are shown in the chart below:\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Table 1: Vector and Raster Image File Formats<\/strong>\r\n\r\n<\/strong><\/td>\r\n<\/tr>\r\n
Raster<\/strong><\/td>\r\nVector<\/strong><\/td>\r\n<\/tr>\r\n
Encapsulated PostScript File (.esp<\/strong>)<\/td>\r\nAdobe Illustrator native file format\r\n(.ai<\/strong>) - not web-friendly<\/em><\/strong><\/td>\r\nScalable Vector Graphic (.svg<\/strong>)<\/td>\r\nJoint Photographic Experts Group (.jpg<\/strong> or .jpeg<\/strong>)<\/td>\r\nPortable Network Graphics (.png<\/strong>)<\/td>\r\nGraphical Interchange Format (.gif<\/strong>)<\/td>\r\n<\/tr>\r\n
There are considerably more vector image formats than raster.<\/td>\r\nWebP Image (.webp<\/strong>)<\/td>\r\nTagged Image File Format (.tiff<\/strong>)<\/td>\r\nAdobe Photoshop native file format (.psd<\/strong>) - not<\/em> web-friendly<\/em><\/strong><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n[caption id=\"attachment_276\" align=\"alignright\" width=\"109\"]\"SVG Figure 4<\/strong>[\/caption]\r\n

Scale-able Vector Graphic (SVG)<\/h3>\r\nJust as described above, this file format is incredible in that it does not lose quality when scaled. The simplicity of the SVG allows for it to be programmed manually or created using web applications like Affinity Designer<\/a>[footnote]Serif Ltd. (n.d.). Affinity Designer. https:\/\/affinity.serif.com\/en-us\/designer\/[\/footnote]. You will most often find this file format in the shape of graphics, icons or logos. The graphic shown on the right is a SVG exported into a PNG file format in Adobe Illustrator.\r\n

Joint Photographic Experts Group (JPEG or<\/strong> JPG)<\/h3>\r\nThis file format is best for photographs that have a full colour-palette. It is by far the most common and easily identifiable image file format. JPEG is 24-bit RGB (red green blue) format capable of millions of colours and colour transitions. It uses lossy compression when reduced in image size. Meaning some of the data of the image is lost in compression; which is clearly evidenced in the Mona Lisa painting above.\r\n\r\nFor best results, export your images as progressive JPGs. This will allow images to load faster through multiple passes when an individuals Internet throughput is low.\r\n

Portable Network Graphic (PNG)<\/h3>\r\nThis type of image is mostly suitable for graphics or images that do not have large colour palettes. The 8-bit indexed colour option is the most suitable for the web because of its lossless compression and small file size.<\/strong> PNGs are great for graphics because they also allow for transparencies which make them ideal for icons that you want to overlay on a web page.\r\n\r\nThere are several types of PNG images:\r\n