You can get started with this right away even if you just started blogging.<\/p>\n\n\n\n
By choosing the right file formats and\/or compressing your images before uploading, you will be grabbing a lot of the low-hanging fruit of image optimization.<\/p>\n\n\n\n
Firstly, it’s essential to use the right file formats. Most of the time that will be JPEG but occasionally that may be PNG.<\/p>\n\n\n\n
- \n
- JPEG <\/strong>is perfect for photos or complex illustrations with lots of detail<\/li>\n\n\n\n
- PNG <\/strong>is usually better for basic illustrations (simple shapes\/colors), logos, or type<\/li>\n<\/ul>\n\n\n\n
Don’t use PNG for photos or you might end up with a file 10X bigger than it needs to be.<\/p>\n\n\n\n
When saving your JPEG files in your image app, you’re typically presented with a quality slider with values ranging from 0 to 10. Don’t set the quality to maximum! <\/strong>Choose something like 6 for a decent balance between image quality and file size. <\/p>\n\n\n\n
JPEG is a ‘lossy’ file format which means that the image will visibly degrade the more you compress it. You can try setting a JPEG to quality 1 or 2 and you’ll surely see the image become much less sharp and have lots of small swirlies in it where the data gets corrupted. <\/p>\n\n\n\n
Sometimes it’s okay to go to a quality setting as low as 4 (if you’re image is only used as a background for example) but 6 or 7 is best for any photos that will be front and center.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/02\/jpegmini.jpg\")
<\/figure>\n\n\n\nAnother way of saving JPEGs at the right quality level is using an app like JPEGmini<\/a>. It automatically chooses the setting for your photos\/images at just the right level where it doesn’t degrade quality in a noticeable way.<\/p>\n\n\n\n
I used this for many years as it’s a quick and easy way to compress your JPEGs. You can drag files into the app and they’ll be instantly compressed. <\/p>\n\n\n\n
JPEGmini also has a Lightroom plugin that lets you apply it to photos when exporting from Adobe Lightroom. That’s super handy if you’re a photographer.<\/p>\n\n\n\n
Option B: Use a WordPress plugin<\/h2>\n\n\n\n
This option will burden your WordPress site with an extra plugin and it will make image uploads a little bit slower, but the advantage is that you can install it once and then forget about it.<\/p>\n\n\n\n
Smush<\/a> is a popular image optimization plugin that I’ve used on my blog as well. It can process all your image files and make them a fair bit smaller without noticeable quality loss. <\/p>\n\n\n\n
Smush normally does this whenever you upload new images, but you can also tell it to go through your existing image library to optimize it.<\/p>\n\n\n\n
It’s a free plugin but there’s also a Pro version with extra features.<\/p>\n\n\n\n
I’ve had the Pro version for a while as it enables the option of using the webp format<\/strong>. This is a file format that’s newer than JPEG and PNG and that results in smaller files. Google Sitespeed reports will recommend you to use webp if you’re not. The one tricky bit with webp though is that older browsers don’t support it, so you always have to have both webp and jpeg\/png versions of images at the same time. Smush can take care of this automatically, only showing webp versions on browsers that can handle it. <\/p>\n\n\n\n
Option C: Optimize images in the cloud<\/h2>\n\n\n\n
This is a more advanced option <\/strong>as you’ll need to set up Cloudflare<\/a>, which does get quite technical (and the setup of it is best outsourced if you’re not familiar with the details). <\/p>\n\n\n\n
But I also think it’s the best option for reasons I will explain.<\/p>\n\n\n\n
What’s Cloudflare?<\/strong> It’s a suite of tools that sits between your blog’s hosting server and the internet. So if a user requests to see your blog, the request will first pass through Cloudflare. Among the solutions that come with Cloudflare are protection against spam\/attacks, image optimization, SSL encryption, and other site optimizations.<\/p>\n\n\n\n
Cloudflare includes a service called Cloudflare Polish <\/strong>that does essentially what Smush Pro does: it automatically compresses images so their file size is smaller. Except it does it without needing a WordPress plugin. Everything is done on Cloudflare’s server. <\/p>\n\n\n\n
But more than that, it has an automatic service called Cloudflare<\/strong> Mirage<\/strong>. This makes numerous versions of every image so that it can dynamically serve the best version depending on the user’s connection and device type. <\/p>\n\n\n\n
For example, if the user is on a phone and has a poor internet connection, Mirage will automatically serve a more compressed or lower-resolution version. This user is not looking at the page on a widescreen desktop monitor anyway, so they don’t need the best-quality version.<\/p>\n\n\n\n
For example, if you have a 1000px by 1000px image that you’re only displaying at 100px by 100px, then Mirage will create a new copy of the image at that exact size, and it will be served up to the right users automatically. Mirage is especially a huge boost for mobile, making your blog faster on mobile devices.<\/p>\n\n\n\n
Moreover, Cloudflare can automatically generate WebP and AVIF<\/strong> versions<\/strong> of your images. These are much newer file types than PNG or JPEG and so their file sizes can be much smaller. Not all browsers support these file types yet, but Cloudflare can automatically detect if they do, and then serve up either an AVIF, a Webp, or just the JPEG or PNG that you uploaded. <\/p>\n\n\n\n
(Smush also supports WebP, but it doesn’t support AVIF, which is the latest standard.)<\/em><\/p>\n\n\n\n
The final piece of the puzzle is Cloudflare’s CDN<\/strong> or content delivery network. Normally, your blog’s images will be loaded from wherever your web hosting server is located — say, New York. That’s great if your user is in New York, but less so if they’re in Sydney. <\/p>\n\n\n\n
A CDN will keep copies of files (like images) in various server locations around the world so that the user is automatically served these files from the location nearest to them. It uses a caching system, so that files that don’t change often (like static blog posts) are served up faster.<\/p>\n\n\n\n
Since all these services work seamlessly together in one suite, I think Cloudflare is the perfect solution for image size and site speed enhancements. <\/strong><\/p>\n\n\n\n
Cloudflare is honestly overkill for a new blog. But if you get at least hundreds or thousands of visitors per day, I think it’s highly worth it. <\/p>\n\n\n\n
To get Cloudflare’s image optimization, you need at least the Pro version of Cloudflare which costs $20\/month. However, my website is hosted with Cloudways<\/a>, which offers its customers the Enterprise version of Cloudflare for just $5\/month, which is a crazy good deal. Similar deals are offered by other hosts such as Big Scoots.<\/p>\n\n\n\n
Once I realized I could have all of Cloudflare’s features at this price, for less <\/em>than Smush Pro costs per month, I decided to switch over completely. And it’s already made a noticeable difference in my Google PageSpeed scores.<\/p>\n\n\n\n
\n\n\n\nSo there you have it, three ways to keep your images nice and optimized. <\/p>\n\n\n\n
If you’ve only just begun blogging, the most important things you can do are using the correct file formats (JPEG or PNG), not using image dimensions that are way too large for your page, and not using the highest quality settings when saving JPEGs. <\/p>\n\n\n\n
When you’ve been blogging for a while, you can consider optimizing things a bit further, such as with cloud solutions like Cloudflare, which may help you get that perfect score in Google PageSpeed Insights.<\/p>\n","protected":false},"excerpt":{"rendered":"
One of the most important technical health aspects of your blog is to ensure your image file sizes are never bigger than they should be. Overly big image files means slow blog. And slow blog means worse rankings on Google. It also generally just helps the user experience when pages load fast and images appear … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2181,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","footnotes":""},"categories":[18],"tags":[],"uagb_featured_image_src":{"full":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/02\/jpegmini.jpg",1024,529,false],"thumbnail":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/02\/jpegmini-150x150.jpg",150,150,true],"medium":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/02\/jpegmini-300x155.jpg",300,155,true],"medium_large":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/02\/jpegmini-768x397.jpg",768,397,true],"large":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/02\/jpegmini.jpg",1024,529,false],"1536x1536":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/02\/jpegmini.jpg",1024,529,false],"2048x2048":["https:\/\/www.boostyourblog.com\/wp-content\/uploads\/2023\/02\/jpegmini.jpg",1024,529,false]},"uagb_author_info":{"display_name":"Marek","author_link":"https:\/\/www.boostyourblog.com\/author\/marek\/"},"uagb_comment_info":1,"uagb_excerpt":"One of the most important technical health aspects of your blog is to ensure your image file sizes are never bigger than they should be. Overly big image files means slow blog. And slow blog means worse rankings on Google. It also generally just helps the user experience when pages load fast and images appear…","_links":{"self":[{"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/posts\/1792"}],"collection":[{"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/comments?post=1792"}],"version-history":[{"count":56,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/posts\/1792\/revisions"}],"predecessor-version":[{"id":2239,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/posts\/1792\/revisions\/2239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/media\/2181"}],"wp:attachment":[{"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/media?parent=1792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/categories?post=1792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boostyourblog.com\/wp-json\/wp\/v2\/tags?post=1792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- PNG <\/strong>is usually better for basic illustrations (simple shapes\/colors), logos, or type<\/li>\n<\/ul>\n\n\n\n