WordPress.org

Make WordPress Core

Opened 18 months ago

Last modified 3 weeks ago

#23292 new defect (bug)

Media uploader loads full size image and slows down, please change to thumbnails.

Reported by: mnrtjeR Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 3.5
Component: Media Keywords: has-patch 4.0-early
Focuses: javascript Cc:

Description (last modified by SergeyBiryukov)

The media uploader is really slow if you upload 1024 x 768 images, the reason for this is that the preview shows full size images.

Underneath here is a quick fix to speed up the media uploader to thumbnails.
Please change line 1333 in "wp-includes/media.php" from:

$attachment_url = wp_get_attachment_url( $attachment->ID );

to:

$attachment_url = wp_get_attachment_thumb_url($attachment->ID );

Attachments (2)

23292.diff (526 bytes) - added by DrewAPicture 12 months ago.
filter
23292.2.diff (1.4 KB) - added by wonderboymusic 4 months ago.

Download all attachments as: .zip

Change History (25)

comment:1 SergeyBiryukov18 months ago

  • Component changed from General to Media
  • Description modified (diff)
  • Keywords has-patch removed

comment:3 ocean9012 months ago

#24754 was marked as a duplicate.

comment:4 MDesigner012 months ago

This ticket was opened 6 months ago. With the fix being such a simple one, I'm surprised it's not in 3.5.2.

DrewAPicture12 months ago

filter

comment:5 follow-up: MDesigner012 months ago

I hate to say it, but that patch does not work. Nor does the original ticket submitter's fix. Of course, I'm in 3.5.1, does that make a difference? That line of code is on 1333 for me, not 1604.

comment:6 in reply to: ↑ 5 DrewAPicture12 months ago

  • Keywords has-patch added; needs-testing removed

Rather than switching from one size to another (which doesn't provide any more flexibility than we already have), 23292.diff adds a filter to $attachment_url. More flexibility for different use cases.

For example, with the filter, something like this could be used:

function filter_prepared_attachment_size( $url, $attachment ) {
	return wp_get_attachment_thumb_url( $attachment->ID );
}
add_filter( 'wp_prepare_attachment_url', 'filter_prepared_attachment_size', 10, 2 );

Replying to MDesigner0:

I hate to say it, but that patch does not work. Nor does the original ticket submitter's fix. Of course, I'm in 3.5.1, does that make a difference? That line of code is on 1333 for me, not 1604.

Patches here are against latest trunk which is 3.6 RC1.

Version 0, edited 12 months ago by DrewAPicture (next)

comment:7 MDesigner012 months ago

Ah! Good to know. Hope 3.6 is out soon. If my wife's MacBook blows up from overheating, I'll never hear the end of it. ;)

comment:8 MDesigner012 months ago

Also, on the product listing page (Woocommerce), small versions of full-size images are shown. I'm not sure if that's specific to WooCommerce, or if it's the same as a standard post listing page.

comment:9 follow-up: nacin12 months ago

  • Milestone changed from Awaiting Review to Future Release

By default medium size images are loaded.

If images don't have medium sizes, or if the medium size is configured oddly (such as 0 x 0, to kill the size), then full will get used. The default dimensions for thumbnails are simply too small for the new UI.

I think there are some good ideas here for a future release. It is not a pressing issue at this point.

comment:10 follow-up: MDesigner012 months ago

What exactly is a "medium size" image? I've got an image that has sizes 90x90, 150x150, 158x158, 300x300, 370x370, 900x900, and 1024x1024. And the full size (2262x2261). And yet when I click "Add Media," it still uses the full 2262x2261 as the thumbnail. Doesn't make any sense.

I dunno if I'd call this "not a pressing issue." For e-commerce store owners who have large images, I think it is. This runs up the CPU usage and makes the computer run HOT. I think at least some sort of interim patch would be nice for 3.5.x.

Last edited 12 months ago by MDesigner0 (previous) (diff)

comment:11 ocean9012 months ago

MDesigner0, take a look at wp-admin/options-media.php.

comment:12 in reply to: ↑ 10 DH-Shredder12 months ago

Did you check to make sure that WordPress generated the smaller images for that specific upload within wp-content?

I've seen that behavior frequently when an upload fails at some point (usually due to an image being too large to be processed by the current server with its current configuration).

In that case, you'll usually end up with the Full size, since it needs to be uploaded to be resized, then as many sizes as are completed before the resizing process fails.

Replying to MDesigner0:

What exactly is a "medium size" image? I've got an image that has sizes 90x90, 150x150, 158x158, 300x300, 370x370, 900x900, and 1024x1024. And the full size (2262x2261). And yet when I click "Add Media," it still uses the full 2262x2261 as the thumbnail. Doesn't make any sense.

I dunno if I'd call this "not a pressing issue." For e-commerce store owners who have large images, I think it is. This runs up the CPU usage and makes the computer run HOT. I think at least some sort of interim patch would be nice for 3.5.x.

comment:13 MDesigner012 months ago

Yep, all these file size variations are within the same folder in wp-content/uploads/2013/07. I believe WooCommerce generated these, as these are the various file sizes set there (150, 370, 90, 140, and 900 anyway). I also tried "regenerate thumbnails" plugin, that didn't help.

