Preparing media for Web Use
When working online, there is always a use for images. We see images all over the pace. From websites, to news articles, images are used everywhere. And ensuring that these images are presented in the best and most efficient way is an integral part of developing for a website. In this project we did just that, we explored the different formats of images and their respective sizes.
What is this about?
When starting out, It was first time to understand the different types of images, and how their storage sizes interacted with each other. And so we got into the research. We learned about the different file types starting with RAW files that contain no compression, then to the different compressed image formats such as JPG, and WebP. We also looked into how quality effected the overall image size.
But Why
For this project it was done as part of an assignment in the Media Output and formats class at UVU with Michael Harper
Going At it
As I started out, it made since to start with a uncompressed RAW image file. These photos, I took myself and used different compression tools to find which format and file type would lead to the lowest file size with the best quality of image.
These images started as 4k images and both were around 10 MB large. The first compression settings I used were the photoshop JPEG compression. This was probably the most frustrating process I did. As I went through the compression options, it seemed that Photoshop had a different compression algorithms for each of the different export and save options.
This lead me to go through each one of them looking to see what options where available for each, and what quality settings were available with each option. This process took the longest of all of them as there seemed to be more and more options available the longer that I went into it. Something that I found out though is that mid high quality, and high quality have no difference when it comes to overall image appearance. As an example of this quality level 8 in the export as options of photoshop is just as good quality as quality level 12 with a significantly lower file size.
After that I focused on Webp and the AVIF file types, each of the newer file types that have come out. With those compression options I exported each of them in the different quality options available to find the best spread of data. When looking into WebP it was very apparent the lower file sizes with similar quality. Same with AVIF, it had a lower file size and similar quality available. Each of them though still have their merit and uses. With AVIF being a relatively new format, it isn’t implemented on older devices, similarly with WebP. So Jpeg is still useful when as an option of older devices.
What I learned
What I ended up learning was that image tags in html were no longer a really viable option anymore when working with websites. We need to provide options for all devices but still give the best quality when available. And so, picture tags with subsources are the best way to do that. We are able to have the lower files and faster loading formats of AVIF and WebP, but still set a default image to be JPG so that when the site is loaded on older devices the images can still be seen. You can find my documentation on the event here.
HERE
Looking Back
Looking back, this project was a good experience understanding the nuances of images and file formats. If I were to do it again, I would want to use different images and track more options than just quality differences. I would want to track options such as how progressive loading effected wait times, and how some of the different options change how he files load.