So, you’ve got a cellphone with a megapixel camera and a wi-fi connection, and you’re uploading images directly to your web site – what could possibly go wrong?! Shane Bishop, founder of EWWW Image Optimizer explains why even in these days of high-speed internet connections and hosting plans with unlimited storage and bandwidth, it is still important to take the extra step of optimizing your images.
Please tell me about your background before founding EWWW Image Optimizer
After graduating from college, I moved back to my hometown in Montana and worked as the IT director for a local community college. On the side, I was doing website consulting for some friends and family and looking for a solution to compress images to make their WordPress websites load faster. This was probably about seven years ago when there wasn’t really anything for image optimization except the old and almost defunct Yahoo smush API and one other plugin that needed server access.
Since I was doing shared hosting with Bluehost, I didn’t have that required root (full administrative privileges) access to the web server, so I forked the CW Image Optimizer and rewrote it to work with shared hosting. That was the first release of the EWWW Image Optimizer.
You know I have to ask why the name “EWWW” Image Optimizer?
(Laughter) The business name I came up with while I was doing web consulting was Exactly WWW – not super original. But then I realized that EWWW as in “EWWW, your images are gross, huge and bloated,” was kind of funny, so I just ran with it!
Why image optimization?
What we’re seeing is people uploading images directly from their phone or camera onto their sites. This means that with the newer cameras, they’re placing poster-sized, 12-megapixel images on their site – images which most people are going to be viewing on their small phone screens. Even on my nice 1080-pixel computer screen, I don’t need poster size images. So, the first part of it is that the dimensions are just way too large for a webpage.
The other part is a little bit trickier. Aside from poster-sized image files being unnecessarily heavy, they also have a lot more detail than what can be displayed on the average computer monitor. That gives you leeway to do a lot of compressing in the JPEG format without any noticeable loss of image quality. For example, you could take an image that is 8 MBs (which is almost three times larger than the average website all by itself!) and easily compress that down to under 1MB.
Now, although compression reduces the weight of the image file, it has not changed the image size, and the dimensions of that 1 MB image are still going to be too large. Therefore, we take that extra step of resizing it down to the appropriate height and width for the page.
So those are the two main functions of image optimization; compressing the file size by getting rid of a little bit of quality that will never be noticed on screen and then resizing it.
An analogy I like to use is packing for a trip. If you just dump all the clothes from your drawers into a suitcase, it won’t be very efficient because you’ll be taking a ton of stuff you don’t need. But if you go through the clothing, discard what is unnecessary and repack properly, you could probably fit it all in a suitcase half that size and not pay so much at the airline! Image compression is like that – repacking the data into a more efficient container or suitcase.
What are the advantages of using compressed images on a site?
When images are optimized, your site loads faster, making your website a better experience for your visitors, resulting in more conversions, sales, or newsletter signups.
It can also be advantageous for SEO rankings as Google says speed matters.
How does EWWW Image Optimizer work?
That’s a big question! There’s the traditional method which essentially combs through all the images on your site, compresses them, and resaves them directly on your server. This can be done either by using the free tools bundled with our plugin or with our premium compression API which sends the images to our server where it does all the magic and then returns the compressed versions to the original server. Since the optimized images replace the original images on the server, you never have to update any URLs or worry about broken links.
In the last couple of years, there’s been a lot more traction on the newer method of sending your images through a CDN to be optimized. It’s something that CloudFlare and a couple of other CDNs do to some extent, but there weren’t any good integrations with WordPress except the one in Jetpack. Our CDN, ExactDN, copies images to our server where it compresses, resizes, crops, scales, and if necessary, converts them to Google’s next generation WebP format. This way, all the original images stay on your server, safe and secure, while the optimized versions are stored on our CDN servers. You still don’t have to worry about broken links because our code automatically changes the image link URLs to point to the optimized version at our CDN.
Of course, that takes time, so we cache everything. This way, it only needs to be done once, and all the images on that site are optimized forever and ever. I know it sounds kind of complicated, but it’s actually super simple – a one-click deal and bam! all your site’s images are optimized.
How do I know which version of EWWW IO is best for me?
The main thing to look at when making that determination is if the amount of storage included with your hosting plan is an issue. Someone with a 10 GB hosting plan whose images are consuming 9GB would be concerned about the possibility of running out of space. With the API solution, they can compress their images directly on the server and get that down to maybe just 3 GB, so that’s absolutely a reason to choose the API over the CDN.
Otherwise, they pretty much have the same compression. Technically, the compression on the API is slightly higher because you’ve got up to 30 seconds, sometimes more depending on the hosting environment, to compress a single image. We don’t use that super high compression on the CDN because everything has got to be done almost instantaneously on the fly. The average compression for ExactDN is 45% as compared to a 55% compression using the API, so it’s really just a small difference.
Which file formats are supported in EWWW?
I talk about JPEG the most since that is the most common web format, but we also support the other two traditional formats of PNG and GIF.
PDF compression is only supported in the Compression API that uses the original mode of compressing and replacing directly on the server. We don’t offer that feature in ExactDN because PDFs are such large files and compressing them on the fly is really, really slow and inefficient.
One huge feature supported in both versions is the ability to convert JPEG, GIF, and PNG images to Google’s new WebP format. However, ExactDN does a way easier job of it because of its built-in switch to automatically convert images to WebP.
What is Google’s new WebP format and its advantages?
Sure, WebP is Google’s next-gen image format that is essentially intended as a full-blown replacement for every other image format. It has all the bells and whistles such as animation and transparency while offering better compression on average than even JPEG.
I feel that the JPEG format has kind of hit its peak, and while there’s still a lot we can still do with it, WebP will save you an additional five to ten percent compared to your typical lossy compression. I think that’s just kind of a natural evolution of technology and people just getting smarter and figuring out better ways to compress pictures.
It’s a big win because we want our web sites to look good and load quickly. Not sacrificing quality for speed has always been my thing!
Different types of compression methods are more suitable for different types of images. How can a single format like WebP be the best solution for all image types?
It’s almost like those different formats are built into WebP, but they’re not actually formats, they’re more like attributes. So, it has a lossy mode, the JPEG style compression which is more suitable for photographs and a lossless mode, the PNG style compression more suitable for text, illustrations and other flat color images that need to maintain sharpness. So WebP really excels in that area.
Nevertheless, within the past year, major browsers such as Firefox and Edge have initiated support for WebP. At present, it remains uncertain whether they have incorporated support for WebP animations. This area is still emerging, but there is a strong likelihood that we will soon begin the transition of converting animated GIFs to the WebP format.
What is Lazy Loading and how does it help with optimization?
Lazy Loading is a technique that prevents images from being loaded until they are on (or near) the screen. The first benefit is preventing wasted bandwidth for images that the visitor never looks at, which can be especially important for mobile users. Secondly, since images are often the biggest portion of a website’s size/payload, lazy loading those images will make the page load much faster.
With ExactDN, the added benefit of the lazy loader is that it can dynamically scale the images to your visitor’s screen size.
Gail is a Technical Editor and Interviewer for Website Planet. Her first PC was a TRS-80 which required a cassette tape to boot up. Producing websites, emails, and banners combines her love for design, technology, and of course, writing.
Thank you, - your comment was submitted successfully!
We check all user comments within 48 hours to make sure they are from real people like you. We're glad you found this article useful - we would appreciate it if you let more people know about it.
Share this blog post with friends and co-workers right now:
Thank you, , your comment was submitted successfully!
We check all comments within 48 hours to make sure they're from real users like you. In the meantime, you can share your comment with others to let more people know what you think.
Thank you for signing up!
Once a month you will receive interesting, insightful tips, tricks, and advice to improve your website performance and reach your digital marketing goals!
