This week, we continued to look at GitHub and worked on improving our Street of Crocodiles. At this point, I among many others were feeling much more confident in using GitHub, therefore we moved onto more complex functions to make our basic content more visually appealing and user-friendly.

Commands

I spent some time looking at new features that I wasn’t previously aware of. These are more advances and focused on the appearance of a website, which is why we hadn’t yet covered these.

Firstly <br> creates a break between text, such as in a quote or in a paragraph. This can be used to create a new line in a paragraph, without needing to create an entire new one. An example of how this may be used is to create a new line to credit a quote. Breaks can be stacked to create a larger gap, for example: “Hi<br><br>br>How are you?” would create a gap of 3 lines between text.

Furthermore, <hr> stands for horizontal rule. In simple terms, this creates a divider, a great way of creating a clear dividers without needing to create a new page. A horizontal rule may be used between paragraphs, above each subheading or below an introduction to indicate that the current body of text has finished and a new section is below.

Adding images

Images are an excellent tool for web design. They can be used to support information or by themselves to show something, either related to text or by itself. The majority of websites heavily rely on imagery for both aesthetics and functionality, so learning how to use these in a website will be very useful for my future projects.

Image compression

There are some downsides to using images, however. Most notably, they can take up a lot of storage due to the high volume of data they contain, which may negatively impact loading times particularly for users with low internet speed or poor bandwidth. To combat this, images should be compressed to prevent the risk of poor leading speeds. Image compression doesn't reduce the quality of an image much to the naked eye, particularly when scaled to the original size. However, is important to note that there are 2 types of compression: lossless compression does not remove and information from an image, while lossy compression does remove elements which are most noticeable when scaled up.

Apps such as Afinity and websites including TinyJpg can be used to compress images.

Image formats

There are a range of different image types and formats, each with different uses, advantages and disadvantages:

• Bitmap images are more natural. The colours blend into each other, similarly to how paint would. The disadvantage of this is that when scaled up, you are faces with a blocky, pixelated look, so bitmap images can’t be increased from their original size without a visible loss of quality.
• Vector based images are based on mathematical aspects, such as lines and shapes, allowing them to be sized up without losing much quality. Furthermore, they can easily be edited. However, with this often comes a larger file size.
• .jpg/.jpeg stands for Joint Photographic Experts Group. These are bitmap images that use lossy compression and can hold up to 16.8m colours.
• .gif stands for Graphics Interchange Format. These images are also lossy and bitmap, however only hold 256 colours. However, GIFs have the advantage of supporting animated content, much like a 1-2 second long video.
• .png, Portable Network Graphics, images are similar to JPEGs in that they are lossless and bitmap, holding over 16.8m colours.
• .svg stands for Scalable Vector Graphics, another image storage format. These also hold 16.8 million colours, but use lossless vector based graphics, allowing them to be resized while maintaining their quality.

Image Storage

To ensure organisation, images should have their own folder in a websites files, such like how CSS has a dedicated file. This allows images to be stored without becoming disorganised or confused with other files. I will ensure to remember this for my future projects, including updating my current Women in Design folders.