There’s ONE thing that photographers and other creatives need to stop doing on their websites.
It’s bogging down your site, it’s breaking your sliders and your galleries… and I know you had the best intentions.
But please — I know you have Photoshop.
(If you don’t, use PicMonkey!)
Please stop uploading your full-res images to your website!
The Max Width You Need for your Website
Most WordPress websites only show an area that’s about 1170 pixels wide. For example, this website follows that page size, and then the rest of the page is just borders and background.
Same with Roots Floral Design (with the exception of her slider and Instagram feed – which still only use images 1170px wide or less).
On a site where the website takes up the full page, they are probably using an image that’s 2000px, and there’s a limit to how far the image expands.
Using an image that’s bigger than 2000px is overkill, and it doesn’t make your site look better. Actually, it makes it SLOWER!
Use the Right-Sized Image for the Right Application
I get it, I really do! As a photographer myself, I’m all about non-destructive edits and having the highest resolution possible, all the time. All the megapixels!
Here’s the deal, though.
Don’t make the mama on her iPhone using public Wifi try to download a billboard, when all she needs is a 4×6 image of your work.
It’ll still look good, I promise. Here’s how.
Here’s The 10-Second Fix in Photoshop
Just take that image you’ve exported from Lightroom — or the photo you got from the photographer, if you’re a wedding vendor or model.
Look at what you’re going to use it for. Is it for your blog post, your portfolio, or your homepage slider?
I’ve got this photo of Kenya, an awesome dancer I got to photograph a couple months ago, and I want to put it on my portfolio site. My portfolio is another 1170px wide site.
But I’m not going to use this high-res image! I need to get it down to 200KB or less.
Tip: there are 1,000KB in 1 MB. So that file is 7,090KB!
- Bring the image into Photoshop, press CTRL-ALT-I, and resize it down to 1170px width (if you’re nervous, you can do 1600px for safety).
- Then, press CTRL-ALT-SHIFT-S (alternative: just press all the keys your left hand can reach!) This brings up the Save for Web interface.
Usually selecting JPEG High (60%) in the top right, leaves an image crisp enough to show online. This also takes advantage of Photoshop’s best compression algorithms.
Tip: You can do this with PicMonkey, too.
In the top right, you can see that I chose to go to Very High (80%), because in this case it was a little fuzzy at 60%. At the bottom, you can see that this is down to 135KB, so I’m very safe and I hit my goal of being under 200KB.
The photo on the left above is the original resolution file, and the photo on the right is the JPG resolution I’ve got it down to. So there isn’t much data loss even though I’ve shrunk the weight of the file by 80%! What do you think?
For me, I’ll usually name an image like this Kenya-1170×732.jpg so I know at a glance that it’s the Web-size version, not the high-res version for print.
What about smaller images – Should I resize them, too?
Yes – if I wanted to use Kenya’s photo in a right-aligned image, I would size it down to 600px wide, like I did here.
This way, when I insert the photo to my page in WordPress, I can select the “Full” image dropdown. I don’t have to pick Large or Medium.
I don’t want to use Large – I want Photoshop’s awesome compression instead of WordPress’s best guess.
Yes – you can change the default size of “Thumbnail,” “Medium,” and “Large” on WordPress! Maybe that’s a blog post for another day, what do you think?
Let me know your WordPress questions and I’ll do my best to answer them in an upcoming post!