D2: Optimising Images for My Website

Websites need to load quickly and run smoothly for the users. To do this, I needed to optimise my images for the web. High file sizes take longer to load which slows down the performance of the website. Files types such as JPEG are best for best for images because this file format compresses the file size, but on the other hand, this can lead to a decrease in image quality. If I used a PNG for example, the file size would be much larger but the image quality would be the best. I have created my image files in Adobe Photoshop. I used the export as save for web legacy option in Photoshop, this allowed me to edit the dimensions of my image and also the quality. These two specs can be changed to decrease the file size but also change how the image looks. A good combination of this optimizes the images for my portfolio website. 

 

I sketched the idea for my logo on paper and then created this in Adobe Illustrator. This means that my logo is a vector file, it can be resized without losing quality unlike raster images. This is great since I will need to use my logo multiple times and I can also resize this for other purposes too. I exported my logo as an SVG file. This ensures my logo is still vector (made up of shapes instead of pixels) and it can also be transparent on my website. This is great since I do not have a shape around my logo.

 

 

 

    

Here you can see how PNG files have a larger file size than JPEG. This is because PNG is loseless compression and it can also hold lots of colours. PNG does not loose quality due to the compression type.However JPEG which is lossy. therefore if the image is optimised too much then we can see it being pixellated since this decreases the image quality to decrease the file size.

Here you can see the original file size is 7.91M, which is the ideal file size compared to other file formats.

 

As you can see, I used the file format JPEG for my images. This is a raster file format so I needed to be certain of the file dimensions I would like for my site. As mentioned above, the quality will be decreased thanks to the file size reduction. I needed to make sure my images were high enough quality for the web, but not a huge file size. I tried lots of different combinations but I arrived at the files size and the quality as seen in the screenshots.

 

I embedded my own videos onto my website from my laptop. This ensures that my videos are of the highest original quality. This will load just as quick as YouTube videos which seemed to be lower quality compared to the original videos.