I see a lot of bloggers making huge mistakes when it comes to the way they display images on their blog. Not only are many of these mistakes ugly and annoying to your readers, making them may slow down your website somethin’ fierce.
1. Limit Dem Images
Yeah, we get it, you’re an ahhhhmazing photographer and all of that, but please: limit the images you put on one page! Images can take years to load, especially if they aren’t optimized properly, which might frustrate some visitors and cause them to “X” out of your site before they’ve even seen the rest of your content. An easy remedy? For Blogger and WordPress blogs, you can change how many posts your blog page shows (I recommend no more than six). Want to go even further? Enable post excerpts, just like we do here on Dinosaur Stew.
Savings: about 200-400 kilobytes (0.2 to 0.4 megabytes) per image.
2. Scrap the Slider
Yeah, some of our themes feature sliders, and I do believe, in some cases, they can enhance design. But I’ve met many a client who will not settle for just one slider in a smart location, they want a slider on the homepage to showcase their photos, a slider on the blog page to display recent posts, a slider on the about page to show off a bajillion pics of themselves making cute faces, and yet another slider on a portfolio page to feature their work. ENOUGH.
The main problem is that sliders add bloat to a website: most slider scripts load all of the images the slider will display on the initial page load. So if you have eight images in your slider, your visitor’s browser will load all eight images on that page load, oftentimes before the rest of your content has even appeared on their screen. If that wasn’t enough, sliders make mobile responsive design tricky. So scrap it!
Savings: this is greatly dependent on type of slider, size of slider, etc. At the very least, you’ll save 1000 kilobytes (1 megabyte).
3. Resize Full Size Images
Think of it this way: the smaller your image is, the faster it loads. If you’re uploading to the web, you should always, always resize images. Images come out of your camera at a very large resolution that is intended for print. The web doesn’t need images that size, just like we don’t need to be able to load images so large we can see Grandpa Jim’s earwax or what’s up Little Bobby’s nose. Resize full size images and you’ll reduce load times by an insane amount.
Savings: a whopping 6000 kilobytes (6 megabytes) per image.
4. Your Images Don’t Need to Take up the Whole Screen
This is mainly a design thing that I can’t stand. I’ve seen several websites designed something like this: this is atrocious.
Web users are seemingly obsessed with content that spans the full screen, and I totally understand the idea of wanting to use all the space you’ve got. This, however, ranks about a zero on the user-friendliness scale. What’s going on? The images are so large you can’t even see the whole image at one time. And, assuming you read tip #3, you’ll know that resizing images will reduce load time, so let’s aim for a happy medium when it comes to image size (800 pixels wide, tops!). This version flows a lot better.
Savings: an average of about 100 kilobytes (0.1 megabyte) per image and you gain a friendlier design
5. Use the Correct Image Format
I’ve got a bad habit of saving everything as a .PNG (pronounced ping!). It allows for beautiful, sharp images with transparent backgrounds and preserves any enhancements you might have made to your photo. However, besides the transparent thing, .JPGs do pretty much exactly the same thing and at a fraction of the file size of a .PNG. Rule of thumb: if it’s a photograph, save it as a .JPG. If it’s an important element of your website design, like a logo, and/or requires a transparent background, go with a .PNG.
Savings: an average of 500 kilobytes (0.5 megabytes) per image.
Bonus Tip: Compress!
Compressing your images can reduce their size without losing too much quality. If your website or blog displays a lot of photographs, you’ll especially want to pay attention. Adobe Photoshop compresses images when you save them for the web, however, if you don’t have Photoshop, you’ll need to look into another way to do this. If you have WordPress, look into installing the WP Smush.It plugin. If you aren’t using WordPress, you can smush your images manually here.
Savings: this varies greatly, but an average of 10-25 kilobytes (0.01 to 0.025 megabytes) per image. Not much, but it adds up!