Optimizing Images for the Web: Best Practices and Tools (2026)
What are the best tools and practices for optimizing images? Images are usually the heaviest part of a web page, so they decide how fast it loads and how well it scores on Core Web Vitals. They can also bring visitors from Google Images. This guide covers optimizing images for speed and for search in 2026, from formats and compression to alt text, updated from Akmal Wardak’s original guest post.
Quick answer: Resize images to the size they are shown, convert them to WebP or AVIF, compress them with a tool such as Squoosh or a plugin such as ShortPixel or EWWW, serve responsive sizes with srcset, lazy load images below the fold (not the main hero image), always set width and height, and give each image a descriptive file name and alt text.
Table of Contents
Optimizing images for faster pages
1. Resize before you upload
Don’t upload a 4000-pixel photo to show it at 800 pixels. Resize to about the largest size your theme displays (often 1200 to 1600 px wide). WordPress then creates smaller sizes automatically.
2. Use modern formats
- WebP: supported by all modern browsers, usually 25 to 35% smaller than JPEG at similar quality.
- AVIF: even smaller, now supported by all major browsers; WordPress accepts AVIF uploads since version 6.5.
- SVG: best for logos and icons.
- PNG: only for screenshots or graphics that need sharp edges; convert old GIFs to PNG, WebP or a short video.
3. Compress images
- Squoosh: free browser tool from Google to compare formats and quality side by side.
- TinyPNG: quick online compression for PNG, JPEG and WebP.
- ShortPixel, EWWW Image Optimizer and Smush: WordPress plugins that compress and convert on upload.
4. Serve responsive images
Use srcset and sizes so phones download small versions and big screens get large ones. WordPress adds these automatically to images inserted from the media library.
5. Lazy load, but not the first image
Add loading="lazy" to images further down the page; WordPress does this by default. Don’t lazy load the main image at the top, because it is often the Largest Contentful Paint element. See our guide to lazy load images.
6. Always set width and height
Width and height attributes let the browser reserve space, so the layout doesn’t jump as images load (Cumulative Layout Shift).
7. Use a CDN and caching
A CDN serves images from servers near the visitor; long cache headers stop repeat downloads. Many caching plugins and hosts include image CDNs.
Optimizing images for search (image SEO)
- Descriptive file names:
widescreen-wallpaper.webpbeatsIMG_0042.webp. Rename before uploading; Windows File Explorer and Mac Finder can batch rename. - Alt text: describe the image for screen readers and search engines in a short sentence. Don’t stuff keywords.
- Relevant placement: put images near the text they illustrate, with a caption where useful.
- Unique images: original screenshots and photos rank better than stock images found on thousands of sites.
- Image sitemap and structured data: SEO plugins such as Rank Math or Yoast include images in the XML sitemap.
- Open Graph image: set a 1200 x 630 social image so shares look good.
Check your results
Run your page through PageSpeed Insights. It flags oversized images, missing dimensions and images that should use modern formats. For more speed tips, see how to increase site speed.
FAQ
What is the best image format for websites?
WebP is the safe default; AVIF is smaller still. Use SVG for logos and icons.
What size should blog images be?
Match your content width, often 1200 px wide, and keep most images under about 150 KB after compression.
Does image optimization help SEO?
Yes. Faster pages help Core Web Vitals, and good file names and alt text help images appear in Google Images.
Originally written by guest author Akmal Wardak, who blogged about social media, software and WordPress tips at AkmalWardak.com. Updated for 2026 by QuickOnlineTips.
Get our free weekly email: new tech guides and tools, no spam.
New and updated tech guides, a free tool worth bookmarking and one useful pick, once a week. No spam, unsubscribe anytime.
One email a week. Unsubscribe anytime. See our privacy policy.
These tips are awesome and the smush.it plugin is also a good one. Currently, I am using a cdn for images which works out to be good. A problem that I have faced is that at first I started receiving a lot of traffic from Google Images but later everything vanished. I don’t know why but I am still trying to figure out.
Anyway the traffic for images is not too much important for me because they don’t send the visitor directly to my page but still it adds to traffic. Your tips are great especially the wordpress plugins.
One of the easiest ways to reduce page response times is by optimizing your website images to reduce their file sizes as much as possible. There are several free tools available at your disposal to shrink and optimize images. And it seems that “Smush it” is the most popular one.
What about using bigger than we need and we set up preview 150 X 150 and our visitor can click for bigger.
Is this way better than smaller picture ?
Giving ALT tags to the images is very important to get some search engine traffic from Google Images.
You’re right guys. Images are an important part of many web sites, and can potentially bring in a lot of search engine traffic.
You can take it to another level and store that image in a separate directory named by the keywords….e.g. /widescreen-wallpaper/widescreen-wallpaper.jpg , its extra work…but works..
agree, enhanced images done creatively in layout can produce better traffic. Good point.
Beware of WP Smush it if you blog with windows live writer. It triggers an error.
Any special tips for blogger blogs in optimizing images as there are no widgets available like for WordPress blogs.
you can still follow the options that are not related to WordPress plugins, like not scaling images in HTML and a few other ones.
BTW, this should be a good reason for you to switch to WordPress ;)
images say alot about the message in a website (and you don’t have to even read them). Thanks for your tips, very helpful
I never thought about Google Image Search. I always try to add images to make my posts more pleasing to the eye. I’m definitely going to try out these plug ins. Thanks for the tips.
I didn’t know about plug-ins to optimize images, guess I do now. Thanks!
Images takes very important role in traffic generation. In fact, it adds to a websites personality if there are images posted. But ofcourse there are pro’s and con’s, do’s and dont’s.. Thanks for this mind opening post regarding images :-)
you are welcome, edwin.