Optimizing Images for Web with Adobe Bridge
In response to a recent tutorial request, here is a quick tutorial on Optimizing Images for Web with Adobe Bridge. While there are numerous tools out there to help you make your images web ready, Bridge is my preferred app because of the power you have to easily organize several images and edit in bulk.
If you’re new to web design or if you don’t know exactly what image optimization is or why it’s important, this is also for you! Check out the post for more links and resources.
Enjoy faster loading websites my friends 🙂
- Here’s the tutorial I offer my clients –Â Optimizing Images – Josh Hall
- Free image optimizing tool I recommend –Â https://imageresize.org
- A great on-site (and free) optimizing tool I recommend is –Â WPSmush
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Great tutorial thanks Josh. One question – I read an article about optimal sizes for Divi e.g. 1080 for one column etc. Do you change your image sizes for Divi or do you leave them at the 1440×1000 mentioned in the tutorial?. Thanks
Great question, Barbara – Yeah there is an article by ET about the ideal image sizes. I have referenced that before but usually I do sliders, big backgrounds and featured iamges at either 1920px or 1440px then smaller image sections at 500px or 800px. Sometimes with staff photos I’ll do like 250px or 350px depending on the design. Great question! I really don’t think there’s a right or wrong.
Thanks so much for this! I have Bridge but NEVER use it! Well, I use it occasionally for finding images that I want to use from my library, but never realized it could so easily reformat images for web use! Appreciate the quick video and I now have Bridge open so I can get some images optimized.
Thanks so much for the awesome feedback, Andrea! Since I originally learned it for photography, I just applied those same ideas for web design and it’s been such a helpful tool since. I feel like it’s a very underrated program for bulk image optimization and organization.
Yeah let me know how you get along with it 🙂
I am using it all.the.time. now! 🙂 Can’t thank you enough – really appreciate the post!
Awesome! So glad to hear. No problem.
Thanks again awesome divi man 🙂
ha – no problem, Kirb!
Thanks Josh, I didn’t realise how useful Bridge is for resizing images. Your post has already made my image resizing process more efficient!
That’s so great to hear, Susie! Love that feedback and super glad it’s helped you save some time with image resizing 🙂
Hi Josh,
It’s a really useful quick video, by the the Adobe Bridge free ?
Thanks you
Thanks, Usaid. It’s not – it’s available in the Adobe suite if you have that. I’m sure it can be purchased separately for cheap if you don’t want the full suite.
why not use a plugin for bulk optimize all of your images on upload??
Good question – I do use and recommend WP Smush and there are some other good ones, but I always, always try to avoid an extra plugin to avoid bloat if possible. And there’s always plugin compatibility issues that can arise. I’ve also found that while they do a pretty good job, nothing beats having images fully optimized BEFORE they even get uploaded to a site. Just my 2 cents on all that!
I have to disagree with you on that one. I don’t think optimizing images before upload is a very good idea for web.
If you are a photographer only working with one image which is being printed, then sure it’s a great method…. But for web, not so much.
When you upload an image to WordPress 4-20 different variations of that exact image are being created. Working with Divi we all have probably seen et-pb-post-main-image, et-pb-post-main-image-fullwidth, et-pb-portfolio-image, thumbnail, imagesize small, medium, large and so on.
All of these variations above will not be compressed when only optimizing before upload. In some cases, the file size of some of these variations is even going to be bigger than the original image.
If you are administrating image heavy sites and running backups are you going to notice this is a factor you don’t want to ignore….
Using a plugin all of the image variations are going to be optimized. At least if you use a decent plugin like Smush, Shortpixel kraken.io or TinyPNG.
Don’t get me wrong, I’m all for using an optimizing plugins (any that you mentioned) and yeah you’re absolutely right about the different image sizes for post types but you certainly never want to upload an imagine that isn’t already web optimized. I’m referencing images that are straight from a camera or stock photos that are often 4MB, 5MB or even higher. Particularly if you have a gallery, hundreds of big MB images are bad news for uploading time-outs, page speed and perhaps most importantly, server speed.
Again I’m not saying not to use any of those plugins. Those are great as long as they’re not causing issues with other plugins. It’s the initial image upload that is also very, very important to optimize 🙂
From what I understand if you download an image that is 1000 px but you are using it on your site as 300 px that image has to be resized vs just decreasing the resolution. Although this method decreased filesize it seems it may have us going into all of the images again to deal the dimensions each image is supposed to fill.
You can certainly make images lower, just depends on what you’re using it for. I just like to start out with optimized images around this size.
https://imageresize.org does not seem to be working? Is this still your recommended go to? It might just be a temporary site problem or something but I cannot upload any files. I’ll try it again tonight when I get home.
I did not get this site working but I did find another one at https://bulkresizephotos.com/
Site still works fine for me. Yeah maybe it was just some minor downtime or something.
Hi Josh, I just wanted to update everyone on the Abode Bridge. I came across an article that confirms Bridge is completely FREE in 2020 regardless if you have a paid subscription or are using a FREE trial version of Creative Cloud. Adobe Bridge can also be used as a stand alone download and it has no expiration date. It’s FREE forever! 🙂
That’s splendid news! Thanks, Giselle 🙂
I needed this long ago! Thanks a lot Josh, now I will be able to take advantage of Bridge.
I don’t think Camera Raw comes included with Bridge any longer. I have a subscription to Illustrator, which includes Bridge, but in order to use Camera Raw, I had to purchase a subscription for Photoshop. If I’m missing something, please let me know as I’d love to save the money.
It might be different now, Sarah. It’s been a little while since I’ve done it. If I find that’s the case, I’ll let ya know!
Nice demo! I never use Bridge because I have always optimized my images in Photoshop. They have removed the “Optimize for Web” menu item now, but I use the keyboard shortcut out of habit. And you can do bulk optimizing but this is less cumbersome. The interface is very similar to Light Room. Thanks for sharing!