Recently I was hanging out in one of my favorite Facebook groups (The Badass Solopreneur Society) and there was someone in there having trouble finding information on what image sizes they needed for their site.
Here’s the question in full (see summary below if you’re too lazy to read it):
Summary: The main question was 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.
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 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 what dimensions you choose to use for your images.
What you should really be focusing on when adding images to your site is file size – I.e. MB/KB.
Each time someone visits your page they technically have to download whatever is on the page, including your images.
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.
The simple answer? Just use the highest resolution images you can, while finding a happy medium with actual image file size.
The longer answer?
Here’s how I do it;
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.
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;
A file extension is the (dot)whatever at the end of your image’s file name. I.e. if you 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.
If you use WordPress, you can install a plugin such as EWWW Image Optimizer (the best free optimizer I’ve found) 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.
A caching plugin such as WP Fastest Cache 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.
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).
I also use CloudFlare to speed up my site in many other ways, so I’d definitely recommend that you check them out.
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.
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, 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.
If you want a full rundown on how I improve my page speed other than optimzing images – here’s a full guide.
Is there anything I missed? What do you do to optimize your images? Let me know in the comments!
Send this to friend