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

Use vectors                 

svg vector accelna

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


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

jpg vs png accel na

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.

Automatic Scaling

auto scale accel na

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

accel north america - test automation

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.