How to Optimize Images for a Web Page
Optimize Images: As a photographer, there are few things you love more than your photos. This feeling is shared by designers, artists, and in general all those who devote a great deal of their time and energy to creating beautiful images.
After investing in all the work, it is natural that you want to share the result with the whole world through different channels. One of the most effective channels for sharing your beautiful images with the world is your photography website, a great tool for showcasing your work to clients, colleagues, and friends.
As you probably know, photos often don’t appear on the screen as you take them. It’s like there’s a “pixel leak” along the way, and your image quality will suffer. If not, the problem will be something else: the files will be so large that your web page will take a long time to load the content and this, without a doubt, can affect the patience of visitors and potential customers. . – who wouldn’t hesitate to go anywhere else. This is the great dilemma of image optimization in the Internet age >> How to find the right balance to maintain the best quality without affecting the speed or performance of your website?
In this article we will list the most common mistakes that most photographers make and give you a list of the best ways to improve your photos for web pages that you can start applying right now:
Why is image correction so important?
Nowadays, your online presence plays a very important role if you want to become a professional photographer. From having an Instagram account where you showcase your best shots, to creating a photography website that looks professional and reflects your style, where you can even sell your photos online, or to people. Let us book a photo shoot with you.
Now, why improve images?
Have you ever wondered what goes on inside your computer when you surf the net? Let us explain it to you: Your computer, Mac, tablet or mobile browser needs to download each file of a web page in order to display it on the screen. This means that the larger the files, the slower the overall speed of your web page.
We all know that slow performance can have disastrous consequences for both SEO (Google loves fast-loading pages) and customers’ user experience (UX).
Likewise, keep in mind that the average Internet user has no patience with a page that takes too long to display content, even if the delay is justified. Statistics show that 40% of people abandon a web page that takes more than three seconds to load.
A third major challenge comes from mobile devices, which represent more than 50% of web traffic today. In general, mobile devices have less bandwidth than home networks, making it difficult to safely load your images onto your viewers’ screens. This is a universal problem that you need to consider: high-resolution images and your website’s performance issues.
How far can quality go?
There are two main techniques for optimizing images on web pages today. The first is compression. The principle is simple (yet mathematically complex): the algorithms in your photo editing software detect unnecessary information in your images and remove it from the files.
This is the operation of many compression formats such as JPEG, perhaps the most famous. As a result of this pixel diet, the size of your images will be significantly reduced and your page will load much faster, especially if you use this compression mode on every image and if you have a strong Apply compression ratio (“JPEG quality”).
However, there is a significant problem: compression leads to loss of valuable data. And it usually shows up in small details like the appearance of objects or a less sophisticated look than the average internet user can tolerate without drama.
He does, but you don’t. As a photographer, you should have (almost) zero tolerance for anything that could even slightly alter the quality of your creations. Because at the end of the day, what’s the point of putting in the time and effort to get the perfect image if the first contact with the compression algorithm ruins everything in a microsecond?
This is why this system can be safely used for many other types of websites (such as hotels, blogs, online stores, etc.), but we recommend it for your online photography portfolio. Do not recommend.
Does size really matter?
Most current cameras allow you to take photos with a much higher resolution. As seen in the table below, even a low-end camera can capture 4,290 x 2,800 pixel images without distortion.
This is a huge advantage, but it also creates a problem in terms of web design, as high-resolution images translate into large files when uploaded.
This is where resizing (the second most common optimization method) comes in. Simply put, this concept means reducing the size of your images without changing the quality (well, almost). Your viewers will see exactly the same thing on their screens except they have to use a microscope to view your images.
This technique is clever but not entirely convincing. Indeed, who can say what is the best solution for the Internet? Every browser displays the same images in different sizes! Not to mention that some of the images were meant to be displayed in a larger format. Examples: images obtained with landscape, macro photography or artistic composition techniques. Last but not least, a suitable resolution for your photography website does not necessarily meet the standards for Facebook and Instagram and vice versa.
In short, resizing your images can be a good option if you want them for a specific purpose and if you’re sure you won’t need to display them on large screens. Beyond that, this technique won’t solve your existential problem #1: How to combine quality and efficiency.
What is the best practice?
- As with relationships or diet, finding balance with web pages is key. On the one hand, you are an artist who wants to present your best in every image, but at the same time you need to optimize your images to display them in your online portfolio without overloading them with huge files.
- As we have seen, the most popular options (compression and resizing) do not respect this balance and significantly compromise visual presentation in favor of performance.
- For its part, Wix uses advanced algorithms to achieve the best balance between image quality and image performance on screens. Basically, all you have to do is take attractive photos, upload them to your website , and then let the computer do all the math for you. No need to compress or resize your images.
- Just upload your photos. Wix Gallery will automatically determine and apply the best resolution. The resized file will be uploaded from the server closest to the browser using a CDN (Content Delivery Network) with global coverage, thus ensuring the highest possible performance and speed.
Here are the steps you should take to optimize images for your website:
1- Enhance your image with Photoshop, Lightroom or any graphic editor of your choice.
2- Export the image as a JPEG file with:
A standard of 11 or higher in Photoshop (or similar).
A resolution of at least 3,000 pixels on the shortest part of the image (portrait width, landscape height).
Maximum size of 15MB
Quality. Except for particularly rich images, adjusting the image setting above 90 is considered bad practice for your website as it will increase the file size with only minimal effect on image presentation.
Sharpness This allows you to analyze your image and improve the sharpness of its edges as much as possible. You have complete control over the amount of sharpening applied to the image, the radius (the number of pixels from the edge that sharpens) and the threshold (which pixels should be treated as edge pixels; the smaller the threshold, the will be, the more intense the acceleration effect).