That’s right. WordPress undoes your manual image optimization efforts. We use an offline image processor like Gimp or Photoshop for manual image production and optimization.

Few discover this hidden truth about WordPress automated image editing. It’s has an odd and strange ability to increase image files size slowing down speed. It only occurs if you use their photo editor to crop images. When it asks you to crop – “skip” it. That’s usually a better choice if the image is already sized. Uploaded originals are untouched when placed in the media library – unless you resize or crop such as an image thumbnail. Then things grow. Why? Who knows? WordPress looks the other way about this unreported speed problem.

Plainly, this upsizing strangeness isn’t a problem for most site owners or visitors. They don’t care. Otherwise, there would be millions screaming for a bug fix.

When you upload an image to the media library, WordPress core builds many mobile-size images for swapping on the fly. This is an attempt at a responsive mobile speed solution.

You as a site owner care more about image quality than the majority of your site users do. Image quality is way down the visitor-frustration list. Not significant. The number one complaint is slow loading pages being “the worst experience of a user’s day.”

Is Retina screen resolution important? There’s almost 1 billion active users of iPhone. And there are an estimated 300 million second-hand iPhone in use.

Retina display is a marketing term invented by Apple. Their primary goal is reducing eye strain when users read small type. Not improving image quality – a fortunate byproduct. It’s all about font-type readability.

There exist circumstances where images must be uncompromising. One is on portfolio sites. The other is with photography showing important product details. Both are instances where you’re selling something that depends upon good image representation. Images then are more important for buyer decision making. Product photo quality affects web profits. In all other cases, users aren’t discerning or are forgiving. They’d rather you build for speed and compromise in the image quality department.

Are you selling something on your site?

If you’re not selling, visitors only need to recognize what the color blob is. That is it. The caption is more important to users than photo quality. But often site owners neglect to use captions for better communications.

Building for Retina images is an exercise in futility.

When you *must* build for high-resolution Retina displays, there’s a superior way. Please read the article linked below. Remember to keep web goals in perspective. Some things don’t matter. Most web browsing today is on mobile devices. But mobile visitor expectation is low in many regards for type-font and image design. That doesn’t mean you’re justified in delivering garbage. But major image effort often has a puny return on investment.

We recommend WP Retina 2X plugin. Try it. Test it. But only if Retina-screen compliance is critical.

This novel plugin creates many new alternate high-resolution versions of your images. Another plugin feature is automatic detection of Retina displays. It then loads the high-resolution version of an image rather than the regular one.

WP Retina 2x serves up src-set images which pull smaller sized images off the server – and theoretically decrease bandwidth. – Ian Rance

So there’s lots of variable screen sizes. Big deal. Retina-image preparation does NOT have widespread adoption by web designers or developers. It’s perceived a production annoyance (or non-feature) delaying site launch.

These three offsite links below may help you make decisions. You have a design choice. You can workaround or ignore Apple-mandated techno-specs. We won’t tell.

https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions

http://screensiz.es/phone

For PagePipe’s site, the strategy is not using photography for large headers. We use custom illustrations for reduced load-time speed. That means using 8-bit GIF and PNG with 2,000×1200 pixel images with reduced color palettes. Those files weigh just over 21 kilobytes.

Where we use featured JPEGs, they weigh under 200 kilobytes. It’s fortunate the big “hero” image is lazy loaded by the default theme.

But the fastest sites on earth have no images. Only a small number of site owners make that choice (about 6.8 percent).

PagePipe screengrabs are JPEGs. They’re optimized harder than WordPress recommends. WordPress saves images at a compression of 82 – which is the equal to a Photoshop 50. Why is this important? It makes the images pass the WebPagetest.org criteria – a real speed test owned by Google. It’s most used by professional performance engineers. Not Google PageSpeed Insights for commoners. PageSpeed insights doesn’t even measure page speed in milliseconds. It only produces a weird score. They let you kill yourself for a meaningless 100 A+ while your site still remains a slug.

pagepipe.com/quality-82-image-compression-change-for-wordpress/

We build all JPEG images to screen dimensions. We optimize offline with a 70-quality setting (or more when we can). We use free GIMP image processor. We avoid cropping online with WordPress. We save-for-web our 8-bit PNGs and GIFs with reduced color palettes.

We’ve only had one client request Retina-quality images. That’s Steve’s brother, Brad Teare. High-end art galleries using fiber-optic connections were his target market. Speed was a nonissue. But we built the portfolio for both large screen and small screen,  just in case. The galleries asked how he pulled it off. A great compliment. People’s curiosity sparks a speed question, “How did you do that cool magic trick?”

When we have a choice, we choose ignoring Retina specifications. And Retina’s been around for awhile. We may change our policy in the future. But we doubt it.

An unconventional optimization example.

The PagePipe “Start Here” page used to contain an animated GIF. It isn’t built to the recommended spec of 2000×1200 pixel dimension. Instead, it’s 1132×697 pixels. We let the browser stretch with math and mess with this image. This is bad practice. Dimension recalculation causes small speed delays. So why do it? Because not doing so would produce an even worse super-slow page. Abandoned by users clicking the back button.

We also ran the animated GIF through an online compressor squeezing it’s file size way down. This introduced tons of noise and artifacts into the animation. Do we care? No. Because it’s good enough for average users. It’s noticed by inspector-type personalities. But 80 percent of visitors (or more) are oblivious and unaware of best design practices.

Being perfect in-every-way has too high of cost in time and money. “How good is good enough” is a hard judgment call. Relax your tolerances and standard so you can work on what counts most.

RELATED PAGEPIPE ARTICLES

• pagepipe.com/your-guide-to-image-speed-optimization-on-mobile/
• pagepipe.com/using-image-optimizer-web-utilities-for-improved-speed/
• pagepipe.com/quality-82-image-compression-change-for-wordpress/
• pagepipe.com/the-fastest-alternatives-to-heavy-jpeg-images-for-page-speed/
• pagepipe.com/the-problem-with-large-hero-images-for-mobile/