Media Chat

In the regular #core-images chat this Friday, 15 April, 19:00 UTC we are planning to discuss enhancements for 4.6. So far there are four items on the agenda:

  • We are planning to add responsive images to the editor and discuss different implementation methods, e.g. saving srcset and sizes attributes to the database versus generating them on the front end. See #36475.
  • The makers of TinyMCE recently released JavaScript image tools for editing images in the browser which could replace the current server based image editor. The new editor would be quite faster, allowing you to edit and resize images before uploading them, and it would be easier to include in other scripts. This may well be a feature project over a few releases.
  • PDF preview images. See #31050.
  • Continue to improve mixed content issues on HTTPS sites. See #34945.

If you have more ideas or tickets to discuss regarding media, please join us or leave a comment here. 🙂

#4-6, #image-editor, #images, #media, #respimg

Proposal: Increase the default image compression in WordPress

Note: This proposal was merged to core in [36615]. Download the latest nightly build and give it a try!

In order to improve page load performance, I propose that the default image compression setting be changed from 90 to 82 in WordPress. Let’s get into why.

Background

The default quality setting for resized images in WordPress has been 90 since the image_resize() function was shipped in version 2.5. This setting creates images with much larger file sizes than recommended by modern web best practices.

Over the past several years, the importance of performance has been highlighted as users access the web globally on slower connections, and performance has even started being used by search engines to influence search results.

Tools like Google PageSpeed Insights and WebPagetest will warn site owners if images aren’t sufficiently compressed. For example, the glossary at the bottom of the WebPagetest performance optimization page states:

Within 10% of a photoshop quality 50 will pass, up to 50% larger will warn and anything larger than that will fail. The overall score is the percentage of image bytes that can be saved by re-compressing the images.

Research

With this in mind, web developer and performance advocate Dave Newton published recommendations for ImageMagick compression settings based on his research comparing various ImageMagick settings against Photoshop’s ‘high quality’ (60) setting for JPEGs. He found that an Imagick compression setting of 82 was closest to this using an objective measurement named DSSIM to compare the visual similarity between two images.

We experimented with Dave’s settings in the RICG Responsive Images plugin during the 4.3 cycle and found that not all Dave’s suggestions can be easily applied by default in WordPress due to the memory required to process large images on shared hosts. However, changing the default image quality setting is a relatively small change that makes a big impact on file size without sacrificing much in the way of perceived image quality.

In research released in 2014, compressed images with a DSSIM score of 0.015 were deemed acceptable to most people. In tests of several different images, I found that changing the default compression setting in WP_Image_Editor from 90 to 82 reduced image sizes by an average of ~25% with DSSIM scores ranging from 0.0014 to 0.0019 for ImageMagick and 0.0019 to 0.0023 for GD — both of which are drastically under the 0.015 threshold cited above.

Proposal

Given these results, I suggest making the change to 82 for the default image compression setting. You can follow the discussion on the related ticket (33642) and give feedback in the comments or in the #core-images channel on Slack.

As a reminder, this setting only applies to the intermediate sizes that WordPress creates, and not the original files uploaded by users. For any users who need to maintain a higher image quality for intermediate sizes, the default quality can still be changed with the wp_editor_set_quality filter.

#image-editor, #images, #media, #performance

Today in the Nightly: Site Icons, Text editor in Press This

Here are a few cool things that recently landed in trunk. They are available right now in the nightly build. Install the nightly, and try them out.

Site Icons

We’ve wanted site icons in core for a long time. #16434 was opened four years ago and will be resolved as fixed for 4.3.

 

Our crop controls are not easy to use on my iPhone 6+. The images overflow the right side of the screen. Horizontally and vertically scrolling an image bigger than the screen while working a rubber band select that resets when the image is tapped is not pleasant.

Provide feedback on #16434 or on this post.

See these visual records for more screenshots and flow storyboards.

Text editor in Press This

Press This now has a Text editor for editing HTML, just like the standard editor in post-new.php.

32706.1-wide

Provide feedback on #32706, in #core-pressthis, or on this post.

 Padding for image settings

The Image Crop and Thumbnail Settings boxes received a little bottom padding.

And so that we are always aware of what our mobile experience looks like, here are those settings boxes on an iPhone 6+.

When you see a sidebar obscuring content on a phone, you can be pretty sure you’re witnessing lingering desktop bias. These screens were designed for desktops where you have room to use  sidebars. You can’t make a screen responsive and call it ready for a phone. The image flow effort is working on this.

Provide feedback on #31845 or on this post.

Manage in the Customizer

Appearance > Menus received a “Manage in the Customizer” button to match Appearance > Widgets.

Screen Shot 2015-06-30 at 3.16.57 PM

Next, fix up mobile.

image

Provide feedback on #32808 or on this post.

 

Previously: Today in the Nightly: Inline link toolbar and Press This split button

#4-3, #customize, #editor, #image-editor, #menus, #press-this, #site-icons, #today-in-the-nightly