How to optimize photos for web is something I wish I paid more attention to when I first started blogging or doing anything web related!. Large Images are the biggest factor that slows your website down! Huge 256 color png images are the wrong image format for quick loading times. Now we have image file types like .wepb that are even faster then jpg’s as well as image optimization plugins that will optimize your images on upload. We will go over all of this so you can figure out what is best for your workflow. No matter what blogging level you are at!
Adding presets and uploading your edited photos to your WordPress website may sound simple enough, but did you know you can optimize your images even more?
You may have seen images on blogs and websites that appear fuzzy and stretched out. Were you able to see them? Did they add more pop to the content?
If they did not, then you can see why optimizing images are so important. They add so much more to the user experience, delights your users, and helps increase conversions. This means making your images be the right scale, resolution, and format while keeping the size as low as possible. It sounds like a lot of work, but it isn’t at all!
The ideal image size for your blogs file type is under 100 mb. Now, this is really hard to do if you are shooting with a quality camera. If you really want a speedy site I like to keep my images closer to 35mb which I do by creating webp images and using imagify (Keep reading if you want more info on that).
Optimizing images help with several things:
- Reduces your website loading time. By decreasing the image size, you reduce the amount of data needed to view your page. Your page loads quicker keeps the people on your site and boosts the overall experience with your site.
- Increases your SEO. The faster your site loads (especially on mobile screens), the better it ranks. Google emphasizes mobile-first sites in its search engines, so this is not likely to change.
- Improved UX (user experience) The addition of optimized images means faster loads and more time spent by users. You also save space on your website’s server by making your images smaller. This is so you don’t have to worry about other apps, such as Facebook or Pinterest resizing your photos and losing image quality. This can cause more traffic to your web and improve conversions.
You boost the performance and the user interface on your website if you can get uploads for your photos right from the very first moment. Follow the tips for saving your energy, money, and stress.
Steps to Creating Web-sized Photos With Lightroom
Step 1 – Exporting Images
Choose your images for export. You can do this in 2 ways:
Highlight and Export – select any image from your Lightroom library. Right-click on the photo and then select “export”.
Go to File > Export.
Step 2 – Lightroom Export Options
The Lightroom Export Dialog Box will pop up. Pick your export Location. Create a new folder for your exported photos and assign them a name if you haven’t already done so. There is also a direct option to upload from Lightroom to WordPress, which we will explore later.
Step 4 – Name Your Image Files
The proper name of your files will help search bots to read and understand the image and help you to find keywords. Ensure the letters, numbers, underscores, and hyphens in file names are used because other characters may not work well online.
Step 5 – Choose JPEG/PNG File Settings
Usually, you should choose JPEG / PNG as the standard, especially if you plan to work on images with transparent backgrounds. GIFS may be nice to display short actions or e animations. Be aware they can be large files, so use them sparingly. Eng images, in general, are a larger file size unless they have a transparent background. That is why for photographers or if you have an image-heavy blog Jpeg images are the best way to go.
Step 6 – Choose Image Size Settings Including Social Media Images
Here are the guidelines to ideal image dimensions.
- Blog Posts – 900px pixels wide / Height – Auto
- Gallery Posts – Width – Auto / Height – 1500px
- Slideshows and Full Width Blocks – Width – 2880 pixels wide / Height – 1500px
- Instagram story
- Pinterest long post
TIP download here a FREE Adobe Illustrator file that includes all the file sizes.
Step 7 – Sharpen Your Images for the Web
Ideally, web images would be of the maximum quality. But the difference in web size is hard to perceive for many people viewing your site on different devices, and so you can reduce the quality slightly without losing the image quality.
All of our presets have sharpening built into them so you have one less thing to worry about. If you want to try some of my favorites out start with these free ones.
Step 8 – Export Images
You are ready to export the images. Don’t worry, you are almost done! Make sure they are at an ideal level of quality for your visual brand’s style.
I always like to have a folder where I commonly export my photos. This makes them easy to find and upload. I call my folder on my desktop “upload”. This way, I always know what it’s for. It’s also handy to always have a folder full of web-ready photos.
Before you upload your images on the web, read more optimization tips. You may reduce the file size even more!
Tips to resize photos for web
Here are a few tools that can further reduce the size of the image. These tools make your pictures don’t lose quality after optimizing them and is commonly called lossless image resizing.
- Tinyjpg.com orTinypng.com can compress images further. However, only 20 images can be done simultaneously, and the file size should be below 5 MB per image. I personally have the Adobe Photoshop plugin I bought a few years ago and this helps make it easy to resize images in bulk you may have already exported from lightroom.
- Imagify provides a plugin and API for WordPress which enables you to automate the upload and bulk picture optimization. You still can optimize images while uploading, save original pictures, and keep some EXIF details (shutter speed, aperture, ISO etc). I use this on my blog to make it so it converts my images to web images.
- Optimole is another WordPress plugin that optimizes images on the fly based on the visitor’s browser and viewpoint, so they are larger than they need to be. It also can lazy load your background images from Elementor which you know can slow your site down.
Upload to WordPress from Lightroom
WordPress has a built-in picture upload function that works well. You can upload Lightroom photos and use the web upload functionality of WordPress. You can directly upload your images to WordPress from Lightroom via plugins. You first need to set up a Lightroom plugin in WordPress.
You will get the Lightroom Publishing Manager when you set up the Publish service. You enter the login information for your WordPress web site here on the Authorization panel. You can match Lightroom fields to WordPress image metadata – helpful for managing captions and ALT text – and set standard export settings such as image sizes and file naming.
Get Started on Image Optimization for WordPress
Optimizing the image is one of the most important things you can do on your site. Preparation is essential for image optimization prior to uploading online, giving long-term SEO and speed benefits for your site. Try out some of the tools we suggested here and let us know in the comments how it worked for you or if you have questions.