Tips and Resources for Optimizing Images for Web
As responsive web design develops and becomes more specific over time, optimizing images for web becomes more challenging. Different screens and devices, and even social media apps, have their own specifications and requirements when it comes to using images. To achieve effective image optimization for web regardless of specification, make sure that these three things always work well together:
- Quick download time
- Correct dimensions
- Preserved image quality
It may seem like it’s impossible to get all three elements right, as usually only two will be achieved while the other one will be compromised. For example, you want to place a high quality image with the right dimensions, but the file size would be too heavy and would therefore take longer to load; or you will place a smaller image but it may turn out to be pixelated.
But once you know the right tools and techniques to use for the right objectives, you can optimize images for web up to their full potential, without compromising any element. Rotterdam-based web developer Lennard van Diggelen shares are some best practices for optimizing images for web:
Scalable Vector Graphics
To prevent an image from losing its quality when changing its size, it is recommended to use scalable vector graphics or SVG for shapes and icons. SVG images can also be animated to be interactive. It is XML-based and can scale any size and preserve the image quality.
Another flexibility of SVG is that it can be used both inline and with CSS. For developers, this resource shows examples on how you can use SVG for different shapes and styles. You can also learn step-by-step animation of SVG through this guide. For designers, SVG can also be exported from Adobe Illustrator and other Adobe software, without the need for writing in code. There are also many resources available online where you can download SVG elements such as Freepik and Iconmonstr.
As SVG is vector-based, you don’t have to worry about the image’s download time as SVG icons and shapes do not need to have large file sizes. When it comes to browser support, SVG is supported by all browsers (not including Internet Explorer 8 and earlier).
Just like SVG, icon fonts are also scalable and do not need to be large. However, SVGs are more versatile than icon fonts, and creating shapes with icon fonts are quite difficult to do. Not impossible, but just a bit challenging.
JPG, PNG, and TIF
For those who cannot work with vectors, such as some clients and others who are not much web-savvy, image optimization for web is also not impossible on JPG, PNG, and TIF images. According to W3schools, the most ideal size to use for full screen images is 1920px x 1080px as it scales just about right and can be resized to a lower size as long as the 16:9 ratio is followed.
As for the file size, it depends on data stored in an image, such as metadata, that’s why photos usually have larger file sizes that a flat image. To minimize the file size of an image without losing quality, you can use the imagemin script with tools such as Gulp and Grunt. You can also use tinypng if you don’t want to work with node scripts. The tools work by removing metadata from the files. The ‘export for web and devices’ function in Photoshop also does this, but not all metadata will be removed.
Here at MicroCreatives, we apply all best practices to make workflow faster and to produce optimized solutions without compromising the output with the client’s best interest always at heart. If there are more image optimization techniques you might suggest, let us know in the comments below! If you need to consult with an expert regarding a creative project in mind, don’t hesitate to get in touch with us!