The best size for blog images? Is the smallest you can get it.
If you typically upload huge photos to your website without giving it a second thought (compression and optimization be damned!) this post is for YOU, my dear entrepreneurial chipmunk.
Did you know that a primary cause of slow loading times is heavy images? They cause major damage.
This a bummer because slow loading time = shit news for SEO, since Google penalizes slow websites by giving them worse rankings.
Additionally, this is horrible for your conversions, because most people click away when a website takes longer than 3 seconds to load (ain’t nobody got time to wait around these days).
The bottom line is that not compressing + optimizing images? Is making Google mad and also leading a ton of your visitors to click away out of frustration before your pages even finish loading.
Those are visitors gone forever before they get a chance to sign up or buy.
And that’s bad news bears for your business. So let’s fix it!
What’s the best size for blog images?
We’re gonna talk (image) shop and that means:
- What size your images should be, yes, and also…
- Dimensions vs file size: which is more important?
- Why you should crop and resize (yeppers, every time!)
- How to compress images (and why this very much matters and you should be doing it every time)
- What file formats you should use for which images on your website
- How your file sizes influence your SEO
- CDNs and how they enhance your visitors’ user experience and SEO
Aight, let’s dive in.
Stop teasing me already: what’s the best size for blog images?
Okay, okay, keep your panties on, sister! Let’s talk dimensions (in pixels).
This is gonna depend on how wide your main content area is for your blog posts. If you’re not sure, here’s how you find out: go to one of your blog posts, highlight some text, and right-click (or the equivalent on Mac) and select “inspect element.” You’ll see something like this:
When I hovered over “<header>” at the bottom, it highlighted the header area of my post and told me the width (notice where it says 691px in the black bubble). That’s how wide my main content area is, so I want my blog post images to be 691px wide.
If you can get your images to be as wide as your paragraphs, your posts will look more streamlined than if your images were narrower than your text (height is less important).
Now, the best aspect ratio for Pinterest images is between 2:3 and 1:3.5, with a minimum width of 600px, so mind that if you’re a Pinterest enthusiast. Note: here’s a post on how to “hide” Pinterest-optimized images on your blog and have them only show up when your visitor clicks the “Pin it” button, so the image doesn’t screw with your loading speed.
Why you should crop and resize every time
Now, you’ll wanna crop and resize your blog post images to their final size before uploading them to your website.
Using code or the WordPress editor to resize them after you upload them will only change their size on the screen, but the big-ass, heavy image will still be in your back end (that’s what she said! ??), weighing your site down when anyone visits it.
The easy solution? Crop + resize prior to upload ;)
Dimensions vs. file size (and which is more important?)
What’s important here isn’t the dimensions of your images — it’s the file size. And usually, yes, larger dimensions means larger file sizes, which is why I recommend cropping and resizing prior to upload.
I try to get my file sizes as low as possible. They usually end up at around 100kb. How do I do this? Keep reading, superhero!
How to compress your images (and why you absolutely should)
Whether your image has big or small dimensions, the smart website owner thang to do is to compress your image to lower their file size.
Compressing can halve the size of some images! You’ll often see a remarkably dope difference.
I recommend first resizing and cropping, then compressing, and only then uploading each image to your website.
To compress your images, I recommend using an app like Compressor.io (for JPGs, PNGs, GIFs, SVGs), JPEG Mini (for JPGs), or Tiny PNG or pngquant (for PNGs) for the job (they’re all either free or have free resources).
Already have a ton of ginormous images bogging down your website (and don’t want the hassle of spending 4,987 Seinfeld reruns’ worth of hours cropping / resizing / compressing and re-uploading the optimized versions of existing images)? I don’t blame ya, sister.
You can install a plugin like EWWW Image Optimizer or WP Smush to compress all the images you’ve already uploaded. This won’t reduce their dimensions, but it will affect their file size, which is more important.
If you use Photoshop, you’ll definitely want to click on “save the file for web,” but know that the aforementioned apps do a tremendously better job at optimizing your images for a lighter website, so you’ll still wanna pick an app and use it every time.
And if you’re downloading photos from your digital camera to your computer? Remember to make them 72dpi for web (as opposed to 300dpi or more for print). This will also help reduce your image file sizes.
The idea is to get as close to 0kb in size as possible without losing image quality — you’ll probably usually end up over 100kb, maybe even at 300kb, and that’s okay if needed. Think of it this way: 3 blog posts with images at around 300kb means that every three weeks, your website backups will increase by at least 1MB. That adds up over time, especially if you have been or plan to be in business for years. The smaller you can keep your website, the fewer issues you’ll run into with things like backups and loading time.
What if my image looks like crap after I compress it?
Straight-up: sometimes (especially if there’s text in your image) you might see pixelated/fuzzy/jagged edges after compressing. It’s a judgment call — compress and, if that happens, consider whether it’s worth sacrificing quality for a better file size.
What’s the best file format, anyway?
Ah, file formats. What’s the difference between a JPG and a PNG, anyway? Don’t worry, the subject spurs as much as excitement in me as algebraic data types do (NONE) so I’ll only tell you what you need to know!
Depending on how you wanna use an image on your website, you’ll wanna save it as a PNG or JPG.
I recommend PNG for logos and other vector graphics, plus header images and other prominent graphics (like “badges” promoting your services) because they’ll show up crisper, and JPG for blog post images, social media icons, and other less important images.
Keep in mind that PNGs are heavier than JPGs when we’re talking photographs (the opposite can be true with illustrations, y’all). And if you need transparency in your images, you’ll have to take the PNG route. (Hint: Not sure which option is best for your specific image? Try saving it in both file formats and compare their size and quality.)
If your image is animated? You’ll need a GIF. Pssst… two good tips for compressing these: use fewer colors and/or fewer frames to shrink ’em.
Final tip: consider using a CDN
If you’re a photographer, food blogger, etc. and have an image-heavy website, I suggest signing up for a content delivery network (CDN).
CDNs superboost your loading time because they minimize the distance between your visitors and your website server, by distributing your website content across servers worldwide, so each visitor loads your content from the server closest to them (yup, geography plays a role when it comes to loading speed!).
This improves user experience (because your shizz loads faster) and can also dramatically and positively impact SEO.
A free one you can try out to get you started is Cloudflare, although paid ones are known to do a better job at speeding things up for your peeps across the globe.