It’s not surprising to learn that website performance is directly correlated to the sizes of images that you put out there. The reality is that most of us want websites to load at lightning-fast speed, and this is desirable for Google as well. Yet, a large number of websites are excruciatingly slow.
Website performance is now a major factor behind UX (user experience) and even contributes to the effectiveness of SEO alongside, with improving internet speeds over the last few years. Page loading delays may cost you visitors in droves, with most of them losing the tempo, and migrating to other sites. Another stat that deserves notice is that 50% of visitors are more likely to make use of mobile devices. Hence, ensuring optimized image sizes and file formats is crucial (if you don’t want your website traffic to slide alarmingly that is).
Now that we’ve got that out of the way, what’s the best way to compress and resize images before uploading them to your portal? Can this procedure be made simpler? What are some ideal file formats? Here’s a brief look.
Image Commandments to Remember
1. Sizes Matter (in all respects) –
Don’t just take the high-resolution route for bragging rights. Too many people think that high resolution automatically equates to the best possible solution for their websites. Nothing could be farther from the truth in this case. What you can do instead, is leverage Resize Image After Upload or a similar plugin for image resizing purposes. You can also resize uploaded images in bulk if that’s what you desire.
Those using leading photography platforms like SmugMug or PhotoShelter are better off with image licenses and more. These are platforms which require high image sizes and quality, while keeping theft at bay through automatic restoration of images to smaller sizes, while showing them online. Yet, if you are just showing images on a blot or portfolio for example, do not go for the maximum dimensions.
Important image dimensions to remember while uploading images on the website.
- Images should be as big enough as their frames or containers, depending on the page framework. Learn the width of the content area on the website first. Use the page ruler browser extension for measuring the same.
- For slideshows (full-width), you can choose 2560 pixels (width).
- This applies for all images covering the width of any browser.
- Smaller slideshows necessitate around 1800-2000px.
- Use the Lightbox view option for thumbnail galleries.
- Keep their sizes at around 1500 pixels or up to 2000 pixels.
- Portrait/vertical images can be around 1200px.
- These will help you master the crucial art of image resizing and optimization. Image size is the biggest determinant of quality and how your website performs after uploading these images.
1. What should you consider while uploading an image on the website? File Type, Compression or Quality?