So you’ve got yourself a beautiful new website, it’s fully responsive and looks great across all mobiles, tablets and desktops, but then you notice that your images are looking blurry, or taking a long time to load, or they’re stretched or skewed beyond recognition.
This is likely because there wasn’t a great strategy around image implementation with your website. As with everything in the world of web design, there are plenty of solutions to solve the issue of responsive imagery, and below are some that are considered best practice.
The Basics
There are two types of images that we need to be aware of and know the difference between; Raster and Vector imagery.
Raster Images: Raster images are made up of pixels, and have a fixed maximum quality. Once the image is scaled beyond this quality, the pixels start to become blurred and visible.
Vector Images: Vector images are drawings made from coordinates, and can scale indefinitely. To draw a square, you identify the 4 corners as points, and draw straight lines between them.
To learn more about the difference between Vector and Raster images, see the extensive write up at Vector-Conversions.com.
Which Image Type is Correct?
There is nothing wrong with either type of image. However, you need to use the correct image type for the correct purpose, and this is where a lot of designers and developers fall down.
It completely depends on your intended purpose. See the cheat-sheet below:
Photo quality/Product Photography: Use a raster file type to get the diversity of pixels, and easy gradient images.
Preferably use JPEG for its high quality compression of large images.
Icons: Icons should always be a vector. Any illustrator or designer will be able to provide icons sets as SVG files or similar, and these should be incorporated into an icons font file, to be used throughout your website.
Short Frame Animation: Use a raster file type such as GIF to do simple frame animation of pixel based content. If it’s a longer animation, or animating something like an icon see below.
Animated Icons: If the animation is simple (rotate, scale, move) this can be done using CSS and an Icon Font. More complicated animations can be achieved using SVG animations and JavaScript.
Line/Shape/Font Animation: Using Vector makes sense for this types of implementation. Examples can be seen at Vivus, which are triggered by JavaScript.
In our post Web Design Responsive Imagery – Part 2 we will talk about photography, logos and icons. Keep your eyes peeled!
Feel free to contact our web development solutions team to receive further advice about our services for you 020 3813 5351.