One problem with reducing your image’s file sizes to help improve your website’s performance is that modifications often reduce their quality.
But there are some tricks and techniques that let you format your images and still keep them pretty enough to proudly display them on your pages.
So let’s take a look at how to optimize images for web and performance. If you’re in a hurry, you can click on one of the links below and go straight to the solutions.
Check Out Our Video Guide to Optimizing Images for SEO
What is Image Optimization?
Large images slow down your web pages which creates a less than optimal user experience.
Optimizing images is the process of decreasing their file size, using either a plugin or script, which in turn speeds up the load time of the page. Lossy and lossless compression are two methods commonly used.
The Benefits of Formatting Your Images
First, why do you need to format your images? What are the benefits? There are numerous benefits of optimizing your images for performance. According to HTTP Archive, images make up on average 21% of a total webpage’s weight. So when it comes to optimizing your site, after video content, images are by far the first place you should start!
It’s more important than scripts and fonts. And ironically, a good image optimization workflow is one of the easiest things to implement, yet a lot of website owners overlook this.
Here is a look at the main benefits:
- It will improve your page loading speed (see our case study below for how much it affects your speed). If your page takes too long to load your visitors might get tired of waiting and move on to something else. For more information about optimizing your page loading time see our in-depth page speed optimization guide.
- Combined with a great SEO WordPress plugin it improves your SEO. Your site will rank higher in search engine results. Large files slow down your site and search engines hate slow sites. Google is also likely to crawl and index your images faster for Google image search. Curious about what percentage of your traffic comes from Google image search? You can use a Google Analytics WordPress plugin or segment to check Google image search traffic.
- Creating backups will be faster.
- Smaller image file sizes use less bandwidth. Networks and browsers will appreciate this.
- Requires less storage space on your server (this depends upon how many thumbnails you optimize)
As a Kinsta customer, you can benefit from image optimization for free by enabling automatic image optimization with just a few clicks. We’ll go into this more below.
How To Optimize Images for Web and Performance?
The primary goal of formatting your images is to find the balance between the lowest file size and an acceptable quality.
There is more than one way to perform almost all of these optimizations. One of the most popular ways is to simply compress them before uploading to WordPress. Usually, this can be done in a tool like Adobe Photoshop or Affinity Photo. Some of these tasks can also be performed using plugins, which we will go into more below.
The two primary things to consider are the file format and type of compression you use. By choosing the right combination of file format and compression type you can reduce your image size by as much as 5 times. You’ll have to experiment with each image or file format to see what works best.
1. Choose the Right File Format
Before you start modifying your images, make sure you’ve chosen the best file type. There are several types of files you can use:
- PNG – produces higher quality images, but also has a larger file size. Was created as a lossless image format, although it can also be lossy.
- JPEG – uses lossy and lossless optimization. You can adjust the quality level for a good balance of quality and file size.
- GIF – only uses 256 colors. It’s the best choice for animated images. It only uses lossless compression.
There are several others, such as JPEG XR and WebP, but they’re not universally supported by all browsers. Ideally, you should use JPEG or JPG for images with lots of color and PNG for simple images.
(Suggested reading: JPG vs JPEG: Understanding the Most Common Image File Format)
2. Understand Compression Quality vs Size
Here is an example of what can happen you compress an image too much. The first is using a very low compression rate, which results in the highest quality (but larger file size). The second is using a very high compression rate, which results in a very low-quality image (but smaller file size). Note: The original image untouched is 2.06 MB.
As you can see the first image above is 590 KB. That is pretty large for one photo! It is generally best if you can keep a webpage’s total weight under 1 or 2 MB in size. 590 KB would be a fourth of that already. The second image obviously looks horrible, but then it is only 68 KB. What you want to do is find a happy medium between your compression rate (quality) and the file size.
So we took the image again at a medium compression rate and as you can see below, the quality looks good now and the file size is 151 KB, which is acceptable for a high-resolution photo. This is almost 4x smaller than the original photo with low compression. Typically simpler images like PNGs should be under 100 KB or less for best performance.
3. Understand Lossy vs Lossless Optimization
It is also important to understand that there are two types of compression you can use: lossy and lossless.
Lossy: This is a filter that eliminates some of the data. This will degrade the image, so you’ll have to be careful of how much to reduce the image. The file size can be reduced by a large amount. You can use tools such as Adobe Photoshop, Affinity Photo, or other image editors to adjust the quality settings of an image. The example we used above is using lossy compression.
Lossless: This is a filter that compresses the data. This doesn’t reduce the quality but it will require the images to be uncompressed before they can be rendered. You can perform a lossless compression on your desktop using tools such as Photoshop, FileOptimizer, or ImageOptim.
It’s best to experiment with your compression techniques to see what works best for each image or format. If your tools have the option make sure you save the image for web. This is an option in many image editors and will give you the quality adjustments so you can perform optimal compression. You’ll lose some of the quality, so experiment to find the best balance you can without making the images ugly.
4. Use Image Optimization Tools and Programs
There are a lot of tools and programs out there, both premium and free, that you can use to optimize your images.
Some give you the tools to perform your own optimizations and others do the work for you. We are personally big fans of Affinity Photo, as it is cheap and gives you almost identical features to that of Adobe Photoshop.
Here are some additional tools and programs to check out:
- Adobe Photoshop
- Gimp
- Paint.NET
- GIFsicle
- JPEG Mini
- OptiPNG
- pngquant
- FileOptimizer
- ImageOptim
- Trimage
- ImageResize.org
- Kinsta’s Image Optimization feature
Don’t forget that your methods for serving images are just as important as file size. Many premium hosts like Kinsta implement a CDN to rapidly deliver images and other files to users. Kinsta’s free Cloudflare integration protects all sites on the platform, too, making it both fast and secure.
5. Resize Images to Scale
In the past it was very important that you upload images to scale and not let CSS resize them. However, this is no longer as important since WordPress 4.4 now supports responsive images (not scaled down by CSS).
Basically, WordPress automatically creates several sizes of each image uploaded to the media library. By including the available sizes of an image into a srcset attribute, browsers can now choose to download the most appropriate size and ignore the others. See an example of what your code actually looks like below.
So with more and more HiDPI displays nowadays, it can be good to find a happy medium. Say 2x or 3x your website’s column or div size, but still less than the original size. The browser will show the correct one based on the resolution of the device.
The WordPress media library creates thumbnails based on your settings. However, the original is still retained and untouched. If you want to resize your images and save disk space by not saving the original, you can use a free plugin like Imsanity.
Imsanity allows you to set a sanity limit so that all uploaded images will be constrained to a reasonable size which is still more than large enough for the needs of a typical website.
Imsanity hooks into WordPress immediately after the image upload, but before WordPress processing occurs. So WordPress behaves exactly the same in all ways, except it will be as if the contributor had scaled their image to a reasonable size before uploading.
Clean Your Media Library
If you are looking for a tool to save space while also cleaning up your media library, you could use Media Cleaner to find unused media files. The plugin will scan all your media files and list unused ones in the Media Cleaner Dashboard so you can browse through and delete them.
Media Cleaner implements a smart trashing system: when files are deleted, they are moved to a trash directory. That way, you are able to test your website for a while and make sure everything is fine. If a file or media entry is missing, you can easily restore it with a click or simply empty the trash if all looks good to you.
7 Image Optimization Plugins You Can Use
Thankfully, with WordPress, you don’t have to do all of the formatting or compression by hand. You can use plugins to do at least some of the work for you automatically.
There are several plugins that will automatically optimize your image files as you upload them. They’ll even optimize images that you’ve already uploaded. This is a handy feature – especially if you already have a website filled with images. Here’s a look at some of the best plugins to format your images for better performance.
It is important though that you don’t solely rely on the plugins themselves. For example, you shouldn’t be uploading 2 MB images to your WordPress media library. This can result in eating up your web host’s disk space really fast.
The best method is to quickly resize the image in a photo editing tool beforehand, and then upload it and use one of the following plugins to reduce it further.
Before committing to one of these tools or plugins, though, you should check to be sure that your web host provider doesn’t offer built-in tools to do the work for you. For example, Kinsta customers have access to a free Image Optimization feature that automatically creates optimized copies of all WordPress images, which are stored for free. The smaller of the two image files is then served up using Kinsta’s lightning-fast CDN to boost speed even further. Customers can even pick between lossless and lossy compression depending on their needs.
1. Imagify Image Optimizer
Imagify is created by the same team who developed WP Rocket, which most of you are probably familiar with. It is WooCommerce, NextGen Gallery, and WP Retina compatible. It also has a bulk optimization feature and you can choose between three different levels of compression, normal, aggressive, and ultra. It has a restore feature as well, so if you are unhappy with the quality you can one-click restore and re-compress at a level which better suits your needs. There is a free and a premium version. You are limited to a quota of 25 MB of images per month with a free account.
Getting rid of the original image and resizing your larger images can also be done with this plugin.
Imagify also compresses images on their third-party servers, not yours, which is very important when it comes to performance. Imagify shouldn’t slow down your WordPress site.
2. Optimole
Optimole is an image optimization WordPress plugin that automatically reduces your images’ size without any work required on your end. It has a big advantage when it comes to your site’s loading speed as it is entirely cloud-based and never serves images that are bigger than they should, aka it displays the perfect image size for the visitor’s viewport and browser.
Moreover, the plugin provides lazy loading and efficient image replacement – it downgrades the image quality if the visitor has a slower internet connection – which makes it stand out from the crowd. It also automatically detects the user’s browser and serves WebP if it’s supported.
All the images that Optimole compresses are served via a fast CDN. You can try Optimole for free or upgrade to the premium plan if you need extra bandwidth and processing space.
3. Optimus Image Optimizer
The Optimus WordPress Image Optimizer uses lossless compression to optimize your images. Lossless means you won’t see any quality loss. It supports WooCoomerce and multi-site and has a nice bulk optimization feature for those with already large existing media libraries. It also is compatible with the WP Retina WordPress plugin. There is a free and premium version. In the premium version you pay once annually and you can compress an unlimited amount of images. If you combine it with their Cache Enabler plugin you can also dive into WebP images, which is a new lightweight image format from Google.
4. WP Smush
WP Smush has both a free and premium version. It will reduce the hidden information from images to reduce the size without reducing quality. It will scan images and reduce them as you upload them to your site. It will also scan images that you’ve already uploaded and reduce those too. It will bulk smush up to 50 files at once. You can also manually smush if you want. It will smush JPEG, GIF, and PNG image types. File sizes are limited to 1MB.
- It’s compatible with some of the most popular media library plugins such as WP All Import and WPML.
- All image optimization is done with lossless compression techniques, keeping your image quality high.
- It doesn’t matter which directory you save your images in. Smush finds them and compresses them.
- Smush has an option to automatically set width and height for all images, so all of your images get resized to identical proportions.
5. TinyPNG (also compressed JPGs)
TinyPNG uses the TinyJPG and TinyPNG services (the free account lets you compress around 100 images per month) to optimize your JPG and PNG images. It will automatically compress new images and bulk compresses your existing images. It will convert CMYK to RBG to save space. It will compress JPEG images up to 60% and PNG images up to 80% without a visible loss in image quality. It does not have a file size limit.
6. ImageRecycle
The ImageRecyle plugin is an automatic image and PDF optimizer. This plugin focuses on not only image compression but PDFs as well. One really handy feature is the ability to set the minimum file size for compression. For example, if you have images that are 80 KB in size, you can have it automatically exclude them from compression. This ensures images and files are never compressed too much. It also includes bulk optimization and auto image resizing. Note: They have a free 15-day trial, but this is a premium service, and images are uploaded and compressed using their servers. They don’t charge per month, but rather by the total number of images compressed, starting at $10 for 10,000.
7. EWWW Image Optimizer
The EWWW Image Optimizer helps you make your images smaller and your site faster with less hassle. With no size limits and plenty of flexibility for advanced users, you can use the defaults or customize the plugin completely to your liking.
The free mode allows unlimited JPG compression and WebP conversion and is great for hobby sites or blogs that are just starting out. All EWWW IO users can use the Bulk Optimizer to compress their existing images or use the Media Library list mode to pick and choose specific images to compress. Additional folders can be scanned to make sure every single image on your site is properly optimized.
EWWW IO even allows you to convert your images into next-generation formats like WebP or find the best image format for an image with multi-format conversion options.
The premium Compress API allows you to take the compression to a whole new level without sacrificing quality and average savings of 50%. It also unlocks PDF compression and includes convenient 30-day image backups. With the optional Easy IO CDN, images are automatically compressed, scaled to fit the page and device size, lazy loaded, and converted to the next-gen WebP format.
Optimize Images for Web Case Study
We decided to do our own little case study and tests to show you just how much optimizing your images for the web can affect your WordPress site’s overall speed.
Uncompressed JPGs
We first uploaded 6 uncompressed JPGs, all of which were over 1 MB in size, to our test site. We then ran 5 tests through Pingdom and took the average. As you can see from the speed test below, our total load time was 1.55 seconds and the total page size was 14.7 MB.
Compressed JPGs
We then compressed the JPGs using the Imagify WordPress plugin, using the “aggressive setting.” We then ran 5 tests through Pingdom and took the average. As you can see from the speed test below, our total load time was reduced to 476 ms and the total page size was reduced to 2.9 MB. Our total load times were decreased by 54.88% and page size was decreased by 80.27%.
There is almost no other optimization you can make on your site that will get you over 50% decrease in load times. That is why image optimization is so important, the process above was all automated by the plugin. It’s a hands-off approach to a faster WordPress site.
The only other dramatic optimization you could make would be changing up your hosts. Many customers that move to Kinsta see over 45% speed increases. Imagine moving to Kinsta and optimizing your images!
By optimizing your images, whether it is using a photo editing tool or a WordPress plugin, you can also fix the “Optimize images” warning you get in Google PageSpeed Insights (as shown below.)
If you have other optimization warnings from speed test tools, make sure to check out our post on Google PageSpeed Insights and our in-depth Pingdom walkthrough.
We’ve taken our knowledge of effective website management at scale, and turned it into an ebook and video course. Click to download The Guide to Managing 60+ WordPress Sites!
Using SVGs: The Benefits You Need To Know
Another recommendation is to use SVG files alongside your other images. SVG is a scalable vector format which works great for logos, icons, text, and simple images. Here are a couple reasons why:
- SVGs are automatically scalable in both browsers and photo editing tools. This makes for a web and graphic designers dream!
- Google indexes SVGs, the same way it does PNGs and JPGs, so you don’t have to worry about SEO.
- SVGs are traditionally (not always) smaller in file size than PNGs or JPGs. This can result in faster load times.
Genki wrote a great article where he compares the size of SVG vs PNG vs JPEG. Below are a few takeaways from his testing in which he compared the three different image types.
JPG (optimized size: 81.4 KB)
JPG image
PNG (optimized size: 85.1 KB)
SVG (optimized size: 6.1 KB)
As you can see above, the SVG is a decrease in file size of 92.51% when compared to the JPG. And when compared to the PNG, 92.83%. Check out our tutorial on how to use SVGs on your WordPress site.
Best Practices for Optimizing Images for the Web
Here are some general best practices when it comes down to how to optimize images for web:
- If using a WordPress plugin, use one that compresses and optimizes images externally on their servers. This, in turn, reduces the load on your own site.
- Use vector images whenever possible alongside your PNGs and JPGs.
- Use a CDN to serve up your images fast to visitors across the globe.
- Remove unnecessary image data.
- Crop the white space and recreate it by using CSS to provide the padding.
- Use CSS3 effects as much as possible.
- Save your images in the proper dimensions. Although remember WordPress now supports responsive images to serve them up without resizing them with CSS.
- Always use .ico file format for your favicon.
- Use web fonts instead of placing text within images – they look better when scaled and take less space.
- Use raster images only for scenes with lots of shapes and details.
- Reduce the bit-depth to a smaller color palette.
- Use lossy compression where possible.
- Experiment to find the best settings for each format.
- Use GIF if you need animation. (but compress your animated GIFs)
- Use PNG if you need high detail and high resolutions.
- Use JPG for general photos and screenshots.
- Remove any unneeded image metadata.
- Automate the process as much as possible.
- In some cases, you might want to lazy load images for faster first-page render.
- Save images as “optimized for web” in tools such as Photoshop.
- Use WebP in Chrome to serve up in smaller images.
- Use Kinsta’s built-in Image Optimization feature
Once you’ve formatted your images for better performance and followed best practices, your site will be better liked by search engines, browsers, and networks, and will load faster for your readers. Oh, and make sure to check out our tutorial on hotlinking, to prevent people from stealing your images and bandwidth.
Have you formatted your images for better performance? Do you format them by hand, use a plugin, or both? Is there another tool or plugin you would recommend? Do you have something to add? Let us know about your techniques and best practices in the comments below!
Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.
Great list! Thank you! You forget to mention Imsanity, a must for client that want to upload 10MB+ images :D
No, they didn’t. Read the article again, perhaps?
Ops :) Missed it! Great!
Thanks David and Gary! We definitely included Imsanity. For those concerned with disk space or perhaps work with clients that upload large files, it’s definitely a great solution.
I absolutely loved this post! Was going to write something similar! Now i’ve got great inspiration! :)
Great write-up! Any love for Sirv.com/Cloudinary/ImgIx type of services? I’m always curious why they’re not mentioned in blog posts like these.
Let’s take Sirv as an example:
1. Automatic WebP serving to supported browsers. (All Blink based browsers (Chome, Opera, Chromium etc.) Firefox will add support for it soon hopefully). Others get served the original image.
2. “Optimal format”. Say you upload a 2.5mb PNG screenshot that can be turned into a 90kb JPG “losslessly”. Done automatically. Converting images, changing quality etc can be done by just appending special parameters to he image url. It’s done on the fly.
3. Responsive images generation. Automatic of course.
4. Lazy loading.
5. Image meta data is stripped by default.
6. CDN.
Having used these “image processing” services I really can’t imagine myself going back to the old way of doing things.
Another very solid image optimization service and plugin is ImageRecycle. https://wordpress.org/plugins/imagerecycle-pdf-image-compression/
Thanks Luke, we have now added ImageRecyle to the post.
Why GIF is the best choice for animated images? Why not mp4 or HTML animation? Typically MP4 (H.264 VBR) is smaller then GIF in few times, doesn’t have 256 color palette artifacts and is supported in all OS and browsers. HTML animation is also much smaller and can be interactive. Why GIF? I used GIF89a in 97-99 up to appearing if Flash. Should I back to GIF?
Hey Alexey… it isn’t that GIF is better. But for the standard users, GIFs are used a lot because of popular services such as GIPHY making them easily accessible to add humor to blog posts.
GIPHY, like most “GIF” sharing sites, actually serves more HTML5 videos than GIFs as they can be higher quality and smaller filesize, with an optional GIF fallback. If you upload a video clip to these sites, they will typically use an automated process to produce a gigantic fallback GIF (usually over 100MB in size). These aren’t great sites for GIF viewing, but they are very efficient sites for GIF-esque video.
MP4 isn’t an image format, it’s video. If your content is better represented using a video format, then yes use that. GIF is the only universally available image format that offers animation capability. Though in some cases you can get by with CSS animations (sprite-based PNG/JPG), or serving APNG to Chrome/Firefox and GIF to all else. Similarly most “GIF” sharing sites will attempt to use HTML5 video with a GIF fallback for browsers that don’t support HTML5 video.
Jpg is lossy and lossless? Gif is lossless? Umm ok…
If your input image is less than 257 colors, than a GIF is 100% lossless. So single color channel images (all pixels use the same hue value), or things like pixel art for video games. Of course, an 8-Bit PNG would also be lossless in this case and has better options for compression allowing it to produce a smaller image. There are versions of JPG that offer a “Lossless” mode, though it still throws away data in many cases due to the format’s color space and bit-depth restrictions. Same is true for lossless WebP. If you truly care about lossless, look into FLIF.
Great article! Just a tip, most image editor programs either come with a “save for web” option, or have 3rd party plugins that do that to drastically cut down on image file size. I used Infranview for many years not knowing a plugin exists for it for that purpose. Here’s a plug, but to compress a single image quickly online, Image Compressor Tool is a nice free service: http://tools.dynamicdrive.com/imageoptimizer/
Very informative review about image optimization. We created free web image optimizer Cheetaho. You can also use it as WP plugin https://wordpress.org/plugins/cheetaho-image-optimizer/
From SEO point of view it is really important to optimize images on website, as it can help reduce to the page load time and increases website performance. Great post, thanks for the sharing.
Does any of these plugins leave the colour profile untouched? When I set a colour profile in Photoshop and then optimise the image with a plugin, the profile is gone…
Best tool I’ve ever used for PNG compression is PNGGauntlet (https://pnggauntlet.com/). It’s a totally free desktop program that automatically runs images through several algorithms and gives insanely high compression ratios, completely lossless. I once used it to compress a library of six hundred 1920×1080 resolution images down from 1.7GB to 1.02GB – that’s a lossless 40% reduction in file size (https://www.reddit.com/r/halo/comments/545742/all_600_achievement_art_images_from_mcc_in_full/)
Beware, it takes a while to run the compression algorithms on each image, so you’ll want a beefy multi-core processor if you want large images to process in a timely manner.
Hello Sir, can i migrate my site – prtricks.in from godaddy hosting to Kinsta because i like kinsta so can you help me for migration system?? please
Hi Pardeep. Feel free to send our team a message and they can help you in the migration process. https://kinsta.com/contact-us/
Thank you for all the info you share in this post!
I have optimized my product images for a woocommerce store to be 1024×1024 PNG with an average file size of 11KB, I uploaded those files to woocommerce with a file name like “product-one-1024×1024.png”.
WooCommerce media settings are: Catalog=300x300px – Product=600x600px – Thumbnails=180x180px
Wordpress media settings are: Thumbnail=150x150px – Mid size=300x300px – Big size=1024x1024px
I tested my site with google pagespeed insights and it tells me that I need to optimize the images from my site, but the file names of the images google refer to are “product-one-1024×1024-768×768.png” and the file size of that image is 36KB (3,27 X bigger than the original file size, but image size smaller 768×768)
How to know where is this image generated?, because none of the setting is forcing to generate an image size of 768×768
And most important, how to solve it?
Thanks in advance
Wonderful post. Thank you for this sharing valuable information.
there is no information about image alt text..
Hey Sandy, for image alt text check out our SEO article: https://kinsta.com/blog/wordpress-seo/
Hey Brian, very helpful. I will be applying the above tips this week, as I really need to improve page speed.
Thanks,
Gary
Good article Brian but I’m surprised you equate minify with GZIP; they aren’t the same. Since images are already compressed, what’s the benefit in GZIPing them?
Hey Seán! That reference was from an earlier author/article that was never removed. I have updated the post above as there is no need to GZIP images. Thanks
Great article Brian.
Is there a tool for optimizing SVGs? I’m having a hard time finding a wordpress plugin that will optimize SVGs.
Hi Daniel,
There are a couple of plugins you can use please take a look at this guide https://kinsta.com/blog/wordpress-svg/
So what do you recommend the ideal image dimensions to be for a wordpress article? For example, if my content width is 650px, should I upload images as exactly 650px width or 1200px width or ?
I assumed 2x content width (1200px) would have benefits when displaying on high resolution displays, but I have no idea how images actually work on the web.
Furthermore, should you use the lowest sized acceptable version of that image that wordpress creates — in this case, selecting the “Large” version of the image which is usually around 1000px width — or should you use “Full Size” (in this case the full 1200px)?
png also uses lossy compression
We’ve updated the article. While PNG was originally created as a lossless image format, it’s true that it can also be lossy. Thanks!
Hey Brian, nice article, well described. You have just saved me. I was looking for something like this. I need to boost up my page and for that, I need to optimize my images. I was searching for some easy tips and ways. Thanks for sharing.
Hey Brian, great post. I will be applying the above tips this coming week, as I really need to improve my website speed.
Thanks
Hey Brian, amazing article!
You mentioned, “Use web fonts instead of placing text within images – they look better when scaled and take less space”.
Could you please elaborate as to how it can be achieved? I mean any plugin, or using some external tool or service?
Great article! What if we want to delete permanently an image we upload in the past, from the media gallery?
Do the multiple thumbnail sizes images created by WordPress, deleted permanently, as well, or not? And as a result, we need to delete them manually, or can we use a plugin related to that?
Great topic and nicely written. I coded a image optimizer for a php non-wordpress site but it only resizes the file type you upload and deletes the original afterwards. I would like it to convert the image into webp format as well. Do you happen to know of any that you recommend?
Term: image optimization for SEO
Comment:
First of all, thanks for the nice tips. I too believe, Alt Tag plays a most important role in SEO things because the search engine cannot read the image but it can read the text which is nothing but Alt Tag.…
Also, everyone should make sure to insert the title into the images by using HTML code for SEO purposes. The images can help site owners to increase traffic and also sales. I have used Picasa for image re-sizing and it has worked out great so far. After image compression, it creates an ability to reduce blog loading speed and I think it’s better for SEO as well.
I have to admit that I do concern myself with the keyword in the image, the image file size, and open graph. These Image SEO tips help me a lot to find images in a better way. I hope this might be useful for my blog.
Great article! you have covered everything about image SEO. Keep up the good work..!!
Really images are very important for websites. it works like blood on websites. but sometimes we face problem to resize images for better results and increase the speed of the website. I suggest imgpapa for image compression and resize images for websites. it gives best result in resolution and pixels, small size images with nice results accelerate the page loading.
Hi,
I have images that don’t scale down to fit the screen size when I view it on ipad or phone. Do you know the reason of this and how I can fix it?
Also with resizing, how do I know how large I should make the images? For example when I use a specific image in the sidebar or if i make a grid with images on my homepage how do i know the size of that and should i double it for retina?
Hey Thomas, you should check with a developer to ensure your theme makes use of
srcsetfor specifying alternative image sizes. For deciding on images sizes, I’d recommend looking into popular responsive web design breakpoints and using that as a foundation for deciding image sizes.Thanks for the normal and simple explanation. I made a few mistakes with my photo content on my site, but with the help of your explanations, I figured out exactly what I needed to do. Thank you!
The following could also be very important attributes
1) Prefer to use JPEG. The size is always optimized as compared to PNG
2) If there is a need to use PNG then a bit depth of 8 bits should be sufficient.
3) To automate the process of JPEG compression multiple methodology can be used. For e.g. SSIM, PSNR comparison
Brian,
Great post. I’m not going to lie; I am a Fastly guy, but I love Cloudflare too.
I think this new tool by WEB Dev would be helpful to add or for people to help make images smaller and sites faster.
https://images.tooling.report/
I hope you are doing well, my friend
Hi,
While I agree most of your tips and observation, I also feel nowadays with different platforms and ready-made options, it’s imperative to have image optimization already inbuilt. ( Although I have my own reservation about automation).