I love full screen images. They can be beautiful in web design. I even use them on my about page and some of my product pages.
But a poorly implemented full screen image can be your downfall.
Sometimes I finish reading an entire page before the image has even loaded!
This is the worst thing IN THE WORLD.
- I load someone’s website.
- I can see the spot where the full screen image goes, but it hasn’t loaded yet.
- While I wait, I read the text on the page.
- I finished all the text on the page and the image was still only half loaded.
Congratulations. I just left your site without even seeing your beautiful, big image.
The problem here is how you’re saving your image
I recently visited a website where I experienced the exact thing I described above. Out of curiosity, I decided to download that full screen image and do a few tests.
- The image on their site was saved as PNG and was 2.38 MB (that’s MASSIVE).
- I opened the image in Photoshop and re-saved it (100% quality) as JPG. That immediately brought it down to 1.28 MB.
- I put the image into JPEGmini and that immediately brought it down to 692 KB. MUCH more reasonable.
This is a perfect real world example of how properly saving and compressing your images makes a HUGE difference.
File sizes aren’t just about impressing SEO, they’re about user experience
- If I get to your site and it takes 10 seconds to load, I’m not impressed.
- If your full screen image isn’t done loading by the time I’m done reading all your copy, I’m not impressed.
- If your homepage doesn’t impress me, I’m not moving forward.
Make your full screen image great
Here’s a check list you can work through when implementing a full screen image design:
- Save the image as JPG—this will make the file size smaller.
- Compress the image with JPEGmini or an equivalent compressor tool
- Ideally you want the image to be less than 300-500 KB in file size.
- Make sure it ACTUALLY covers the whole screen. A lot of people don’t factor in large monitors. It sucks when something that’s supposed to be full screen isn’t actually full screen on my 27″ monitor.
- Test, test, test! If you can read enough of the page that you have to SCROLL DOWN before the full screen image has loaded, it’s too big.
It really bother me when people don’t even bother to check what type of image they are saving their image as. I was talking to some people in my IT class, and they didn’t even know the difference after the teacher had been talking about it for three months!
Oh geeze. I have little sympathy for those people who just don’t pay any attention. >_<
For me, it doesn’t really matter what size the image is. Our internet is super slow, so I always scroll down to the text before waiting for images to load. But when there is a HUGE one, everything just freezes and I sometimes have to close my browser. Then I never return to the page. The same applies to scrolling images and gifs. Our internet hates them with a fiery passion.
Oh geeze. I shudder to think what your experience would have been like on that example in my post. I actually have RIDICULOUSLY fast internet. Actually I have two internet connections, which we load balance to make our internet even faster (we’re total nerds, I know). So if it was a bad experience for me, it would have probably blown your computer right up!
That sounds like a wonderful way to decrease image sizes; I’ve been into
Photoshop for about three months now and I never knew you could do that and still retain the quality of the image! Thanks for the tip, Ashley 🙂 lovely new design, although I preferred the old one more.
Definitely check out JPEGmini! 🙂 I paid the $20 for the full version, but I think they offer a free trial where you can compress up to 5 images per day or something.
These are some great points Ashley. My internet connection can be incredibly slow sometimes, so it’s not uncommon for me to read a blog post before the images have loaded. I’m going to have a look at my image sizes and what I can do to reduce the file size.
Image compression is like magic! 😀
I love this tutorial Ashley. I think that the full screen images are gorgeous but we know that having an effective website is about more than just being cute, it must be functional and usable by your visitors.
Yep they are definitely gorgeous and can be implemented very well. It’s just important to do it right so that it doesn’t make your site lag behind. 🙂
Thanks for stopping by Latrisha!