This week we continued to develop further HTML and CSS skills. Modern web content is massively based on visual content, so adding images, visual hierarchy and creating difference between elements is key. The Internet is now also viewed across devices, from phones to desktops and everything in between, so creating web content that works equally across devices is also key, using relative sizing units and optimising images ensures content works effectively no matter the screen size or network speed.
This week’s class was more of a workshop, than a lecture, with the focus on working through the different aspects of HTML and CSS together as a class. We worked on improving the Baskerville webpage we started two weeks ago by adding optimised images, adding more HTML tags where appropriate and editing CSS to create a more visually appealing website. We also learnt how to create tables for webpages to display content in a logical way, when required.
Images can be found in a huge range of different file formats, each format being designed for different purposes and with their own advantages and disadvantages. With web content in mind, file size and scalability are the main concerns.
We started by looking at some of the main differences in file formats, starting with whether they store bitmap or vector images. Bitmap images use pixels to store data, which can cause issues with scaling as when they are made larger they lose quality and the pixels in an image become visible. Vector images are created mathematically, so can be scaled to any size with no loss of quality. Different file types also compress images in different ways, some compress without a loss of quality and are described as lossless. Others do lose quality through the compression process and are described as lossy.
This image shows the most commonly used file formats and some information about them, the top four are bitmap (or raster) formats the bottom three vector formats.
Source (http://www.illuscientia.com/resources/digital-image-file-formats/) Last Accessed 23/11/2022
As a class exercise we were set the task of taking the same image and trying to get it to the lowest file size without losing quality. I used Photoshop to do this, but we spoke of other free options such as tinyjpeg if required. Here are the results:
The Original: 1459Kb
Optimised: 108Kb
While I lost a small amount of quality in compressing the image, I was able to reduce the file size significantly (over 10x smaller). Smaller file sizes allow for faster loading times on a webpage. This is extremely important as users could have poor network speeds or be using a mobile device. By optimising images we improve the user experience of a webpage.
Tables are useful in web design for displaying certain types of content. Usually pieces of information that are made clearer by being placed in a table, such as this conversion chart for converting PSI to BAR which are different units of air pressure.
