Do you use images on your website? Yes? Ok babe, you’re going to want to keep reading! I’m telling you RIGHT NOW, it is crucial for you to know how to export images for web…you know, so you don’t break your website.
I’ve managed to crash The A&J Muse website purely by not exporting images the correct way. I couldn’t even access my dashboard to fix the issue and was in support chat with Bluehost for over an hour. I was not impressed with myself.
Our site has also been SUPER SLOW in the past as well because of large images taking too long to load.
Could images be hurting your site? I’m going to give you some tips on what I’ve learned when it comes to uploading images to your website and what you can do to ensure you don’t crash your site!
**Firstly, if you’re wanting to know what images could potentially be slowing down your site, go to GTMetrix, type in your URL and it will analyse your site for you.
Exporting Your Images
If you use Canva, Adobe Photoshop or Lightroom, this is for you! One word babes…compression if you want to export images for web! It goes without saying, the larger the file size, the higher quality image you’ll get. But if you’re reader can’t navigate your site easily and quickly, they’re going to leave and won’t even see your image in the first place. In a nutshell, you’ll have to sacrifice a bit of quality here.
So, when exporting images from these programs, there are TWO things to take note of – the size and quality of the image.
#1 Exporting Through Lightroom
I’m going to walk you through step-by-step, how I export images for web through Lightroom to ensure they’re optimised for my website:
- After selecting Export, set your Image Format to JPEG when uploading to the web
Now, you’ll see there’s a quality slider. Marking that quality slider at 100 looks pretty tempting…the higher the better right? It actually doesn’t matter too much. There’s not much difference at all whether you set it to 80 or 100, other than exporting the image in a more optimal size for your website. I tend to export at the Medium JPEG quality mark.
- Set your colour space to sRGB
In a nutshell, the internet was built on sRGB colour space (as opposed to AdobeRGB), so make sure you have it set to sRGB.
- Under Image Sizing hit, that ‘resize to fit’ checkbox and set it to ‘Long Edge’
Setting it to Long Edge will limit the width or height of the photo to the pixel value you set just below it.
For my images, I’ll usually have this set to 1024 pixels but depending on what you’re using the image for, you could set this to a lesser value. For the resolution, I’ll put 72 (this setting doesn’t relate to your export but for printing purposes – so no need to worry about this one if you export images for web).
- Under the Output Sharpening section, set the ‘Sharpen For’ field to ‘Screen’ and then set the Amount to ‘Low’.
Export, and your images are ready to go!
#2 Exporting Through Adobe Photoshop
Photoshop will be a little different from Lightroom, but here are the steps I take to ensure I export images for web the right way.
- Under File select Save For Web (Legacy)
By using this option instead of ‘Save’ or ‘Save As’, you can optimise the dimensions of the image to ensure it will neatly fit onto your web page, you can change the colour space, as well as the file size.
- Select the ‘2up’ button at the top left-hand corner to display the original image, and the image you’re going to export
- The dimensions of the image will be in pixels and you’ll want to ensure that little link chain at the bottom right-hand corner under Image Size is ‘chained’. If you need to adjust the height, it will automatically scale the width for you by having it on this setting.
- At the top right-hand corner, ensure your image is set to JPEG
- You’ll want to then choose your quality. Now, this will depend on your personal preference and how quality you want the picture to be on the web (remember though, the higher you have the quality, the larger your file size). The idea is to find that happy medium. I usually have my images on Medium for blog posts. For banners I’ll put that a littler higher.
- Ensure the checkbox for Optimized is ticked
- Ensure the checkbox for Convert to sRGB is ticked as well
- Lastly, you can then Preview the image in the web by selecting the Preview button at the bottom left-hand corner of the screen.
Export the image and you’re ready to go!
#3 Exporting With Canva
For those who aren’t on the Canva train yet, get yo’self there! Even though I have Photoshop, I still use Canva sometimes for the ease of it. And better yet? When you export images for web with Canva, it is SUPER simple! Again though, it’s entirely up to you how quality you want your image to be.
You have two options: PNG or JPEG. PNG will be a larger file size and therefore, give you more quality in your image. Let me give you a little example.
I create a Pinterest graphic that I want to post to my blog. The PNG size will be 786 KB and the JPEG will be 362 KB. Not too much of a difference, but once you start having 100’s of blog posts to your site, then yea…size can start making a difference.
Personally, I download it in JPEG.
I know this may not seem like the most interesting blog post out there, but it’s something that can seriously affect your site if you neglect to pay attention. Whether you export images for web via Lightroom, Photoshop, or Canva, please PLEASE be mindful of your file size.
Because believe me, it is the hugest waste of time trying to fix a slow (or crashed) website because you didn’t export your images the right way.
Now, there is obviously more information out there and you can get even more technical with this topic, but I prefer the basics for now. I hope you’ve found this super useful! Let me know if you have any questions by dropping a comment below.
And if you’re not part of the Plush Society (where I send little reminders about your images like this to my community), make sure to get your butt on there by clicking right HERE!