Web Typography & Images
Web Fonts
Web typography has become extremely popular over the past few years, with the rise of technology more and more of use are using digital devices on a daily basis – every website, every application and every blog you visit utilises web fonts. There are a number of sources you can access web fonts to use in your own projects, the popular websites being Google Fonts and Adobe Fonts which allow you to import a web font into your website or application without having to store the files in your file system, instead the files are stored on an external server and imported to the website.
Web fonts can come in all shapes and sizes all fit for different purposes, some fonts have create legibility at smaller sizes and are perfect for body copy in a website whereas some fonts are bolder which may make them more suitable for headings and titles in the website. Sans-serif typefaces are commonly used within digital design as they allow for a better reading experience as opposed to a serif typeface or others such as calligraphy, script and display typefaces.
A benefit of using web fonts is that you have thousands of typefaces and fonts to choose from for your project which allows you to be as creative as possible with design as opposed to using just basic, common typefaces like Arial and Times New Roman.
Image Optimisation
Image optimisation is extremely important when it comes to designing for the web, as there are millions of website in existence but there is only a limited number of space in servers that store these websites. Another reason optimisation is important in design for the web is it allows for a faster loading speed in your project, if your website is taking too long to load the content on the page the user may exit the website and visit another page that loads faster than yours. Keeping your file structure as light as possible is essential to increasing the loading time in your website. Adobe Photoshop is perfect for optimising images and reducing the file size of an image, there are other tools available that work well for example ImageOptim for Mac OSX and FileOptimiser for Windows.
Image Types
Raster Images
Raster images are commonly what we refer to when we are dealing with images in a digital format unless you are using a file type that is vector based like and SVG file, whenever we take a picture on our smartphones or with a DSLR camera the image is either converted to a JPEG or a RAW file type. Similar to how bitmap images work, a raster image is made up from pixels where each pixel stores specific information on colour and tone in order to display the image correctly on a screen – the more pixels in the image, the higher the resolution. RAW files will usually have a larger file size and image resolution as the raw image file will contain a lot of metadata about the image and colour information. Some common file extensions for raster images are .gif, .png, .jpeg, .bmp and .tiff.[2]
BMP – Bitmap is a file format that is commonly used for images and are often defined by the file extension .bpm. A bitmap images is made up of 1’s and 0’s that make up the image when render on a digital screen, each bit will hold specific colour information so that when they are all placed together the image is render correctly and as close to the original image as possible. There can be multiple resolutions of bitmap images, the most common being 16 bit, 24 bit and 48 bit file sizes, this states the resolution of the bitmap images – the more bits in the file, the higher the resolution.[1] I have worked with bitmap images in previous projects, more specifically in my redesign of the GUI for Serum by Xfer Records. This was a project I did for a music production company called Echo Sound Works, the project used a bitmap image to define certain colours within certain elements on the interface. Bitmap images are a form of raster images as they are made up of pixels as opposed to curves.
JPEG – Joint Photographic Experts Group (JPEG) is the usually the standard format for most images, every time we take a photo on our smartphones it will be converted into a JPEG image. The reasoning behind this is that JPEG images are compressed to make the size of the file smaller while still retaining its quality, this is perfect for devices like smartphones as they have limited storage. In the modern wired age and the rise of social media JPEG images are possibly the most common file format for images on the internet, the small file size is perfect for storage and sharing images on social media platforms like Facebook and Instagram.[3]
PNG – Portable Network Graphics (PNG) is another commonly used file format for images on the internet, website and applications, the file format is often used for images on websites more specifically in logos as it allows you to export the image with a transparent background. This is perfect for logos as you don’t want a big block of white on your website if the background colour of your website isn’t white. PNG images were originally created to replace Gif files which were commonly used on the internet before PNG’s were developed.[4]
GIF – Graphics Interchange Format (GIF) is a renowned file format and played a key role in defining the internet in the earlier stages of its development. GIF’s are a bitmap image file and similar to PNG and JPEG file formats, GIF’s support transparency like PNG files and they are still images like JPEG images. A common feature of the GIF file format is their animation capabilities, although the file format wasn’t originally created for animations they have began to make a name for themselves across social media platforms like Snapchat, Twitter and Facebook where the animation is created through stitching multiple images together.[5]
TIFF – Tag Image File Format (TIFF) is an image file format commonly used in graphics design and photography, the lossless compression makes it perfect for storage as well as retaining the quality and resolution of the image. Although the image file isn’t as common as other raster image file formats like JPEG and PNG it is still widely used by a lot of people. The file format was originally created for the scanning industry as they wanted the TIFF file format to be the standard across scanners and fax machines, the file format is now being developed by Adobe Inc.[6]
Vector Images
Vector images are a different type of image format that can be used within a website, where raster images are made up of pixels vector images are made up of points along a path to make up an image, this is commonly seen in elements like iconography and logo files in websites. A benefit of using vector image formats is that it allows you to resize the image without loosing quality, if you resized a raster image to 4 times the size of it original size it would appear extremely grainy and pixelated whereas with a vector image the quality and detail would still be the same as the original file. Some common file extensions for vector images are .eps and .svg.
SVG – Scalable Vector Graphic (SVG) is a commonly used vector image file format on the internet and in websites/applications, since the file formats creation in 1999 the XLM-based image file format has been developed by the World Wide Web Consortium over the past decade and a half. Over the past few years SVG file formats have been commonly used for certain elements in web design like iconography and brand logos as the image retains its quality when it is resized as opposed to a raster images that would start to pixelate if you scaled it up in size. The SVG file format is now supported on the majority of browsers which makes it the perfect file type for specific images like icons and logos on a website.[7]
Adding Images to HTML Documents
File System & Image Storage
When setting up your file structure for your website it is important to create a separate image folder where you will store all of your images, this will make your file system a lot easier to navigate and it will be a lot cleaner rather than having your images, html documents and css files all mixed together. For you to import the images into your document you would just need to change the file path in the img tag in your HTML document.
Adding & Styling Images
Adding an image to a HTML document isn’t as hard as you may think, first you need to ensure you have your folder setup properly with an image folder inside the project folder, once you have your folders created and your images placed inside your image folder you’re ready to go. To add an image into a HTML document you need to use the img HTML tag which will import the image and tell the web browser what to display. There are a couple attributes that the img tag will need in order for it to properly display the image, the first one is pretty obvious as your need to define the image that you want to display, this is defined through the src attribute which allows you to locate the image you want to display in your web page. The next attribute is the alt attribute which is primarily used for accessibility purposes and for screen readers, it is basically a short description of the image that can be used to explain the image to someone who is visually impaired.[8]
<img alt=”This is an image on a website.” src=”images/image-01.jpeg”>
Styling an image with CSS is pretty simple too, you can target every image in the HTML by defining the img tag as the CSS selector. Alternatively you could give the image an individual class and give it specific styles that are separate to other images on the web page. It is import to limit the image size by using the max-width property so your image will be no larger that the screen in it being displayed on unless it is specified otherwise.
Task – Adding Images to Baskerville Document
In our workshop we were tasked with adding images to our HTML document to add visual content to our web page. For my project I wanted to utilise a full-screen image that will be displayed on the landing page of the website, to do this I used the background-image CSS property to allow me to tell the computer what image to display as the background image of the section. As the image created some contrast between the content and the background image I needed to apply a background gradient from bottom to top to allow the content to become visible against the background image. I achieved this by using the linear-gradient attribute to allow me to create a black fade from the bottom of the screen to the top of the screen.
I have included some screenshots of the HTML and CSS code in addition to a screenshot of how the webpage is looking so far.
References & Sources
- EasyTechJunkie. 2021. What is a Bitmap Image? (with pictures). Available at: https://www.easytechjunkie.com/what-is-a-bitmap-image.htm.
- Raster vs. Vector Images – All About Images – Research Guides at University of Michigan Library. 2021. Raster vs. Vector Images – All About Images – Research Guides at University of Michigan Library. Available at: https://guides.lib.umich.edu/c.php?g=282942&p=1885352.
- JPEG File: What is a .JPEG and How do I Open it? – PaintShop Pro. 2021. JPEG File: What is a .JPEG and How do I Open it? – PaintShop Pro. Available at: https://www.paintshoppro.com/en/pages/jpeg-file/.
- PNG File: What is a .PNG and How do I Open it? – PaintShop Pro. 2021. PNG File: What is a .PNG and How do I Open it? – PaintShop Pro. Available at: https://www.paintshoppro.com/en/pages/png-file/.
- How-To Geek. 2021. What Is a GIF, and How Do You Use Them?. Available at: https://www.howtogeek.com/441185/what-is-a-gif-and-how-do-you-use-them/.
- Wikipedia. 2021. TIFF – Wikipedia. Available at: https://en.wikipedia.org/wiki/TIFF.
- Wikipedia. 2021. Scalable Vector Graphics – Wikipedia. Available at: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics.
- HTML img tag. 2021. HTML img tag. Available at: https://www.w3schools.com/tags/tag_img.asp.