In this helpful article, we’ll go over the quick and easy way that you can validate local images based on their dimensions, using the onFileSelected callback to help properly enforce image dimension constraints for any local files that you happen to be working with.
But first, it’s necessary to get a better idea of why this is such an important step to take in the first place. For the sake of example, let’s say that you’re setting up a website that will allow users to log into their own personal account, upload their personal details and select an avatar to represent themselves on something like a discussion board. Obviously, users would be uploading their own images – all of which will vary wildly from the next in terms of dimensions.
The Importance of (Proper) Visual Communication
Without validating local images and enforcing any image dimension constraints that may be present, every time that user makes a post it would essentially alter the format of the discussion board. Some images may be massive while others are very tiny, thus creating an irritating and confusing experience on behalf of other users.
It’s equally important to consider the mobile factor in all of this – remember that the vast majority of your users will be engaging with your site and services on a smartphone, tablet or other type of mobile device. According to a recent study conducted by the Pew Research Center, a massive 95% of all Americans now own a cellphone of some kind and a significant portion of smartphone owners in particular actually use it as their primary means of connecting to the Internet.
Now, think about what happens when an image with unenforced dimension constraints loads on a smaller device that is designed to be used with your fingers instead of with a keyboard or mouse. Instantly, it becomes difficult to access the important information contained on that page – and the entire site is probably difficult to navigate, too. Consider the fact that a full 39% of people say that they will flat out stop engaging with a website of images won’t load, or if they take too long to load. Another study revealed that people will leave a site, service or app and never return of content does not display well on the device they’re using – to the tune of about 73%.
But perhaps the most important statistic of all is the following: according to research conducted by Forrester, visit-to-lead conversions can literally be as much as 400% higher on sites or apps that offer a “superior user experience.” Even a better, more thoughtfully designed user interface stands to raise conversion rates by up to 200%.
The Importance of Images
It’s equally important to think about why images themselves are so important in the first place. Human beings have always been visual learners, but in the fast-paced modern digital era, images are critical. Not only are visual elements like images more memorable and effective, but they also help people better process, understand and retain information. If they’re displaying properly in the first place, that is, which is something that should always be one of your own primary focuses.
This, in the end, is why validating local images based on their dimensions is so important. It isn’t just that you’re making sure that everything displays the way you want it to, although that is a big part of it. But more than that, it’s about creating the best possible experience on behalf of your own users. It’s about making sure that nothing stands in the way between those people and whatever it is they’re trying to do – whether it’s view more information about your products or services, set up an account, participate in a community discussion or something else entirely.
Thanks to this special feature of the onFileSelected callback option, a file can be rejected outright if the function throws an error message. In certain situations, the file can also be rejected with a notification as well – making sure that everyone involved has access to the most actionable information at all times, no matter what. In the tutorial that follows, we’re going to teach you how to do all of this and more in just a couple of minutes.
Filestack is a dynamic team dedicated to revolutionizing file uploads and management for web and mobile applications. Our user-friendly API seamlessly integrates with major cloud services, offering developers a reliable and efficient file handling experience.
Read More →