In the previous blog we discussed about typography. Most common media elements in UI are images. While using images taking care of few things would make your websites visually appealing as well as helping the page to load faster in all devices.
Principles of User Interface: Images
Vector formats like SVG is responsive as it can be converted into code. The scalability and loading process issues can be tackled with this. Also can add subtle animations and what not! Look at this website here! Take a look at Waaark website for their awesome SVG animations, here
Optimize images for faster loading. It reduce payload size of image resources by re-compressing images optimally, removing unnecessary headers and minimizing reflows. Don’t know how to do that using google developer’s tool? Read it here from the master itself.
Jpg vs Png vs Bmp
Why do we use different formats? Each formats have its own advantages and dis advantages. I will concentrate on advantages here. JPG will have higher color depth than PNG and BMP formats. PNG is best for web in my personal opinion, for its transparency options and comparatively lower sizes. Even though the age of BMP is unofficially over it comes handy in certain situations.
Using automatic scaling in the back end for the images will ensure the responsiveness of the design in different screen sizes. It will help to retain the design aesthetics as well as the usability.
Use Alt tags
Using Alt / Alternate tags is an SEO friendly practice. Make sure you does that. Because search engine crawlers don’t read images. So instead give an SEO friendly description as alt tag, it helps the search engine to understand the image or file.