ocean90: Didn't see anything relevant in wp-admin/options-media.php.

Ok, this is helpful. As a test, I copied one of these large images and uploaded to my own WP site which doesn't have WooCommerce or a lot of plugins going on. And when clicking "Add Media" on a post, the image used is actually 300x300. So it's properly using a thumbnail, not a full size. Any ideas why my wife's WooCommerce site would not be behaving this way?

comment:14 MDesigner012 months ago

And boom, narrowed it down. It's the theme. ARGH! Sorry for raising unnecessary red flags. :)

comment:15 in reply to: ↑ 9 creativeinfusion12 months ago

Replying to nacin:

By default medium size images are loaded.

If images don't have medium sizes, or if the medium size is configured oddly (such as 0 x 0, to kill the size), then full will get used. The default dimensions for thumbnails are simply too small for the new UI.

Maybe I'm missing something, but the default thumbnail is 150 x 150, and the default medium is 300 x 300, yet it looks like the divs these medium size images sit in all have max-height and width set to 120 from media-views.css?

comment:16 wonderboymusic5 months ago

  • Keywords needs-refresh added; has-patch removed
  • Milestone changed from Future Release to 3.9

I just watched my co-worker's computer almost melt from loading hundreds of hi-res images at once. This is due to an unbounded wp.media.query - loading 100s of hi-res images squished as thumbnails is pretty absurd.

comment:17 wonderboymusic5 months ago

#25452 was marked as a duplicate.

comment:18 leemon5 months ago

It might be a good idea to default to the "Uploaded to this post" view instead of the "All Media Items" like it is now, too.

comment:19 wonderboymusic4 months ago

When you load the modal (and you have 100s of attachments), it requests page 2 immediately after page 1, so 80 items load at once. If your full-size images are 4MB, this is loading 320MB of images at once.

If you have 100s of images, "Uploaded to this post" is a much saner default mode.

wonderboymusic4 months ago

comment:20 wonderboymusic4 months ago

  • Focuses javascript added
  • Keywords has-patch added; needs-refresh removed

23292.2.diff sets the default library of media.view.MediaFrame.Post to the default values for the uploaded attachment filter when the user has more than one page of attachments.

Introduces wp.media.isLargeLibrary() to identify a a media library whose items are more than one page. Adds wp.media.view.settings.attachmentCounts via wp_count_attachments() in wp_enqueue_media().

As I'm thinking about how one produces content for a post, do they really need access to 80 attachments immediately every time they open the media modal?

Curious what others think...

The code is just to get this started. May need some massaging

comment:21 ircbot4 months ago

This ticket was mentioned in IRC in #wordpress-dev by wonderboymusic. View the logs.

comment:22 nacin4 months ago

  • Keywords 4.0-early added
  • Milestone changed from 3.9 to Future Release

Related: comment:48:ticket:24859. Maybe we should try to avoid the second call.

I'd like to see us only take special cases when we're not loading thumbnails. It might not be easy to determine, but since it's pretty edge, I'd like to not hide the library whenever anyone has more than 40 images.

We also have the upload/browse state, in terms of which one should be uploaded first. (It's supposed to remember the user's preference, though it has a bit of a glitch I think.) We could also just as easily remember if the user wants "Uploaded to this post" consistently as well.

There are a lot of minor issues here that turn into a mess when combined. Let's see what we can fix in 4.0.

comment:23 l3rady3 weeks ago

We remove the medium and large image sizes as we don't use them and don't want to waste disk and processing making those images sizes.

Because we do this we ran into this issue where the media would load all the highres images rather than showing the thumbnail size.

Not sure why we have to show the medium size when the thumbnail size is default 150 by 150 and the media shows the images at 120 by 120...

It would be nice just to have a filter that will allow us to see what image size name to use as a preview in the new media manager.

For the time being we are running this code to get around the issue of not having a medium image size:

	function bfdis_alter_default_image_sizes() {
		$thumbnail_dimensions = array(
			'width'  => (int) get_option( 'thumbnail_size_w' ),
			'height' => (int) get_option( 'thumbnail_size_h' ),
			'crop'   => (int) get_option( 'thumbnail_crop' )
		);

		add_image_size(
			'medium',
			apply_filters( 'bfdis_medium_width', $thumbnail_dimensions['width'] ),
			apply_filters( 'bfdis_medium_height', $thumbnail_dimensions['height'] ),
			apply_filters( 'bfdis_medium_crop', (bool) $thumbnail_dimensions['crop'] )
		);

		add_image_size(
			'large',
			apply_filters( 'bfdis_large_width', $thumbnail_dimensions['width'] ),
			apply_filters( 'bfdis_large_height', $thumbnail_dimensions['height'] ),
			apply_filters( 'bfdis_large_crop', (bool) $thumbnail_dimensions['crop'] )
		);
	}

	add_action( 'after_setup_theme', 'bfdis_alter_default_image_sizes' );

This makes the medium and large image sizes the same as the thumbnail. Because the image sizes are all the same only one size is saved to disk. The media manager now uses the size of the image set for thumbnail.

Note: See TracTickets for help on using tickets.