TL;DR: JPEG vs PNG – All You Need to Know
This guide cuts through the technical jargon surrounding web image formats (JPEG, PNG, WebP, AVIF) to show you exactly how choosing the right one impacts your site speed, SEO, and, most importantly, your conversion rates. Stop losing customers because your product photos are too heavy.
Three Key Takeaways for Skimmers:
- The Binary is Dead: Stop thinking
JPEG vs. PNG. Modern web performance demands you serve WebP images for nearly everything, and start experimenting with AVIF for maximum speed gains. - It’s About Speed, Not Just Quality: The fastest way to improve your Core Web Vitals (especially LCP) is by shrinking image file sizes. This is a direct ranking factor rewarded by Google.
- Automate Everything: Manual image optimization is a waste of time. You need a WordPress solution that automatically converts, compresses, lazy loads, and serves images via a CDN with zero effort from you.
If you care about site speed and conversions, don't just skim the table—the "How" section will save you hours of manual work.
Are you using the right image types???
The difference between a fast, high-converting website and one that feels sluggish often comes down to details you never think about—like the file format of your images.
If you’re a business owner, you likely spend hours perfecting your product photos and graphics. But if those images are saved in the wrong format, they become heavy anchors dragging down your site speed. I’ve seen it happen countless times: beautiful sites hobbled by massive files.
The cold truth is that nearly half of all visitors will leave your site if it takes longer than three seconds to load. And when we talk about site speed, the biggest culprit, 99% of the time, is unoptimized images.
Choosing the right format—whether it’s JPEG vs. PNG, or the modern alternatives like WebP and AVIF—isn't just a technical detail; it’s a strategic decision that directly impacts your SEO, user experience, and bottom line.
By the time we’re done here, you’ll know exactly which format to use and, more importantly, how to set up your WordPress site to handle the technical heavy lifting automatically.
If you want to make sure you haven't missed any other crucial performance elements, grab our comprehensive Website Optimization Checklist.
Images Are Part of a Bigger System
The image format you choose is critical, but it’s only one piece of the puzzle. That perfectly optimized image has to load instantly on a fast, distraction-free landing page designed to convert. If you’re serious about maximizing your conversion rates, you need a system that ensures every element—from the headline to the image—works together seamlessly.
If you’re ready to build high-speed, high-converting landing pages where your optimized images shine, take a look at Thrive Suite.
The Core Four: Understanding Modern Image Formats
For years, the conversation about web images was a simple binary: JPEG or PNG. That binary is now outdated. Modern web development requires us to understand four key formats, each designed for a specific purpose.
To make smart decisions, you first need to understand how these formats handle compression.
Lossy vs. Lossless Compression: The Key Difference
When you save an image, the format uses an algorithm to reduce the file size.
Compression Types Explained
- Lossy Compression (Like JPEG): This method achieves small file sizes by permanently discarding some image data. It’s smart about it—it throws away details the human eye is less likely to notice. The trade-off is that every time you save a lossy file, the quality degrades slightly. Think of it like making a photocopy of a photocopy.
- Lossless Compression (Like PNG): This method reduces file size without losing any of the original pixel data. The image quality remains perfect, crisp, and clean, but the resulting file size is significantly larger.
Understanding this distinction is the foundation of choosing the right format.
2.1 JPEG: The Universal Standard for Photos
JPEG (Joint Photographic Experts Group) is the oldest and most widely supported format. It was designed specifically for complex, full-color photographs.
JPEG Snapshot | |
|---|---|
Compression | Lossy |
Transparency | No |
Best For | Complex photographs, large images with smooth color gradients. |
Why Use JPEG? It excels at shrinking large photographic files down to manageable sizes. Because photos contain millions of colors and subtle gradients, the lossy compression is often invisible to the naked eye. If you have a product shot or a landscape image, JPEG is still your friend.
The Catch: It hates sharp lines and text. If you try to save a screenshot or a graphic with text as a highly compressed JPEG, you end up with fuzzy artifacts, halos, and blurry edges. It looks terrible.
And if you need to create these graphics from scratch, we've got a great guide on How to Create Images for Your Blog or Website efficiently.
2.2 PNG: The Go-To for Graphics and Transparency
PNG (Portable Network Graphics) was developed primarily as a superior, patent-free replacement for the old GIF format. It's built for clarity and is the only common format that supports true transparency (the alpha channel).
PNG Snapshot | |
|---|---|
Compression | Lossless |
Transparency | Yes (Alpha Channel) |
Best For | Logos, icons, screenshots, graphics with sharp lines, images that need a transparent background. |
Why Use PNG? When you need a logo to sit cleanly on top of any background color or image without a white box around it, you need PNG. Since it uses lossless compression, text and sharp edges remain perfectly crisp, making it ideal for screenshots and infographics.
The Catch: File size. If you try to save a large, full-color photograph as a PNG, the file size can easily be five to ten times larger than the equivalent JPEG. That’s a speed killer.
When you're fighting these speed killers, remember that having the right tools helps a ton, so check out my list of My Top 8 WordPress Site Speed Tools.
2.3 WebP: The Modern Workhorse for the Web
Developed by Google, WebP is the format that changed the game. It was designed specifically to deliver smaller file sizes than both JPEG and PNG while maintaining excellent quality.
WebP Snapshot | |
|---|---|
Compression | Lossy & Lossless available |
Transparency | Yes (Alpha Channel) |
Best For | All-purpose web images. It replaces both JPEG (with better lossy compression) and PNG (with smaller lossless files). |
Why Use WebP? It’s the best of both worlds. WebP lossy compression is typically 25–34% smaller than JPEG at the same quality level. WebP lossless compression is often 26% smaller than PNG. If you are serious about site speed, you should be serving WebP images.
The Catch: Historically, browser support was an issue, but today, over 97% of global browser traffic supports WebP. The main challenge now is ensuring your WordPress setup automatically converts and serves these formats.
2.4 AVIF: The Next-Generation Powerhouse
AVIF (AV1 Image File Format) is the newest kid on the block, based on the AV1 video codec. It offers even better compression than WebP, often delivering the same quality image at an even smaller file size.
AVIF Snapshot | |
|---|---|
Compression | Lossy & Lossless available |
Transparency | Yes (Alpha Channel) |
Best For | High-quality images at the absolute smallest file size, especially for mobile devices. |
Why Use AVIF? If WebP is great, AVIF is next-level. It’s capable of delivering stunning image quality while slashing file sizes, offering a significant advantage in speed and data usage.
The Catch: Browser support is still growing (around 80%+), and implementation requires robust server-side processing or specialized plugins to handle the conversion and fallbacks. It's the future, but it requires a more sophisticated setup today.
At a Glance: JPEG vs. PNG vs. WebP vs. AVIF
When you’re staring down a decision, sometimes you just need a quick cheat sheet. This table organizes the four core formats based on the features that matter most for web performance.
Image Format Comparison Table
Feature | JPEG | PNG | WebP | AVIF |
|---|---|---|---|---|
Compression | Lossy | Lossless | Lossy & Lossless | Lossy & Lossless |
Transparency | No | Yes (Alpha Channel) | Yes (Alpha Channel) | Yes (Alpha Channel) |
Best For | Photographs, Complex Images | Logos, Graphics, Text | All-purpose web images | High-quality images at low file sizes |
File Size | Small | Large | Very Small | Smallest |
Browser Support | Universal | Universal | High (97%+) | Growing (80%+) |
Of course, image formats are just one tiny piece of the puzzle if you're trying to figure out How to Build a Website That Doesn’t Look DIY.
The Strategic "Why": Connecting Image Formats to Business Goals
If you’re still thinking image optimization is just about making files smaller, you’re missing the bigger picture. This is about revenue.
4.1 Impact on Core Web Vitals & SEO
Google doesn't just prefer fast websites; it actively rewards them. The Core Web Vitals (CWV) are a set of metrics Google uses to measure user experience, and poor image choice is the number one killer of good scores.
The most relevant metric here is Largest Contentful Paint (LCP). LCP measures how long it takes for the largest, most visible element on the page (which is often a hero image or product photo) to load. According to Google, to provide a good user experience, strive to have LCP occur within the first 2.5 seconds of the page starting to load.
If you upload a massive, unoptimized JPEG or a huge PNG, your LCP score tanks. When your LCP score is poor, your overall CWV score suffers, and your search rankings can be negatively impacted. Serving next-generation formats like WebP and AVIF is the fastest way to shrink those heavy LCP elements and improve your SEO standing.
If your scores are already in the red, we break down exactly How to Fix Core Web Vitals Issues (For Beginners) in another guide.
4.2 How Image Choice Affects Conversion Rates
Imagine a potential customer lands on your product page. They wait. And wait. If the product image is slow to load, they bounce. They don't convert.
Speed and Conversions: The Direct Link
Faster page loads lead to:
- Lower Bounce Rates: Visitors stick around because the page is instantly usable.
- Higher Engagement: Fast-loading images mean users can quickly scroll, view galleries, and interact with the content.
- Increased Sales: Multiple studies show that even a 100-millisecond improvement in page speed can boost conversion rates by 1-2%.
This isn't about saving a few kilobytes; it's about making sure your beautiful visuals load instantly, giving your visitor zero reason to leave.
This speed boost is just one of the many ways you can start to Increase Conversion Rates (25+ Tips) across your entire site.
And if you're still struggling to get those pages built quickly, check out our guide on how to Launch in 15 Mins: How to Build a Landing Page in WordPress.
The "How": Optimizing Images in WordPress the Smart Way
You now know that you should be using WebP and AVIF where possible, but how do you actually get those images onto your WordPress site without spending hours manually converting files?
The answer is automation.
5.1 Manual Image Optimization vs. Automated Solutions
You could manually resize every image in Photoshop, upload it, run it through an online compressor, and then use a complex plugin to handle WebP fallbacks. You could, but you’d hate your life and waste valuable time.
Manual optimization is fine for a five-page brochure site, but for any serious business or blog, you need a solution that handles everything in the background.
If you want the full picture on performance, this is just one piece of our ultimate WordPress Site Speed Optimization Guide.
5.2 Thrive Suite Solution: Automatic Image Optimization
This is where the right tools make all the difference. When you build your site with Thrive Theme Builder, you gain access to seamless, integrated site speed management.
We built an integration with Optimole (a powerful image optimization service) directly into the Thrive Theme Builder dashboard. This means you can handle all the complexity with a single click:
This integrated approach means you upload a high-quality source image once, and the platform handles the speed, format, and delivery perfectly every time.
Speaking of building your site right, we've tested and ranked the 15 Best WordPress Themes if you're looking for a new foundation.
Beyond Formats: A Holistic Image Optimization Checklist
Choosing the right format is step one. To truly maximize your speed, you need a holistic approach.
6.1 Right-Sizing and Compression
Before you even upload an image, you should resize it to the maximum dimensions it will ever be displayed at. If your blog content area is 800 pixels wide, don't upload a 4000-pixel image. That’s just unnecessary weight.
Once you have the right dimensions, use a tool (or let your automated system handle it) to compress the file. Good compression finds the sweet spot where the file size is tiny, but the quality is still visually perfect.
6.2 Lazy Loading Explained
Lazy loading is a technique where images that are "below the fold" (not immediately visible when the page loads) are deferred until the user scrolls down to them.
This dramatically improves your initial load time and your LCP score because the browser isn't trying to load 20 images at once. Modern WordPress versions and quality themes (like those in Thrive Suite) handle lazy loading automatically, but it’s a critical component of speed optimization.
6.3 The Importance of CDNs
A Content Delivery Network (CDN) is a geographically distributed group of servers that work together to provide fast delivery of internet content. Instead of every visitor hitting your single web host server, the CDN serves the image from a server physically closest to the visitor. If you’re using an integrated solution like Optimole within Thrive Theme Builder, you get CDN delivery built-in. Don't skip this step.
6.4 Image SEO: File Names and Alt Text
Even with perfect formats and speed, you need to tell Google what the image is about.
Remember, alt text is also a huge part of Designing for Web Accessibility, which is critical for a good user experience.
Prove It: A/B Testing Image Formats for Higher Conversions
The most strategic web builders don't rely on guesswork; they rely on data. While WebP is generally faster, sometimes a slightly higher-quality JPEG might lead to better conversions if the visual impact is critical (e.g., in high-end e-commerce).
If you want to move beyond guesswork entirely, our Ultimate Landing Page Guide to Get Real Results is a must-read.
Thrive Suite Solution: Validating Your Choices with Thrive Optimize
You don't have to guess which image format or compression level works best for your audience. You can test it.
Using a tool like Thrive Optimize, you can set up a simple A/B test on a key landing page:
You then measure which variation results in a higher conversion rate (more sign-ups, more sales). This data-driven approach moves image optimization from a technical chore to a strategic advantage. It ensures that every decision you make is validated by real user behavior.
If you're new to this process, we have a complete walkthrough on How to Run an A/B Test on WordPress using the right tools.
Frequently Asked Questions (FAQ)
Conclusion: Your Path to a Faster, Higher-Converting Website
Choosing the right image format is no longer a tactical choice—it’s a systems decision.
JPEG vs. PNG was never the real problem. The real issue is whether your site is built to consistently deliver fast-loading, conversion-ready pages without constant manual work. Modern performance requires next-gen formats, lazy loading, CDNs, and smart fallbacks—but those only matter if they’re implemented inside a site that’s designed to convert once the page loads.
That’s where most websites fall apart.
They optimize images in isolation…
…but leave them sitting on slow themes, bloated page builders, and disconnected tools that don’t support testing, iteration, or growth.
Speed without conversion strategy is wasted effort.
Where Thrive Suite Fits In (And Why That Matters)
Thrive Suite isn’t just about making pages look good—or even load faster. It’s about building a conversion-first WordPress system where performance improvements actually translate into results.
With Thrive Suite, optimized images don’t live on static pages. They live inside:
- Landing pages engineered for sign-ups and sales
- Themes built for speed, clarity, and Core Web Vitals
- Native A/B testing that lets you validate image quality vs. speed trade-offs
- Integrated optimization tools (like Optimole) that automate formats, compression, CDN delivery, and fallbacks behind the scenes
Instead of juggling plugins, workarounds, and guesswork, everything works together—by design.
The Real Outcome
When your images load instantly and your pages are built to convert, you stop optimizing for metrics in isolation and start optimizing for revenue.
That’s the difference between tweaking formats and building a site Google rewards and customers respond to.
If you’re ready to stop thinking in terms of JPEGs, PNGs, and plugins—and start building a faster, higher-converting WordPress site as a complete system—Thrive Suite gives you the foundation to do exactly that.
Great article Shane! This should be mandatory reading for website owners.
I addition, are you still recommending always making the image the correct PIXEL size before running it through Kraken?
Yes, that’s a best practice that I also recommend doing.
I prefer png, the quality is much better.
Mate… please watch the video.
Great explanation and sample images, Shane!
Thank you, Christy!
What happened to .gif?
It died of old age…
GIF is an ancient image format and using either JPEG or PNG instead is better in 99% of cases.
GREAT article!
Even for us old and jaded folks a reminder like this is helpful.
Thank you, Onuora! Glad to know you enjoyed this post. 🙂
I knew about transparency and always checked for which produced the smaller file size in Photoshop but there were some great tips in there. Thanks. Also, double thanks for the Kraken.io tip 🙂
Thanks for your comment! I’m glad you found this post useful.
Hi Shane.
Your themes come with a compression function built in. Is your built in function as good as Kraken or would there be any additional benefit of passing images through Kraken first and then perhaps through your built in compression function to take it down further?
Hello Jonah,
Our built-in compression uses the premium Kraken service for image compression. 🙂
I’m running ThriveThemes on our site, but am not clear how to tell which images have been compressed by the built-in compression.
Good article Shane. The problem I see with my websites are rather .java or.css which should be combined into one file. I already use a plugin to do it for me and also in theme and the same plugin I have to minify things. I also use CDN, but website load from 3.3sek to as bad as 6.7sek and more. It depends on the continent. I also found that any external links incl. plugins and google fonts slow down pages.
I have no idea what to do with that ext. css or Java in WP. This is how it is I guess.
Yes, there’s a lot more that can be done to keep a website fast. In this post, I wanted to keep the focus on just image formats.
Thank you Shane for the reply. Sorry for adding a less relevant comment to this post. Maybe next time you can write about it too. It will be very appreciated. Thanks.
Hi Shane
Another great article. I’ve been using tinyjpg.com for both JPEG and PNG compression. I’ll compare the results with Kraken.io.
I also use your Thrive theme RISE. Does this feature need to be activated on the theme?
Hello Owen,
In the theme, you can go to Theme Options -> Performance and activate the built-in image compression. When you do that, there’s no need to use external image compression services.
You didn’t mention GIF format for illustrations/text – usually smaller than PNG files but limits colors. Also PNG 24 vs PNG 8. For web PNG 8 will be smaller file size than 24 and look the same as 24. Some image compression plugins – Shortpixel, Smush Pro – will convert PNGs to JPEG for you if no transparency is used. I’m not sure if they convert illustration PNG files – which would not be ideal.
Thanks for the tips.
Thanks for your comment, Bob!
I personally never use the GIF format. I’ve yet to see an example where GIF has a significant advantage over PNG. Also, since it seems difficult enough for most people to remember which of the two image formats shown in this post to use, I didn’t want to add more stuff and add potential confusion.
You mention Kraken in your video but I thought that any photo we uploaded via Thrive Themes was automatically compressed via Kraken by default. Is this no longer the case?
Hello Santiago,
Yes, in our themes, we have a feature that automatically compresses all images you upload.
Hi, Shane,
You mention Kraken is built into your themes but is it also part of Thrive Architect?
Hello Rod,
The Kraken image compression is only included in our themes at this time.
Exellent explenation as always Shane.
But sometimes you’ll have to save your image as PNG, like in my case where a client gave me around 300 pictures (in JPEG format) of his products that he wanted to showcase on his site.
I had to made them with transparent background since they had to look good on the site. Then I compressed them using the site called tinyPNG and then uploaded on his site.
Yeah, if you need transparency, PNG is the best choice. As I mentioned in the video, I recommend avoiding photos with transparency if possible (e.g. the rounded image effect).
Knowing your aware of the importance of page load times, I’m sure you’ve factored in the effect your plugin suite has on them as well. Glad to be using Thrive (after years of Hybrid Connect)
Speed is always a major consideration for us, yes. In everything we build, we keep things as fast and lean as possible.
Great stuff! I’m intrigued by your statement that 750kb for a large image is ok? I typically keep any single image under 300kb, even it’s the only one on the page. Is that 750kb also reduced by Kraken? Does Kraken (or WP Smush) do a better job than we can do ourselves in PhotoShop?
Kraken does a waaaay better job than what you can get in Photoshop, yes. Importantly, it will give you much higher image quality for the file size. If you compress an image to, say, 300kb in Photoshop, it will look a lot worse than the same image compressed to 300kb in Kraken.
Regarding file size: yes, 750kb is a lot for a single image. For a full size background image (e.g. for the title section of a page), I’d say it’s just about acceptable. This is assuming it’s the only large image like this on the page.
The biggest factor here are the image dimensions. Because the image is made for full screen coverage, its dimensions are large and so is the file size. If the same image was sized to show inside the content, the file size could easily be 5x smaller.
Fantastic! Such valuable info thanks Shane!
Thank you, Francesca!
Thanks, Shane, for bringing up the topic of image compression in this post. It’s important to website speed but rarely talked about! I also find this interesting (and your explanation well done) because it reminds me of work I did as an engineering grad student (in fact, I did my master’s thesis on image compression).
As you explained well in this post, the JPEG algorithm doesn’t handle very well sharp edges where the image content is quite different on one side of the edge vs on the other side (precisely the graphics and logos you mentioned). JPEG was designed for areas of continuity in images, like a person’s face, a natural scenery in nature, etc where there’s continuation of the same (or similar) image content in many areas within the image. So with JPEG, you can get good reduction in file size for these kinds of image content (without losing much image quality), but you start to get the compression artifacts (the jagged lines) pretty fast if there are many sharp dividing lines within the image.
Anyway, this is just me reminiscing about my good old grad student days 🙂 You did a great job explaining the importance of image compression – and it’s even better that you brought up this topic in the first place and devoted a post to it. It’s so true that people nowadays expect a website to load quickly (almost instantly), or else they just think it’s not worth sticking around for.
Thank you for your comment, Kevin! I’m happy to know that my explanations hold up for someone with deep knowledge of image compression algorithms. 🙂
Great info!
Thank you, Cedric!
Shane, I’ve heard you also say that Thrive Architect will size the images for us. Do we still need to use Kraken? I’m a wee bit confused. Thanks!
Hello Caroline,
If you use one of our themes, you can activate automatic image compression in Theme Options -> Performance. When you do so, you no longer need to do any image compression manually.
Hi Shane –
you make several references to Theme Options > Performance. I’m a bit new to this and when I look in the WP dashboard at Appearance > Themes, I can see the Thrive Ignition theme and a ‘Customize’ button but don’t see ‘Options’.
Under Customize, I see 8 sub-choices but not one called Performance, and nothing inside these 8 choices about images or compression.
Where have I missed my way ?
For thrive theme users though, ALL photos/images are automatically compressed when uploaded, correct? We just need to make sure they are in the right format (jpg/PNG), correct?
In other words all themes have Kracken already installed?
Yes, that’s correct. The image compression step is build into the optimization feature in our themes.
Yay! One less plug-in to have to keep updating and makes our site less “Frankenstein-ish!”
Thanks!
What is the best practice for storing a hi res photo for downloadable/publicity choices for printing posters, etc.
Should those images be off-site as in AmazonS3 or Google drive?
Hello Harvey,
Storing large image files for press kits and such separately can be a good idea, yes. Amazon S3 is suitable for this. However, even if you store them on your site, that’s fine, as long as you don’t load those images on your pages. If there’s a “click here to download” link that will download a zip file with a bunch of huge images, that’s no problem and it doesn’t matter much where that file is hosted.
Oh, didn’t know that about the storage in my site and not actually loading them into the page. I thought that just because they were in the same storage that it would slow things down. That makes sense. Thanks, Shane!
Thank you Shane, now I will go back and check mine out and update along the way.
Speed is so important today as people don’t wait to wait for anything to load.
Indeed. Our attention spans aren’t compatible with large image files, these days. 🙂
Brilliant. I learnt through your video. Thank you Shane!
I’m glad to hear it, Ulf!
Could I suggest you a topic Shane ? I’d love to have your point of view about making a sales video. What structure ? What lenght ? What congruency with TT page copywriting. I didnt’ see this kind of content from you and it’s totaly congruent with TT sales pages.
Your own approach might be interesting for us.
Thanx
Thank you for the suggestion, Stephane!
I have an older post that dissects one of my sales videos from the time in great detail. You can find it here. I might make an updated version of content like this, too.
So I can delete WP Smush (not premium) plugin when I have your theme?
If you use one of our themes, go to the theme options and activate the image compression in the “performance” options. Then, you can deactivate smush-it.
Great post as always, but what about caching plugins and CDNs?
You don’t recommend them?
Hello Fernando,
Caching and CDNs are a completely separate thing, that’s the only reason I didn’t mention in them in this post. I do recommend using both, yes. And further, they should be used in combination with correctly sized and compressed images, for maximum speed. 🙂
Yes I know they are different, many caching plugins have a CDN section.
I’d like to see your configuration for such caching plugins with Thrive Themes…
Shane thanks for the heads-up. I like to save my images for web in photoshop, then I open them in the open-sourse software Irfanview add my 2 pixel border and again save them for the web. By doing this in Irfanview with an already compessed image it easily reduces the size by another 50%. They can easily be saved as a .jpg or a .png
Hello Rick,
I recommend that you upload the image “naked” (after compressing) and add your border with CSS or with Thrive Architect, if you use that.
The reason is that by adding the border as a CSS element, you get pixel perfect crispness on the border and if you ever change the design of your site, you can change the borders on your images as well, without having to re-upload them.
Hi Shane, really useful article – many thanks. As I use TA & upload my images as jpeg & correct pixel – do I assume that kraken is automatically compressing & I do not need to do this at all?
Cheers
Alison
Hello Alison,
The Kraken feature is built into our themes, but not into Thrive Architect.
You can get the auto-optimization done by using one of the plugins linked in the post, if you aren’t using a Thrive Theme.
This is really helpful. I have been using only png format for all the website building. I especially like the tip on using svg format. One burning question: what’s the practice of resizing an image? Crop first or resize using coding?
That’s a good question, yes. It’s important that you resize the image before uploading it, because the size (dimensions) of the image have a major influence on the file size. An image should always be resized to no larger than it will be shown on your website, before uploading. More on this in this post with 8 steps for mobile optimized content.
Really helpful thank you Shane!
You’re very welcome, Mary. 🙂
Thank you, Shane.
A timeless question about image format for websites has finally been answered with absolute clarity.
That was amazing (as always).
Thank you, John! 🙂
Holy smokes, this is amazing!! Thank you SO much. I never knew this but I’m so glad I do now.
Thank you, Kelly! I’m glad you enjoyed this content.
Thank you for sharing this topic. I only thought that .PNG purpose was for image with transparant background only.
I’m happy to see you could learn something new in this post. 🙂
Wish I had known this before. Now I know why my screenshot was fuzzy once I uploaded it into the blog. But now I can fix it too! Thanks.
Yes! Let’s put an end to fuzzy screenshots! 😀
Outstanding content, thanks Shane!
Norm
Just wondering Shane – if using a ThriveThemes Theme (Squared) and uploading with Thrive Architect are the images automatically compressed or does one have to go through a third party like Kraken? Thanks again Shane.
My question too. Do your themes do that Kraken step automatically?
I think it will compress the images if you have the theme setting for image optimization turned on. Some clarity on how it works would be helpful.
I have a paid Kraken account that I used on other sites and I haven’t enabled it on sites that use the Squared theme because I didn’t want to create a conflict. Any suggestions for us?
Hi Shane, I have another problem that I would like to share but I do not know where to post it. I would have liked your email to explain it to you.
I use programming codes for people to learn how to work with Mikrotik routers.
But this code comes with the content and has very bad keywords at Yoast Seo.
I am looking for a solution to be able to place a nice code on my website in a framework or so that people can copy and paste.
Can you help me with that?
I like working with thrive architect and find it a very user friendly and usefull program. Congratulations with this.
Darn! Another thing to add to my To-Do list. Check and fix all images.
Thanks, Shane,
Love the concise, clear easy to understand information and as a newbie, it helps tremendously!
Do you have one for reducing the size of video’s?
Cheers.
Great video Shane. When saving images in Photoshop, do you recommend saving for web or saving as a normal file and uploading for compression (I have Thrive Architect)?
If using save for web, what quality do you suggest?
Hello Stephen,
I suggest saving the image at the highest quality possible in Photoshop and then compressing it with Kraken. The results are much better than if you do the compression in Photoshop.
Wow. Didn’t know the rationale between using jpg and png. Have used png for everything for ages. Will have weeks of edits to attend to.
I have used Kraken on some of my sites and prefer it to Smush. You say it is built in. Can you explain more? It is not obvious as a user.
I love this post! Very intesresting and will help me. Thaks!
Just wanted to thank you! I had actually downloaded all my images as png. Spend 1-2 hours but now all my featured images look way better and sizes are 4-8 x smaller lol. Thanks again!
Shane,
The only missing thing here is a summary of recommended image sizes for common things. I believe some recommendations have been given in other videos and it would be nice to have your recommendations put in one place. Getting images sizes right and mastering file type and compression will give all Thrive Members Jedi skills. Thanks for a great post clarifying the importance of both JPG and PNG.
Hear are some topics for another potential video:
* Social Media Sharing Sizes. (for yoast or other plugin)
* Featured Image
* Full Width Image
* Parallax Image Tips
* Retina Images for 4k Screens
* Mobile Friendly Image Tips
I hope this inspires some good content for you guys. I have been enjoying the content coming out lately while I’m waiting to see product updates etc. Keep up the good work.
I really liked your article, I confess I did not know this importance in the choice of formats between Jpeg and Png. I will apply what I learned in this article to optimize my blog. Thank you for sharing these tips.
not a mention of svg anywhere 🙁
You’re right, we omitted SVG here. The reason for it is that SVG has, for the most part, not reached the “average user” yet. Everyone can create, edit and save PNG and JPEG files using free apps and programs. You can simply upload a PNG or JPEG image and add it to a web page. The same is not true for SVG. At least not yet. So, we didn’t want to add unnecessary complexity to the message here, when most people are already struggling to get the choice between the two image formats discussed right.
Question…what do u recommend if you have a logo from 99 designs, which I have Jpeg and Png, and want to use it on a website? My guess would be Png for sharp lines and color differences?
That’s usually the right choice for a logo, yes.
This claim is not correct. PNG is a compressed image format. It uses lossless compression.
“It’s the most commonly used uncompressed image format on the web.”
Nice article but would have been better if more details about WebP was mentioned in the article. Google is suggesting bloggers to use WebP format to improve performance of the site and for SEO.
Expecting a dedicated article on WebP Implementation.
Great article! I love how in-depth you go into this. And all of the examples of one option vs the other make it so easy to understand. I’ll be sharing this post with a few of my digital marketing students when we hit the web design module. Thank you!
Thank you, Paul! I appreciate the sharing of the post. 🙂
Thank you for share. Great content. I’m traying to become my website faster and your post is amazing.
Hi Shane
Interesting article. Maybe you can help me with my question: I am a graphic designer and have to deliver png info graphics to a digital agency. The final dimension on the web for these graphics will be 950×416 px. After delivering all the graphics in multiple languages they want me to deliver the files in double the pixel dimensions because the ones I sent show artefacts?!? Does that even make sense and will the increased size make a difference? The website will be based on wordpress. I would highly appreciate your comment here.
Thanks!
The increased size will make a difference, yes. An image with double the dimensions will have a much larger file size, but it will show less artifacting, unless the compression was increased as well. Also, on high DPI devices, the higher resolution version can be loaded. Ideally, on lower DPI screens, a lower resolution version of the file is loaded as it’s pretty wasteful of filesize otherwise.
Awesome Information Sharing. It’s helpful to eceryone for the best image format for producing good quality photos, Whether in RAW or JPEG, losing them to corruption is a big loss. I use Stellar Repair for Photo – an efficient tool to repair corrupt photos of RAW, JPEG, and TIFF file formats shot.Thanks!
how about webp?