• 489k
  • 168
Art & Photography \ AUG 15th 2017

How to Optimize Images for Your Website

As a photographer, what’s the dearest thing you hold in your heart – after your mom’s love? That’s right, your pictures. The same could be said for designers, artists and more generally, every person who dedicates a substantial chunk of their time and energy on creating beautiful and meaningful images. Since you are so proud of your photos, it’s only natural that you want to show them to the world. Next, you upload them to your very own photography website, which is ready to be shared generously amongst your clients, peers and friends.

Problem: pretty often, the pictures as they appear on the screen aren’t exactly the same as the ones you took. It seems that a lot of poor, innocent pixels were sacrificed along the way. And chances are, if your pixels were lucky enough to survive, another problem will arise: your files will be so heavy it’ll take ages for your site to load, repelling a lot of your visitors (and potential clients). That’s the whole dilemma of image optimization in the Internet era: how do you find the right balance that’ll preserve the best quality possible, without harming the speed or performance of your website?

Let’s discover the common mistakes made by most photographers, and adopt some good practices that you can start using today.

Why is image optimization such a big issue?

Did you ever wonder what was happening inside your computer while surfing the Internet? Well, basically, the browser of your desktop or mobile needs to download every single file from a website, in order to render it onto the screen. Which means that the bigger the files you upload, the lower the overall speed of your website will be. A slow performing website has devastating consequences, both for your SEO (Google loves fast-loading pages) and for the user experience (UX) of your visitors. It’s always good to keep in mind that the average Internet user has no patience for a page that takes too long to appear – even if it’s justified. As a matter of fact, 40% of people abandon a website that takes more than 3 seconds to load.

An additional challenge stems from mobile, which make up for more than 50% of web traffic today. The bandwidth of mobile is usually lower than wired home networks, which will make it harder for your pictures to arrive safe and sound on the screens of your visitors. There is a collective issue you need to take into consideration: the problems that come with high-resolution images while maintaining the performance of your website.

How low can you go?

Two major techniques are used today to optimize websites’ images. The first one is called compression. The principle is simple (although mathematically extremely complex): your software’s algorithms will spot the redundant information on your images, and cut them down from the files. This is how a lot of compression formats work – the most famous of them being JPEG. As a consequence of this pixel diet, the size of your pictures will be dramatically reduced. Your site will load much faster, especially if you adopt this compression for every single image and if you apply a strong coefficient of compression (“JPEG Quality”).

But the con – and it’s a significant one – is that with compression comes the loss of valuable data. This loss is usually noticeable in small details, the apparition of artifacts or a less sophisticated rendering that the average Internet user can tolerate just fine. The average Internet user, but not you. As a photographer, you have an extremely low tolerance to whatever can alter, even slightly, the quality of your creations. After all, why spend so much time and brain cells on getting the perfect photo, if the first compression algorithm ruins it in a microsecond? This is why this method can be used safely for a lot of other websites (hotels, blogs, online stores, etc.), but won’t be recommended for your online portfolio.

Image optimization through JPEG compression

Does size really matter?

The majority of cameras today enable you to take pictures with a very high resolution. As seen in the tab below, even a low-end camera can produce photos of 4290*2800px with no effort. This is a tremendous asset for your art but also poses a problem for your web design, since images with greater resolution mean bigger files to upload. This is where resizing (the second common optimization method) steps in. Basically, it means reducing the size of your photos, almost without altering the quality. Your visitors will see the exact same thing on their screen – except that they may have to use a microscope to see it.

This technique is smart, but not fully convincing. Indeed, who can tell what is the optimal resolution for the Internet? Each browser on each desktop or mobile displays the same images in a different size. Moreover, some images are naturally meant to be displayed in a bigger format, simply because of the subject (think of a breathtaking landscape), the technique (macro-photography) or the artistic composition. Last but not least, a resolution appropriate for your photography website won’t necessarily meet Facebook or Instagram’s criteria – and vice versa.

To sum things up, resizing your images can be a good option if you need them for a very specific purpose, and you’re sure you won’t have to display them on big screens. Other than that, this technique won’t solve your number 1 existential problem: how to combine quality with performance.

Common camera image resolutions in pixels and mega pixels

What is the best practice?

The same idea behind any good relationship or your diet can be mirrored on your website: it’s all about finding the right balance. On one hand, you’re an artist who aims to show the best of yourself in every single photo. On the other hand, you need your pictures to be optimized in order to display on your online portfolio without overloading it. As we saw, the most popular options (compression and reduction) fail to respect this balance and will significantly harm the visual rendering for the sake of performance.

Wix is thus using advanced algorithms to achieve the best equilibrium between the image quality and the display performance. Basically, the only thing you have to do is to take stunning photos, upload them on your website through the Wix Pro Gallery, and then let the computer do all the math for your. There is absolutely no need to compress or resize your image. Simply upload your photos. When displaying the picture on your visitors’ browser, the Wix Pro Gallery will automatically determine the best resolution and apply it. The resized file will then be served from the closest server to the browser using a CDN (Content Delivery Network) with worldwide coverage, ensuring the highest possible performance and speed.

Here is the complete procedure to optimize images for your website:

1. Perfect your image on Photoshop, Lightroom or any graphic editor of your choice.

2. Export the image as a JPEG file with:

  • A quality of 11 or more on Photoshop scale (or equivalent).
  • A resolution of at least 3,000px on the shortest side of your picture (the width for a portrait, the height for a landscape).
  • A maximum size of 15MB

3. Let Wix work its magic for you to get an optimized photo that truly respects your art and meets the requirements.

Wix Pro Gallery, the best solution to optimize images of your website

For more advanced users

On the Wix Pro Gallery control panel, you can intuitively override the settings with specific values for each image. Such unique control, associates to the advanced algorithms of this genius App, will provide the best quality and performance for both mobile and desktop:

  • The Quality. Apart from when you are dealing with exceptionally rich pictures, putting this setting above 90 is considered bad practice for your website, as it will increase the file size with only a marginal effect on the rendering of the picture.
  • The Sharpening enables you to sharpen your photo by analyzing and maximizing the crispness of its edges. You have total control over the amount of sharpening applied to the image, the radius (number of pixels from the edge that the sharpening effects), and the threshold (which pixels to be considered as edge pixels – the lower it is, the more intense the sharpening effect).

Moral of the story? Remember that life’s a balancing act and your photography website is no exception.

Did you like this article? Subscribe now to the Wix Photography Blog for your weekly dose of free tips. You won’t regret it!

Ready to show your creations to the world? Create your unique photography website with Wix!

Jonathan Sitbon
By Jonathan Sitbon
Editor-In-Chief of the Wix Blogs

Get The Wix Blog
Straight to Your Email

Subscribe to the WixBlog And never miss an update!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address.

Join Us! \ 

Get the latest and freshest content on creating
& marketing your Wix website.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address.