IntersectionObserver 使用 data-srcset 和 imagekit.io 創建延遲加載圖像

[英]IntersectionObserver to create a lazy load Images with data-srcset and imagekit.io

我將 IntersectionObserver.js 與 data-srcset 一起使用來創建延遲加載，但每次瀏覽器選擇最大圖像時，圖像都沒有根據分辨率正確顯示...在這種情況下，它是寬度為 450 的圖像，忽略其他寬度（100px、200px、300px、400px）。 這是用於延遲加載的 JS ...

Chromium 使用錯誤的 (?) srcset 和大小

[英]Chromium using wrong (?) srcset with sizes

我不確定這是一個真正的錯誤還是我只是濫用了 srcset/sizes。 我們有一個具有這些屬性的 img 標簽（我刪除了所有其他屬性以使其盡可能簡單，示例可以在這里找到： https://jsbin.com/sepesenodo ）： sizes="420px" srcset="https://im ...

Srcset 在智能手機等小型屏幕上獲得不同的圖像方面

[英]Srcset get different image aspect on small hires screens like smartphones

我想在網站上顯示橫幅。 在 4k 屏幕上它應該更大，在智能手機上更小但更高，比如 780x550px 我將圖像與這樣的 srcset 一起使用 不幸的是，大多數智能手機的分辨率都很高，因此它們也在垂直屏幕上使用 1920x450 像素的橫幅。 我也嘗試使用大小屬性和 DPI 方面選項，如 1x 2x ...

從 Wordpress 圖像中的 srcset 中刪除某些大小

[英]Remove certain sizes from srcset in Wordpress images

眾所周知，自 Wordpress 4.4 以來，就有響應式圖像尺寸。 我的目標是從生成中刪除 2 個尺寸，甚至從圖像的 srcset 中顯示。 出於某種原因，即使使用了以下代碼，2 個尺寸仍然顯示在 srcset 中？ 任何解決方案都可能：:) ...

如何在響應式網站上設置圖像格式

[英]How do Image format on responsive website

嗨，我的英語很差:) 對此感到抱歉:) 我設計了一個響應式網站。 給定文件之間有什么區別？ 我不明白如何將它們調整為屏幕尺寸。 ...

如何使用 Javascript 更改圖片元素 srcset/src 值

[英]How to change Picture element srcset/src values using Javascript

我正在嘗試創建一個帶有箭頭的滑塊，以根據單擊的箭頭向前或向后滑動，我希望它相應地更改圖像。 經過多次排列，我得出以下代碼： HTML： <picture class="slider_img"> <source id="source1" m ...

我應該向移動設備提供高分辨率網站圖像嗎？ 如何最小化下載大小？

[英]Should I provide hi-res website images to mobile devices? What about minimizing download size?

隨着更新的手機提供高達 x3 的密度渲染，我很想使用 HTML 元素 srcset 為他們提供 x3 的高分辨率圖像。 但是，我擔心這樣做會增加移動數據要求。 您是否傾向於將高分辨率圖像保留給通常不使用移動數據的大型設備（例如筆記本電腦和台式機）？ 或者，也許，妥協並提供最多 x2 圖像，而不是 ...

使用引導程序 5 的響應式圖像（srcset）的斷點和寬度？

[英]Breaking points and widths for responsive images (srcset) with bootstrap 5?

我很想知道其他人會選擇什么寬度大小來使用 Bootsrap CSS 框架替換全寬圖片/srcset 圖像。 你遵循 Bootstrap 的斷點嗎？ 例如，<576px 為 576w，≥576px 為 768w，≥768px 為 992w，≥992px 為 1200w，≥1200px 為 140 ...

使用 BS4 從 div 和 srcset 中提取圖像鏈接

[英]Extract an image link from within a div and srcset using BS4

html 內的示例 div 標記： 期望的結果（srcset）： 我的function： 我的 function 只返回我要查找的整個標簽，而不是其中的特定鏈接： ...

圖像 SRCSET 為更高 DPR 設備（如 iphone）選擇更大的圖像而不是最近的匹配圖像

[英]Image SRCSET selects bigger image instead of nearest matching image for higher DPR devices like iphone

我想要達到的目標斷點預期圖像寬度最大寬度 539 539 最大寬度 767 767 最大寬度 991 991 最大寬度 1199 1199 最大寬度 1440 1440 最大寬度 1920 1920 問題：具有較高 DPR 的設備正在選擇更大的圖像而不是最近的匹配圖像示例：iPhone ...

