Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make optimized version of original image size, never load original image. #11822

Open
mor10 opened this issue Nov 13, 2018 · 9 comments
Open
Labels
[Feature] Media Anything that impacts the experience of managing media [Type] Enhancement A suggestion for improvement.

Comments

@mor10
Copy link
Contributor

mor10 commented Nov 13, 2018

Related to #6177 and #6131 and #11821 . Filed as separate issue because #6177 is getting too big.

Problem

If a user uploads an unoptimized image, maybe directly from a digital camera, that image file may end up being sent to the visitor browser causing a significant performance hit. For example, this happens when the viewport or displayed width of an image matches or exceeds the original uploaded image width as the original image is the largest image in the srcset attribute array.

Solution

  1. Always create a new optimized version of the original image matching the original dimensions of the uploaded image.
  2. Add the optimized version of the original image as the largest image file available in srcset array.
  3. Never load the original uploaded image unless explicitly requested by user.
  4. Add new option to "link to" option in images to point at optimized version of original image, and a warning/similar to the option to link to actual original image to avoid site admins loading original images into things like lightboxes.
@chrisvanpatten
Copy link
Member

See also: https://core.trac.wordpress.org/ticket/37840

Not sure if this is better tracked here or only in Trac, but either way it's an interesting idea.

@chrisvanpatten chrisvanpatten added the [Feature] Media Anything that impacts the experience of managing media label Nov 13, 2018
@mor10
Copy link
Contributor Author

mor10 commented Nov 13, 2018

@chrisvanpatten Much of this is Gutenberg-related as Gutenberg changes the image management and display modalities significantly.

@chrisvanpatten
Copy link
Member

@mor10 Definitely agree that it's an issue that Gutenberg magnifies, I'm just not sure it's something where the fix would be made within the Gutenberg project — it would need to be a core patch, wouldn't it? It's an issue no matter which editor you use, or even if you upload outside of an editor (e.g. from the Add New Media screen, or programmatically via media_sideload_image).

Totally makes sense to have a tracking ticket here, but I think it's worth clarifying where the fix would be made :)

@mor10
Copy link
Contributor Author

mor10 commented Nov 14, 2018

The fix needs to happen both in core and Gutenberg. #6177 is already looking at the srcset attribute, and even without core changes, much of this can be resolved within the scope of Gutenberg image handling.

@designsimply designsimply added the [Type] Enhancement A suggestion for improvement. label Nov 14, 2018
@joemcgill
Copy link
Member

I also agree with @chrisvanpatten that this should be handled primarily via WP#37840. The image creation and srcset generation happens outside of Gutenberg.

@mor10
Copy link
Contributor Author

mor10 commented Nov 15, 2018

Sure. But it has to be done in conjunction with Gutenberg, and should be handled before merge/5.0 as wide images suddenly makes the situation of original size images being used by browsers a common occurrence. See WordPress/twentynineteen#50 (comment) for a concrete example of why this is a significant issue.

@mor10
Copy link
Contributor Author

mor10 commented Nov 23, 2018

@tomdevisser
Copy link
Member

@mor10 I see this has issue has been stale and inactive for a long time and has other closed issues mentioning it. Is this issue still relevant or can this be closed?

@skorasaurus
Copy link
Member

This issue is still relevant and it still exists; there is a core ticket for this at https://core.trac.wordpress.org/ticket/37840 as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Media Anything that impacts the experience of managing media [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

6 participants