How Big Should Your Images Be? Probably Smaller Than You Think
When it comes to the images on your website, size matters.
I’m not just talking about the physical size of your images (more on that later), but the actual file size.
Did you know that having images with too large of file sizes can slow down your website? When visitors come to your site, it will load slowly, like in the old days when we were using dial-up. (notice how I didn't say “good old days”)
And, if your website is slow, people are not likely to stick around. People these days have the patience of a flea and are accustomed to instant gratification. If they have to wait to see what your site is about, they’ll just leave.
Once the almighty Google catches wind that people are visiting your site and immediately leaving, your SEO will suffer.
For SEO purposes, what Google really likes to see is that people stick around for a while and visit more than one page. WIth a slowly loading website, you will accomplish the opposite.
What a drag, right? Lucky for you, there’s a solution. Decreasing the file size of your images can greatly improve the speed of your website.
First thing’s first - if your images are over 500KB, they’re too big.
If your MO is to download stock images, and upload them straight to your website, chances are, you’re way over 500KB per image. Or, if you take pictures yourself and upload them directly to your site, odds are, you’re in the same boat.
So, how do you make your website images smaller?
Start by making your images the physical size you need them to be.
For example, a banner image on a Squarespace website is generally 2000px wide, and 1000-1500px tall. A standard Pinterest graphic size is 735px wide by 1102px tall. If you’re not sure what size you need your image to be, google “ideal ____ image size”, and you’ll find tons of sources.
When you’re adding images to your website, you’ll be able to adjust the size on the screen itself, but you want it as close to the size you want from the beginning. When you start stretching images, you risk them becoming blurry, and making a large image smaller is just a waste of space, literally.
To make images just the right size, I always suggest using my BFF Canva.
Seriously, if I could just play around on Canva all day for one reason or another, I’d be happy.
Canva lets you manipulate images with a free account, and it’s super easy to use. They provide tons of templates, use grids to help you center your content, and have graphics and images galore. If you haven’t already, create an account on Canva, because trust me, you’ll be using it a lot from now on.
Sign in and select a template if there is one pre-formatted in the size you need. Or, if you need specific dimensions, enter them by clicking Custom Dimensions on the top right of the page, and clicking Create New Design. In this example, I’ll be creating a Squarespace banner, so I’m creating a design that is 2000 x 1000px.
Next, you’ll upload the image you’d like to use and eventually downsize. On the left-hand side of the page, you’ll see an Upload icon. Click the icon, and you’ll be taken to the next screen where you can see images you’ve uploaded previously. There, you’ll also have the option to Upload an Image. Click the button, and you’ll be prompted to select the file from your computer.
Choose the file, and it’ll upload to Canva, adding to the images on the Upload screen.
Once your image has uploaded, click and drag it to your new page.
Resize the image by clicking and dragging the corners and sides.
Once your image is the desired size, you’ll need to download it to your computer by clicking download in the top right corner of the screen. You can choose between a JPG and PNG file. Most of the time, the image quality is the same, but a JPG is generally a smaller file. In some instances, color are crisper with a PNG file.
The downloaded image will still be too large, but at this point, the right physical size. My image in this example is still 1.2MB.
The next step is to actually reduce the file size by uploading the image to another website.
I use tinyjpg.com, which will shrink both JPGs and PNGs for free. Another option is jpegmini.com, which will do the same thing. JPEGmini recently revamped their site, however, and it is no longer available for free on an unlimited basis. They do offer a free trial, so you can try both and see for yourself it it’s worth paying for.
Using TinyJPG couldn’t be any simpler. Just drag and drop your file from your computer to the website. The site will compress the file, and you will download the smaller version. In this example, I reduced the file from 1.2MB to 140.3KB!
Make sure to rename your image to a keyword-rich title, which also helps SEO. Now, add THAT file to your website instead, and you’ve really lightened the load.
Do this with every image on your website, from your about page, to your product images, to your banners and galleries. Large image files can be the greatest burden on your load speed, so doing this has the possibility to have a big impact on your website.