Strong visuals are essential for any digital launch or brand refresh, but uploading massive high-res files straight from your camera can do more harm than good.
Large image files can kill your site speed and both your user experience and SEO rankings.
In fact, according to Google, if a page load time increases from one second to three seconds, the probability of a user bouncing increases by a whopping 32%. If your images aren’t optimized, they’ll likely contribute to that delay in a major way.
Here’s how to get crisp, clean images and a fast-loading website.
#1. Choose the Right File Format
Not all image formats are created equal, and choosing the wrong one can either hamper your image quality or bloat your file size unnecessarily.
Here’s a quick cheat sheet on the most common image types:
- JPEG (.jpg): Smallest file size, but uses lossy compression, which means some detail and sharpness are sacrificed. This is best for photos where file size matters more than perfect quality.
- PNG (.png): A higher quality than JPEG, with lossless compression. These support transparency and generally are best for graphics, screenshots, and photos with text overlays.
- SVG (.svg): Vector-based, meaning it scales infinitely with no loss of quality. Use for logos, icons, and line art.
- Do not use for photos.
- TIFF / DNG: High-resolution formats with zero compression loss. Great for photo editing, but never use these for web. These will bring your load speed to a crawl.
Pro tip: Generally speaking, using JPEG for photos and PNG for graphics.
#2. Crop Before You Compress
Composition isn’t just about aesthetics: it also affects performance.
Many try to upload an oversized image and let the website scale it down for them. Even if it looks smaller in the browser, your site is still loading the full-sized image in the background.
For example, if you’re showcasing a building, don’t upload a wide-angle 6,000px photo when a cropped 1,800px medium shot would do the job.
Don’t forget to think function first: crop images to only what you need before resizing or exporting. This will help improve both load speed and storytelling clarity.
#3. Resize with Purpose
Most websites don’t need images larger than 2,000px wide. Many CMS templates and content blocks top out between 1,200 and 1,600px. Images larger than that add extra size to the image file itself without a visual payoff for your website’s users.
Before uploading any photos, first check your website’s layout or template specs to determine the maximum size your pages can handle. This tells how large the image will actually appear on the page, and how much image resolution you actually need.
Then based off of your website’s layout or template specs, resize your image accordingly in Photoshop, Lightroom, or even browser-based tools like PIxir, Squoosh or TinyPNG.
#4. Use The Tools Available – Like Photoshop’s “Save for Web (Legacy)” Feature
(In my opinion, this is where things get good)
Adobe Photoshop’s Save for Web (Legacy) tool gives you the most granular control over image optimization.
It lets you test different formats (JPEG, PNG, etc.), adjust quality sliders, remove unnecessary metadata, preview file size changes in real-time, and more.
To use this amazing tool:
- Open your image in Photoshop
- Go to File > Export > Save for Web (Legacy)
- Choose JPEG or PNG-24
- Adjust quality level (usually 60 and 75 is the sweet spot)
- Check the preview file size
- Strip out metadata and color profiles if not needed
Pro tip: You can preview how your image will look with compression before saving. This is a feature many web compression tools don’t offer.
#5. Leverage Lazy Loading
Don’t stop once your images are optimized, continue by implementing lazy loading (where images only load when they enter the user’s viewport), which can drastically speed up initial page load time.
According to Mozilla’s Developer guide on lazy loading, the median image size for web pages has increased greatly from 2011 to 2019. On desktop devices, there’s been a 260% increase of 250KB to 900KB and a 750% increase of 100KB to 850KB on mobile devices.
Most modern platforms like WordPress, Webflow, or Squarespace support lazy loading by default or via plugins. If you don’t have one of the above platforms, adding lazy loading to your existing images is a relatively straightforward process and requires a small amount of HTML work in most cases.
By simply adding the attribute loading=”lazy” to an <img> tag, you’re letting the browser know to apply the lazy loading technique to that image.
Pro tip: this can also be applied to <iframe> tags as well
Web.dev has a solid guide for those wanting to know more: https://web.dev/articles/browser-level-image-lazy-loading
#6. Consider Next-Gen Image Formats (WebP, AVIF)
Modern image formats like WebP and AVIF offer significantly smaller file sizes than traditional JPEGs and PNGs, without sacrificing visual quality.
According to Google’s WebP study, WebP images are between 25 and 34% smaller than JPEGs and 26% smaller than PNGs, making them a great option for improving site speed without compromising image clarity.
If your CMS, design tool, or image export platform supports WebP, use it: just be sure to provide fallback formats (like JPEG or PNG) for older browsers.
Between the two, AVIF often outperforms WebP thanks to the more efficient AV1 codec. It supports 8-bit, 10-bit, and 12-bit color depths, making it ideal for high-fidelity visuals.
But there’s a catch: browser support for AVIF is still maturing. As of now, most major browsers only began broadly supporting AVIF in 2024 or later.
In short:
- Use WebP where possible: it’s widely supported and a major upgrade over JPEG
- Experiment with AVIF if you’re on a modern browser stack and want even better compression
#7. Don’t Forget Image Alt Text and Naming
Optimization isn’t just technical: it’s also about discoverability. Giving your image a relevant file name and adding descriptive alt text helps with SEO and accessibility.
Instead of:
-
- IMG_29034.jpg
Try:
-
- custom-metal-sign-installation-chicago.jpg
And in your alt text, use a helpful, keyword-rich phrase like:
-
- “Technician installing custom-branded metal signage on storefront exterior”
This alt text and description is paramount to search engines understanding your content and improving performance on image-driven search platforms or queries.
For decorative images that don’t convey meaningful content (like background textures, icons, or purely aesthetic visuals), use an empty alt attribute (alt=””). This signals to screen readers to just skip the image, keeping the browsing experience cleaner for visually impaired users.
According to the Web Content Accessibility Guidelines (WCAG) and supported by W3C and WebAIM, this is the preferred method for handling non-informational imagery in accessible web design. It’s a small but important step that improves accessibility and helps your site work better for all users.
#8. Test, Test, Test (Especially Before You Upload in Bulk)
If you’re working on a large content refresh or building a new site, test a few sample images across different compression levels and file types.
Load them into staging and evaluate:
- Page speed
- Visual clarity
- Mobile responsiveness
Tools like PageSpeed Insights or GTmetrix can help you understand how your image choices impact load time and performance.
Final Takeaway
Optimizing images for your web site isn’t about sacrificing quality, it’s about being intentional.
The right file type, dimensions, compression settings, and export method can all drastically improve performance without compromising your visual standards.
Remember: faster sites rank higher, keep visitors longer, and convert better. In fact, 40% of online users will leave a website if it takes more than three seconds to load according to Electro IQ.
Smart image optimization is one of the simplest ways to speed up your site and elevate your brand.
About the Author
Kevin Kleifgen is a freelance photographer and multimedia producer with a background in journalism, digital strategy, and healthcare marketing.
Specializing in candid event coverage, branded content, and behind-the-scenes storytelling, Kevin captures compelling visuals that elevate brands and connect with audiences. By day, he serves in a marketing-technology project management and content creation role for a non-profit medical professional society. By night, Kevin helps organizations and individuals bring their stories to life through sharp visuals and smart digital workflows.
With experience across journalism, web development, and both social and digital marketing, Kevin has produced award-winning photo and video content with millions of views, contributed to dozens of successful digital campaigns, and led hundreds of content and website launches. Outside of work, he enjoys last-minute travel experiences, experimenting with new creative tools (currently writing and sketching), and chasing PRs on his Peloton.
Publishing Date:
