The Trend of Large Images
I’m sure you’ve seen on most websites that many have adopted the fashion of implementing large images in the header area of their website. I know it looks beautiful, but it raises some concern. Should we sacrifice speed for beauty? We’ll take a look at large images in web design and if they are necessary.
This thought came to my mind when one of my regular clients had another designer build a site for their workshop sign up site. (Due to confidentiality, I can’t disclose who they are.) The site is beautiful as a whole, and I really liked what the other designer had done. The problem was that it took forever to load. I discovered it when i was supposed to link to it from the site I was building for him. I wanted to check the link to make sure it worked. My browser spun and spun and spun. Scratching my head, I decided to time how long it took too load in total. Believe it or not, it took a whopping minute and a half to load.
That’s right, 90 whole seconds to load. it finally loaded, and was beautiful. It was well designed, well structured, and really looked sharp. After some investigation it turns out the culprit was the large images on the site. They were not only large, but they weren’t optimized. Wow! High resolution, 300 DPI images for a website whose sole purpose is conversions.
Besides the images not being optimized, I thought we might take a look at what else we can do to make those images load faster. Using large images in web design projects doesn’t mean you have to sacrifice all levels of performance, or seemingly throw it out the window.
Performance Enhancement for Images
Optimization
The 1st thing you should do is bring your images in Fireworks or Photoshop. Save them for the web and optimize them as much as you can. You can greatly reduce the file size of your images from an entire MB or more to around 100KB or even less. This alone is a tremendous boost in speed and a tremendous reduction in load time.
Lazy Loading
If your site uses a lot of large images, it may be a good idea to implement the lazy loading script. Instead of your site loading all of the images at one time for the entire page, you end up loading the images that are currently visible. The rest of the images load in the background and as you scroll down the page.
Use a good CDN
A CDN, or content delivery network, does a few important things. Some (or most if they are worth anything) will cache images that don’t change often, serving them up almost instantaneously. It also reduces the load on the server if you’re using WordPress. The smaller the load your WordPress site has to bear, the quicker it will run. Also CDNs have servers spread across the United States, and even the world. They will serve static content from the closest servers, depending on your visitor’s location. This makes your site load faster, too. It’s quicker for data to travel from Dallas to Florida, than for it to travel from California to Florida. Sometimes load times can be reduced by half. This can be demonstrated by testing your site on Pingdom. They run tests from New York, Dallas, and Amsterdam. You’ll see your longest load times in Amsterdam, because it’s furthest away.
The Current Trend
So the current trend is to have large, beautiful images on your website. To answer the main question we started with, yes I do think they are necessary. the web has become all about creating an experience. Any photographer will tell you that an image tells a story. Great visuals are the easiest way to connect with your audience. With that being said, I don’t think you have to go about it like a Neanderthal, with lumbering images and heavy load times.
People just won’t wait for that. My client’s workshop registration site is going to suffer in terms of sales or conversions if the problem isn’t fixed. He’s been notified, and he plans to address it with the developer he hired. (That’s how you take care of your clients and watch their back, by the way.)
Another Issue
Another thing that you have to weight out in terms of using large images in web design projects is search engine rankings. Are you willing to sacrifice possible ranking on Google for that big, beautiful image? I doubt it, unless you’re running a personal blog and not interested in rankings or making money. If you’re running a business, I bet you’re highly interested in that.
Substitutes
What about SVGs? Could you substitute that huge, bulky photograph for a tiny, light-weight SVG? Could you use an illustrated SVG background image instead? It’ll still be beautiful, and it will load in a fraction of the time.
What Do You think?
Do you know of other ways to optimize images, or your website for peak performance? If so, feel free to comment below with your tips. If your site loads slowly, or you need a professional web design services, I’ll be glad to help. Simply get in touch.
