Category: Graphics
I have created a Loom video series about web graphics. To go through the videos and practice the techniques shown in them, please download the starter files. Topics covered include: jpeg file size reducing jpeg file size via dimension & quality batch processing in photoshop, bridge, and xnconvert svg: the web’s vector file format png8, […]
Categories
Open Source Images
The following is a list of places you can find open source images for your projects. Copyright conditions may apply. These can include considerations such as commercial vs personal usage, or attribution required or optional, etc. Unsplash: very high quality images. Copyright free: No restrictions on usage. Searchable. Pixabay: Copyright Free, Attribution not required. Searchable. […]
Categories
CSS Blend Modes Tester
In the following exercise, you will explore the following areas. css blend modes css variables (also known as custom properties) grid auto-fill and minmax() advanced form styling animation transitions js change event js event targets more visual studio efficiencies In the project, you will make a CSS Blend Modes Tester: a tool that will allow […]
Categories
Batch Processing Images With XnConvert
Often you will need to process a number of photos at the same time, with the same settings. For a single image, you can use Photoshop’s Export > Save For Web feature or right click on a layer and chose Export As… For batches of image, you can record Actions, which are the Photoshop equivalent […]
In this exercise, please make sure that you are using Firefox: Chrome’s aggressive image caching will make the example appear not to work. As noted in the discussion of the SRCSET attribute, not all of our images need to take the full width of the screen. Depending on the layout, some might take half the […]
Responsible Responsive Design: SRCSet In this exercise, please use the Firefox or Firefox Developer Edition browser: Chrome very aggressively caches images, which will make the demonstration appear to not work as described. To begin, please download these files. A basic strategy that evolved to deal with different screen widths is the now-classic img {max-width:100%} responsive image style. However, […]
Note 2023: webp is now a well-established format. However, the use of the picture element, as discussed here, can be used to serve a newer format like AVIF, while providing a fallback to browsers that do not support that format. The technique is identical to the one discussed here. The largest contributor to file size […]