How often do you come across sites with little to no imagery? Right - barely ever. Such occasions happen, but broadly speaking, websites usually contain some forms of visual representations to provide better context or clarification. After all, images are the primary form of visual identity online. They break up the monotony of the text and give insight into what the story being told is all about. Images are powerful means of communication, and if used properly, they can yield purpose to your site too.
But before blindly adding relevant images or graphics to your site, consider reading the rest of this blog to understand better why and how you should handle visuals to maximize value and get the point across better.
Praise originality
Use original images. Make people feel like they're visiting a place they have not already seen beforehand. Make their stay a welcome and remarkable experience. Showing originality through your visuals greatly improves the experience one has with the brand or company. The images here to look out for are either of your workplace, company, staff members, or some products.
SEO friendliness
SEO (Search Engine Optimization) is the term that either breaks a website or makes it shine. We're all familiar with it, and knowing that, we shall not allow our website to load slowly. If it does, readers may lose patience and leave the site quickly. On the other hand, if your website is SEO-friendly, Google and other search engines can effectively index every page on your website. That way, the site has a higher reach and a higher likelihood of being shown as a result of the end user's search query.
Performance & optimization
Images take up memory and storage. The more you have, the harder they are to handle. For that reason alone, optimization is the top priority. Slowing the page down causes stutters and, in turn, negatively affects the end-user experience. We don't want that. Higher-resolution images take up more storage due to effectively having more content within themselves.
So to improve the performance and optimization of images, web developers mostly use these three methods: caching, compressing, and resizing. With the caching method, images are stored in the browser's cache or proxy server so that they can be accessed easily. This method reduces application requests and the page's download size. The compression method makes images smaller by reducing the number of bits. Finally, it would help if you considered compressing images to prevent overload and improve the experience of using the page. In case you can't compress your images, you can resize them. But remember that you must balance the image size and resolution.
As for image optimization, it is possible in two ways - manual and automatic. Manual image optimization is done using various online image compressors that deliver high-quality compressed files. The most popular ones are:
The automatic image optimization is done with the help of various bundlers, such as webpack and parcel. Webpack has its own third-party package called ImageMinimizerWebpackPlugin, which community members maintain. Parcel has built-in support for resizing, converting, and optimizing images. It can reference images from HTML, CSS, JavaScript, or any other file type.
Lazy loading
Website performance can be improved by using a lazy loading strategy. Lazy loading strategy identifies resources as non-blocking and loads them when they are needed. It usually happens during some user interaction, such as scrolling. It also reduces page load time which improves user experience. Lazy loading can be implemented by loading attribute on the <img> or <iframe> element. The loading attribute instructs the browser to defer loading of images that are off-screen until the user scrolls close to them.
Most popular frameworks can also implement lazy loading. For example, React can implement it by installing React Lazy Load Image Component library.
Visual representation
It's a common misconception that people use the term "images" to note exclusively photographic material, but that's not the case. The term "images" varies along the board, and it includes many different types of visual representations, such as:
-
videos
-
animations
-
graphics
-
GIFs
Static images, or simply those that don't move, come in various formats. Choosing the right format ultimately yields a much greater user experience without sacrificing visual quality. The two primary formats are raster and vector images, but there are also some new incoming formats.
Vector images
The key to their appearance is points and lines, which make them appear smoother. They are more like digital art rendered by the computer using a mathematical formula. Knowing that, stretching and expanding a vector image will retain a smooth pixel-free appearance. Vector images belong to vector graphics, also known as scalable vector graphics - SVGs. Those consist of anchored points that are connected by lines and curves.
What is unique about SVGs is that they're not pixel-based and are resolution-independent – making them infinitely scalable. Regardless of their size, their lines are sharp without losing quality or detail. Another point to take; they're also device independent – their quality does not depend on the number of pixels on the screen. Finally, their file sizes are small since they consist of points and lines. Vector images are mostly used for fonts, logos, some digital printing, and computer animations. The most popular file formats for vector images are EPS (Encapsulated PostScript), SVG, and AI (Adobe Illustrator Artwork).
Raster images
On the other hand, these images are made out of a collection of pixels (the smallest unit of visual measurement) - making them resolution-dependent. The primary use of such images is creating photographs that will inevitably become pixelated as you scale them. Pixels appear as small dots or squares when enlarging or zooming into raster-type images. These images are created by digital cameras or scanners that output digital files onto the computer. Each of them has a fixed number of pixels that determines the quality of the image. This measure is known as a resolution. When a raster image has more pixels, it is said to have a higher resolution, resulting in better image quality.
The more pixels there are within a raster image, the bigger the image's file size. Conversely, having fewer pixels yields a lower-resolution image. Resolution limits the size of the image that can scale up without seeing individual pixels. File sizes of raster images are largely dependent on their exported resolution and are, in most cases, large themselves. They are mostly used for photography and printing. The most common file formats for raster-type images are:
-
PNG (Portable Network Graphic)
-
JPEG (Joint Photographic Experts Group)
-
GIF (Graphics Interchange Format)
-
TIFF (Tag Image File Format)
-
BMP (Bitmap Image files)
All of the mentioned formats have their quirks and features. PNG images are the best option for graphic design due to supporting transparent backgrounds. JPEGs, on the other hand, handle complex colors very well. GIFs also support transparent backgrounds, just like PNGs do. They also support animation but are limited to only 256 colors. Generally, the more the file size is reduced, the lower the image quality.
Implementation examples
Images can be uploaded via many various ways through the use of HTML and CSS.
Image as an <img> attribute: a simple way of adding an image to a web page. This way is the most popular one and also provides a fallback in case the image cannot be displayed.
Image as a background in CSS: using this, images can be added within a div without adding additional HTML attributes to the page. This way, images are easily displayed properly, even with limited proportions.
Image as an <iframe>: this type of implementation is not commonly used due to it being difficult to maintain and having a low SEO rating. SVG images implemented this way are not scalable anymore.
Image as an <embed>: using this implementation method is similar to using the <img> tag. This method is not recommended due to browser plugins being deprecated and removed for most browsers.
Inline implementation of vector images: SVGs can be added directly inside of the HTML file using the <svg> tag. To do this, you can open the vector image within a code editor and copy its content which then can be pasted into the code.
Implementation of raster images within the <picture> tag: when responsive design is needed, raster images are used inside <picture> tags. Since raster images are very well scalable, multiple raster images can be combined for the viewport to be filled nicely. The <picture> tag contains two other tags - <source> and <img> tag. The <source> tag has an attribute srcset in which raster images are being referenced for different viewport widths. Different viewport widths are written within the media attribute. The browser looks for the first <source> image where the media query matches the current viewport width and displays it. If no <source> tag matches the viewport width, the browser will pick the <img> image instead. This is how we display our own blog images.
New image formats
In addition to already well-known image formats, there are also new ones that will be heard a lot more. The most important new modern image formats are WebP, HEIF and AVIF. WebP represents Google’s new modern image format that enables lossless image compression, while HEIF (High-Efficiency Image File Format) streamlines image storage. AVIF (AV1 Image File Format) stores static and animated images in HEIF file format with AV1 compression. All new formats have in common that they support transparency and animation, but unfortunately, for now, they have poor browser support.
Conclusion
With their small file size and scalability, Vector images are best suited for use in digital printing and computer animation. On the other hand, Raster images are best option for digital photographs and print materials. For scalable shapes – vector images are the best choice. However, for complex color blends – raster images are the preferred option.
The most popular raster image formats are PNG and JPEG. Consider using PNGs when no background has to be displayed, but other than that, switching to JPEGs reduces the image file size and optimizes the website load speed. You should also keep an eye out for the abovementioned up-and-coming modern image formats. Therefore, to improve website performance and overall user experience, choose the right image file format for your needs. If you're insecure about the choice, experiment with different implementations, and we're sure you'll be able to find the most satisfying solution.
