I work at an agency as a website designer and project manager. We provided ongoing SEO services, so our SEO team is always battling to get our Core Web Vitals and site speed as optimized as possible. Many of our websites are updated frequently by clients themselves or junior team members. We’ve gotten into a pretty good rhythm with WP Rocket and Imagify, however as a designer, the degraded image quality from the compression plugin is killing me. The images look so pixelated/artifact-heavy, I feel it’s hurting the perceived quality of our clients.
I wanted to see if anyone’s had success with a revised process that gets passing CWV scores without the need to sacrifice quality so much?
Most recommendations I see are to manually optimize ONLY as much as necessary, and upload to the website, but with other teams working on the websites, this isn’t a good option for our sites.
Examples: [https://www.atlanta2020.com/]), [http://4starservices.com/])
[ad_2]
“manually optimize ONLY as much as necessary, and upload to the website”
Do this?
Otherwise find a better image optimisation plugin that gives you a better quality to performance ratio. Smush is pretty good. Manually saving as webp is also an option.
I would suggest you give it a try to [shortpixel.com]) instead of Imagify
Also try this caching plugin and see how it works for you
You could try converting images to AVIF or WebP format.
That’s why I don’t let clients edit their images. For optimal image quality, you make a 2x crop of the display size. If it’s displayed on the screen at 400×400 wide you make a crop of that image 800×800 pixels, convert to webp, and then compress. You won’t lose quality. It will look good. That’s how you optimize your images, plugins can only do so much and it seems like you’re are doing TOO much. If clients want to edit their images, don’t let them touch images on the home page. Make a gallery page they can update and add more images of their work. See if you can have one of your devs create a script or find a plug-in for that page to reduce whatever image the client uploads to a width of 1000px maximum and auto height, then convert to webp, then compress it. This will minimize the impact of them uploading images to the site. If SEO is important, don’t let the client touch the home page. They will always fuck it up someway. Or at least educate them on what NOT to do because it will impact their site in X ways and why.
Your pagespeed score is also asking to defer offscreen images. You need to lazy load your images below the fold. If you have access to the code add loading=“lazy” on every image below the fold. Also, add decoding=“async” on every single image for better loading.
If you’re not already doing it, use the preload tag in the head and add preloads for all images needed on the screen when the site loads, same for fonts. Locally host your fonts. Don’t use google cdn. Locally host them, subset them, and preload them. I use this to do it
And all your images are missing proper height and width attributes. Get those added.
What level are they compressing to in imagify? if they are picking the max by default then you will always get a crappy looking but tiny file sized image.
The page speed analyzers will always tell you you can optimize the image more but you got to look at the gains and differences and weigh them against display quality….
It will never work the way you want, a hi-res for a low-res size… finding that sweet spot setting on your compressor is what will take a little trial and error.
Also serve them in a <picture> tag with nextGen formats, this will get you the closest to that hi-res look for a low-res size…