為什么 srcset 在 MacBookPro 上無法正常工作（或者可能是視網膜顯示器引起的？）

[英]Why srcset not work normally on MacBookPro(or maybe retina monitor caused?)

首先，在問之前，我已經閱讀了很多關於響應式圖像和srcset的文章，所以我確信帶有演示的代碼絕對正確，但結果並不像預期的那樣。 我們可以打開 MDN Demo進行測試。 讓我們密切關注下面的部分 html 代碼： <img srcset="elva-fairy-480w.jpg 480w, ...

如何用javascript替換圖像srcset

[英]how to replace image srcset with javascript

我正在做 A/B 測試。 我需要更改圖片網址。 我有一個https://newimage.svg需要在控制台上用 javascript 替換 srcset img.png ： 這是源結構的示例。 由於機密工作要求，我無法提供所有內部信息，但這是一個摘要（如果添加此信息可能會有所幫助）： 我嘗 ...

具有 srcset、大小、媒體查詢的響應式圖像 - 防止加載巨大的圖像以獲得更高的像素密度

[英]responsive images with srcset, sizes, media-queries - Prevent loading huge images for higher pixel density

很長時間以來，我使用圖片元素來響應每個視口不同尺寸的圖像。 它工作得很好，但現在我被迫切換到具有srcset和sizes的響應式<img>並且我嘗試將我的圖片元素重寫為 IMG 樣式。 經過長時間的搜索，我在以下位置找到了很好的文檔： https://www.dofactory.c ...

Srcset 屬性在移動設備和 Chrome 開發工具中的移動設備視圖中無法正常工作

[英]Srcset attribute not working as expected on mobile and in mobile device view in Chrome dev tools

鑒於以下情況： 當在視口寬度分別為 400px、720px 和 1120px 的設備上查看時，我希望瀏覽器選擇的圖像是小的、中的然后是大的。 這確實是在桌面瀏覽器中測試時的行為（拖動 window，刷新頁面），但是在使用真實移動設備（iOS 14+）查看頁面時情況並非如此。 我還在設備工具欄中使用 ...

自定義 WordPress 圖片大小不顯示

[英]Custom WordPress Image size not displaying

我正在嘗試在 WordPress 中添加自定義圖像尺寸，如下所示： 當我按預期將圖像上傳到媒體庫時，我可以看到生成了這個額外的大小，但是當我嘗試使用高級自定義字段在 PHP 中實現它時，它不起作用。 自定義圖像大小為 1000 像素 x 1000 像素。 為了解決問題並縮小問題范圍，我將“中”的默認 ...

sizes 屬性沒有像我期望的那樣對源元素起作用

[英]The sizes property is not working as I expect for the source element

我試圖讓粉紅色的花朵以 100% 的比例填充視口的寬度。 但是，sizes 屬性無法實現這一點。 我該如何糾正？ <h1>The picture element</h1> <p>Resize the browser window to load differen ...

我可以在 srcset 中使用不同的文件類型嗎？

[英]Can I use different file types in srcset?

我正在嘗試結合.jpg和.webp，但它對我不起作用.. <img src="flower.jpg" srcset="flower.webp 480w, flower.jpg 1080w" sizes="50vw"> ...

在不同的屏幕尺寸問題下使用 SRCSET 顯示兩個圖像

[英]Display two images with SRCSET at different screen size issue

我在網上查看了一些例子，但我相信我忽略了一些東西。 當屏幕尺寸不同時，我有兩個相似的圖像需要渲染。 一張屏幕尺寸為 1440 像素的圖像，一張屏幕尺寸為 375 像素的圖像。 現在，我使用我的代碼設置了初始源以渲染圖像的“移動視圖”，並將桌面視圖圖像的 srcset 設置為 1440w。 當我加載實 ...

如何使用來自 Asciidoc 源的具有 srcset 屬性的圖片元素的 output HTML5 具有響應式圖像？

[英]How can I output HTML5, that has responsive images, using picture elements with srcset attributes, from Asciidoc source?

所以，如果我想要 HTML5 output 看起來像這樣：<picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyrami ...

如何指定圖像的寬度和高度，同時保持響應？

[英]How to specify the width and height of an image while keeping it responsive at the same time?

將 srcset 用於響應式圖像時，代碼如下所示： 所以，現在當我為那個頁面運行 lighthouse 時，就是說圖像沒有指定寬度和高度，這會導致 CLS。 好的，明白了，所以現在我必須指定寬度和高度......現在代碼看起來像這樣： 但是現在，在指定了這張圖片的寬度和高度之后，srcset 不起 ...