You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@pagespeed.apache.org by GitBox <gi...@apache.org> on 2021/05/12 06:09:04 UTC
[GitHub] [incubator-pagespeed-mod] westonruter opened a new issue #2067: Image dimensions are erroneously supplied to amp-img>img elements
westonruter opened a new issue #2067:
URL: https://github.com/apache/incubator-pagespeed-mod/issues/2067
A user of the AMP plugin for WordPress [reported an issue](https://wordpress.org/support/topic/featured-image-disappeared-after-update/) with images on an AMP page where the server-side rendered `img` in the `amp-img` light shadow DOM was getting a `width` and `height` attribute supplied:
```html
<amp-img width="150" height="150" src="https://www.example.com/150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image amp-wp-enforced-sizes i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-element i-amphtml-built i-amphtml-layout" alt="" data-hero-candidate="" layout="intrinsic" disable-inline-width="" i-amphtml-layout="intrinsic" data-hero="" i-amphtml-ssr="" i-amphtml-auto-lightbox-visited="">
<i-amphtml-sizer class="i-amphtml-sizer" slot="i-amphtml-svc"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE1MCIgd2lkdGg9IjE1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
<img width="150" height="150" class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" loading="lazy" alt="" src="https://www.example.com/150x150.jpeg" data-hero-candidate="" data-hero="">
</amp-img>
```
The `img` inside of an `amp-img` gets `position:absolute` and stretches to fill its container element, so the `width` and `height` are irrelevant. Since the attributes are not expected, they cause AMP validation errors and the [AMP base stylesheet](https://github.com/ampproject/amphtml/blob/521db8c3712c8c7febee42d418947c2200e05bb2/css/ampshared.css#L285-L288) inadvertently gives the `img` a `position:relative` styling, which causes the image to be hidden by being positioned outside of the parent's overflow.
All this to say, when an `img` is the child of `amp-img` it should be skipped from having its `width` and `height` supplied.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [incubator-pagespeed-mod] jmarantz commented on issue #2067: Image dimensions are erroneously supplied to amp-img>img elements
Posted by GitBox <gi...@apache.org>.
jmarantz commented on issue #2067:
URL: https://github.com/apache/incubator-pagespeed-mod/issues/2067#issuecomment-840091755
The easiest approach may be to disable the insert_image_dimensions
<https://www.modpagespeed.com/doc/reference-image-optimize#insert_image_dimensions>
filter:
ModPagespeedDisableFilters insert_image_dimensions
you can also do this in an amp-specific way using fancier config-file
constructs (the syntax of which I have now forgotten :), but it's easiest
if AMP pages are under an "/amp/" subdirectory in the URL path.
-Josh
On Wed, May 12, 2021 at 2:49 PM Lofesa ***@***.***> wrote:
> Hi @westonruter <https://github.com/westonruter>
> As far as I know only the filters resize_images and
> resize_rendered_image_dimensions can be related to this issue.
> Pagespeed by default has a rewrite level core
> <https://www.modpagespeed.com/doc/config_filters#level> that enables the
> resize_images.
>
> There are some ways to disable these filters:
>
> pagespeed DisableFilters filtera,filterb; (nginx)
>
> ModPagespeedDisableFilters filtera,filterb (apache)
>
>
> But these disables the filters for all request, not only for amp pages.
> Maybe some type of logic can disable these filters only for amp request.
> If I remember the AMP Plugin put amp as an arg to the url, so some like
> this may work:
>
> if ($args = amp) {
>
> set $disable_filters "resize_images,resize_rendered_image_dimensions";
>
> }
>
>
>
> pagespeed DisableFilters "$disable_filters";
>
>
>
>
> That´s nginx syntax, I don´t know if in apache can be done.
>
> pagespeed UrlValuedAttribute amp-img src image
>
> in their config
>
> —
> You are receiving this because you are subscribed to this thread.
> Reply to this email directly, view it on GitHub
> <https://github.com/apache/incubator-pagespeed-mod/issues/2067#issuecomment-840017441>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AAO2IPKQIGGIEPFNVHCGCADTNLESRANCNFSM44X4ILYA>
> .
>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [incubator-pagespeed-mod] Lofesa commented on issue #2067: Image dimensions are erroneously supplied to amp-img>img elements
Posted by GitBox <gi...@apache.org>.
Lofesa commented on issue #2067:
URL: https://github.com/apache/incubator-pagespeed-mod/issues/2067#issuecomment-840017441
Hi @westonruter
As far as I know only the filters `resize_images` and `resize_rendered_image_dimensions` can be related to this issue.
Pagespeed by default has a [rewrite level core](https://www.modpagespeed.com/doc/config_filters#level) that enables the `resize_images`.
There are some ways to disable these filters:
```
pagespeed DisableFilters filtera,filterb; (nginx)
ModPagespeedDisableFilters filtera,filterb (apache)
```
But these disables the filters for all request, not only for amp pages.
Maybe some type of logic can disable these filters only for amp request. If I remember the AMP Plugin put amp as an arg to the url, so some like this may work:
```
if ($args = amp) {
set $disable_filters "resize_images,resize_rendered_image_dimensions";
}
pagespeed DisableFilters "$disable_filters";
```
That´s nginx syntax, I don´t know if in apache can be done.
`pagespeed UrlValuedAttribute amp-img src image`
in their config
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [incubator-pagespeed-mod] Lofesa edited a comment on issue #2067: Image dimensions are erroneously supplied to amp-img>img elements
Posted by GitBox <gi...@apache.org>.
Lofesa edited a comment on issue #2067:
URL: https://github.com/apache/incubator-pagespeed-mod/issues/2067#issuecomment-840017441
Hi @westonruter
As far as I know only the filters `resize_images` and `resize_rendered_image_dimensions` can be related to this issue.
Pagespeed by default has a [rewrite level core](https://www.modpagespeed.com/doc/config_filters#level) that enables the `resize_images`.
There are some ways to disable these filters:
```
pagespeed DisableFilters filtera,filterb; (nginx)
ModPagespeedDisableFilters filtera,filterb (apache)
```
But these disables the filters for all request, not only for amp pages.
Maybe some type of logic can disable these filters only for amp request. If I remember the AMP Plugin put amp as an arg to the url, so some like this may work:
```
if ($args = amp) {
set $disable_filters "resize_images,resize_rendered_image_dimensions";
}
pagespeed DisableFilters "$disable_filters";
```
That´s nginx syntax, I don´t know if in apache can be done.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org