Recently I was hanging out in one of my favorite Facebook groups for web design, and there was someone in there having trouble finding information on what image sizes they needed for their site.
Here’s the question:
TLDR: “If there’s a 1600px wide slot, do I have to use a 1600px wide image to fill it, or are there other options and how/why would they be used? Also, can the same image be used in an 800px wide slot and any other various dimensions?”
But, what the poster didn’t realize, was that what matters much much more is the actual file size of the images used.
Most people know that when it comes to images, a higher resolution equates to a better looking image, and therefore a better looking website.
However, the physical file size is not determined by the resolution of the image, and it has the biggest effect on how long your page takes to load.
Below you’ll find basically the answer I gave to the poster, but I’ve fleshed it out a little bit to apply to a wider group of people.
Does Image Size Matter?
For the purpose of my response, the original poster was using WordPress, but a lot of these tips will pertain to any platform you use. In the end, no matter where you upload an image, it will retain the same file size.
In this section, when I refer to “Image Size” I’m strictly talking about the image’s dimensions – i.e. how tall and wide it is.
When you upload a picture, WordPress (and most other platforms) will save it in various sizes anyway and depending on your setup you can normally pick which size to use in specific places.
Therefore, it mostly doesn’t matter what dimensions your images are, they will still be displayed wherever you put them.
You can use a 5000px wide photo in a 1000px wide slot without any problems.
You could also put an image that’s 500px wide in that same slot – but it may get stretched and become pixelated. (Depending on your CSS, which we won’t get into)
Essentially, as long as it looks good to you, it doesn’t matter that much what dimensions you choose to use for your images.
Why Does Image File Size Matter?
What you should really be focusing on when adding images to your site is file size – I.e. MB/KB.
Each time a new person visits your page they technically have to download whatever is on the page, including your images.
And if you don’t use effective caching, EVERY time someone visits your page they’re downloading your images.
This is bad for you. Your pages will take longer to load and if you have low level hosting, your users are going to be using far more of your server’s resources than what’s needed – potentially affecting other user’s sessions.
The bigger your image file sizes are, the longer they’ll take to download and therefore the longer the entire page takes to load – which is a big deal.
So how do you choose what size images to put on your site?
The simple answer? Just use the highest resolution images you can (normally 1920×1080 pixels is a good target for backgrounds), while finding a happy medium with actual image file size.
The longer answer?
Here’s how you can do it;
- Find an image I want to use and download it in a reasonable resolution (normally 2000px X 1000px minimum).
- Use a free tool like PicResize (or a premium tool of your choice) to scale your image down to either an appropriate file size, or ideal resolution for it’s position on your site.
- Upload the image and see how it looks.
- If the image looks bad, try going for a higher resolution/file size.
- If it looks good, but the file size could still be smaller, keep resizing and experimenting.
This seems like a lot of work. But I promise you that after a few times doing it, and the rewards you reap, you’ll be doing this every time.
Remember – the smaller the image file size the better, but don’t sacrifice quality of the image to achieve it.
But Wait, There’s More!
Carefully resizing your images is more than half the battle.
But, if you’re an optimization nerd like me, and you want everything to run smoother than butter – there’s always more that can be done.
Here are some extra tips to help you get the most out of the images on your page;
Pay Attention To The File Extension
A file extension is the “(dot)whatever” at the end of your image’s file name. I.e. if your image’s file name is yoursweetimage.png – the “.png” is the file extension.
You probably already know that you can save your images in 2 main file types – .JPG (or JPEG) or .PNG with the added possibility of a transparent background.
But, did you know that saving in either format can cause a file size difference for your images?
Typically, saving your images in a JPEG format will produce a lower file size for the image – but the drawback is you can’t have a transparent background.
So, figure out what the use of your image is, and choose your file extensions accordingly.
Compress Your Images
If you use WordPress, you can install a plugin such as Smush to compress your images and make the file sizes smaller.
Compressing images inside of WordPress is an efficient solution, but just be careful. With some of these plugins there’s no going back once you’ve optimized them, and if you accidentally reformat your entire media library… Well let’s just say, I hope you keep regular backups.
Other than that, these plugins are very easy to use, and a suitable solution if you don’t screw around with them too much.
If you’re having trouble with your images getting cropped incorrectly by WordPress, you can use a plugin called Force Regenerate Thumbnails.
The plugin makes it so that your images fit properly into their containers by resizing them based on your theme/media settings.
Cache Your Files
A caching plugin such as W3 Total Cache, when configured correctly, can also help speed up page load times in general.
The function of caching is to tell your visitor’s browser to keep the image it just downloaded while loading your page as a saved copy on your PC, so that you don’t have to download it again.
Manually adding cache rules is one solution, but a plugin like the aforementioned will work just fine with any WordPress site.
Use A CDN
CDN stands for “Content Delivery Network”.
What a CDN does is it stores files from your server on multiple other servers across the globe.
Your website then instructs your visitor’s browser to download the files from whichever server is closest/most currently underused instead of your own server.
This may seem like a scary prospect, but CDNs are actually very safe, and can make a world of difference when it comes to your page load speed.
If you use a very basic hosting package, a CDN can also reduce the load on your server by using less of your own bandwidth (which can also make it cheaper in some cases).
My favorite CDN is provided by Stackpath, and we normally run that in tandem with Cloudflare.
The Jetpack plugin for WordPress also provides a viable photo-only CDN named “Photon”. Simply install Jetpack, and enable Photon in the settings to get started. It’s not the best, but it may help if you’re on a tight budget.
Further Speed Optimization
Even with all these tips, there’s so much more that can be done.
Try using a page grader, such as the one provided by Pingdom, or GTmetrix to grade your page speed and find out if anything is slowing you down.
From there, you can take the relevant steps needed to fix your site-specific issues.
Is there anything I missed? What do you do to optimize your images? Let me know in the comments!
