ios safari lazy image loading

Lazy loading via attribute for images & iframes

The loading attribute on images & iframes gives authors control over when the browser should start loading the resource.

• 4 - 74 : Not supported
• 75 - 76 : Disabled by default
• 77 - 126 : Supported
• 127 : Supported
• 128 - 130 : Supported
• 12 - 18 : Not supported
• 79 - 126 : Supported
• 3.1 - 13 : Not supported
• 13.1 - 15.3 : Disabled by default
• 15.4 - 16.3 : Disabled by default
• 16.4 - 17.4 : Supported
• 17.5 : Supported
• 17.6 - TP : Supported
• 2 - 74 : Not supported
• 75 - 120 : Partial support
• 121 - 128 : Supported
• 129 : Supported
• 130 - 132 : Supported
• 9 - 60 : Not supported
• 62 - 63 : Disabled by default
• 64 - 110 : Supported
• 111 : Supported
• 5.5 - 10 : Not supported
• 11 : Not supported

Chrome for Android

Safari on ios.

• 3.2 - 13.3 : Not supported
• 13.4 - 15.3 : Disabled by default
• 17.6 - 18.0 : Supported

Samsung Internet

• 4 - 11.2 : Not supported
• 12.0 - 24 : Supported
• 25 : Supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.4.4 : Not supported

Firefox for Android

• 127 : Partial support
• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Not supported
• 3 : Partial support

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Collections
• Fast load times

Browser-level image lazy loading for the web

Browser Support

You can use the loading attribute to lazy-load images without the need to write custom lazy-loading code or use a separate JavaScript library. Here's a demo of the feature:

This page walks through the details of implementing lazy-loading in the browser.

Why browser-level lazy loading?

According to the HTTP Archive , images are the most-requested asset type for most websites, and they usually take up more bandwidth than any other resource. At the 90th percentile, sites send over 5 MB of images on desktop and mobile.

Previously, there were two ways to defer the loading of off-screen images:

• Using the Intersection Observer API
• Using scroll , resize , or orientationchange event handlers

Either option can let developers include lazy loading behavior, and many developers have built third-party libraries to provide abstractions that are even easier to use.

With lazy loading supported directly by the browser, however, there's no need for an external library. Browser-level lazy loading also ensures that loading of images still works even if the client disables JavaScript. Note however that loading is only deferred when JavaScript is enabled.

The loading attribute

Chrome loads images at different priorities depending on where they're located relative to the device viewport. Images below the viewport are loaded with a lower priority, but they're still fetched as the page loads.

You can use the loading attribute to completely defer the loading of offscreen images:

Here are the supported values for the loading attribute:

• lazy : Defer loading of the resource until it reaches a calculated distance from the viewport.
• eager : Default loading behavior of the browser, which is the same as not including the attribute and means the image is loaded regardless of where it's located on the page. This is the default, but it can be useful to set explicitly if your tooling automatically adds loading="lazy" when there's no explicit value, or if your linter complains if it isn't explicitly set.

Relationship between the loading attribute and fetch priority

The eager value is an instruction to load the image as usual, without delaying the load further if the image is off-screen. It doesn't load the image faster than another image that doesn't have a loading attribute.

If you want to increase the fetch priority of an important image (for example, the LCP image), use Fetch Priority with fetchpriority="high" .

An image with loading="lazy" and fetchpriority="high" is still delayed while it's off-screen, and then fetched with a high priority when it's almost within the viewport. This combination isn't really necessary because the browser would likely load that image with high priority anyway.

Distance-from-viewport thresholds

All images that are immediately viewable without scrolling load normally. Images far below the device viewport are only fetched when the user scrolls near them.

Chromium's implementation of lazy loading tries to ensure that offscreen images are loaded early enough that they finish loading by the time the user scrolls to them by fetching them well before they become visible in the viewport.

The distance threshold varies depending on the following factors:

• The type of image resource being fetched
• The effective connection type

You can find the default values for the different effective connection types in the Chromium source . You can experiment with these different thresholds by throttling the network in DevTools.

Improved data-savings and distance-from-viewport thresholds

In July 2020, Chrome made significant improvements to align the image lazy loading distance-from-viewport thresholds to better meet developer expectations.

On fast connections (4G), we reduced Chrome's distance-from-viewport thresholds from 3000px to 1250px and on slower connections (3G or lower), changed the threshold from 4000px to 2500px . This change achieves two things:

• <img loading=lazy> behaves closer to the experience offered by JavaScript lazy loading libraries.
• The new distance-from-viewport thresholds still means images will probably have loaded by the time a user has scrolled to them.

You can find a comparison between the old versus new distance-from-viewport thresholds for one of our demos on a fast connection (4G) next:

and the new thresholds versus LazySizes (a popular JavaScript lazy loading library):

Give your images dimension attributes

While the browser loads an image, it doesn't immediately know the image's dimensions, unless they're explicitly specified. To let the browser reserve enough space on a page for images, and avoid disruptive layout shifts , we recommend adding width and height attributes to all <img> tags.

Alternatively, specify their values directly in an inline style:

The best practice of setting dimensions applies to <img> tags regardless of whether you're lazy loading them, but lazy loading can make it more important.

Lazy loading in Chromium is implemented in a way that makes images more likely to be loaded as soon as they're visible, but there's still a chance that they won't load at the right time. If that happens, not specifying width and height on your images increases their impact on Cumulative Layout Shift. If you can't specify your images' dimensions, lazy loading them can save network resources at the risk of these increased layout shifts .

In most scenarios, images still lazy load if you don't specify dimensions, but there are a few edge cases you should be aware of. Without width and height specified, image dimensions default to 0×0 pixels. If you have a gallery of images, the browser might decide that all of them fit inside the viewport at the start, because each image takes up no space and no image is pushed offscreen. In this case, the browser decides to load everything, making the page load more slowly.

For an example of how loading works with large numbers of images, refer to this demo .

You can also lazy-load images you've defined using the <picture> element:

Although the browser decides which image to load from any of the <source> elements, you only need to add loading to the fallback <img> element.

Always eager-load images visible in the first viewport

For images that are visible when the user first loads the page, and especially for LCP images, use the browser's default eager loading so they can be available right away. For more information, see The performance effects of too much lazy-loading .

Use loading=lazy only for images outside the initial viewport. The browser can't lazy-load an image until it knows where the image should be on the page, which causes them to load more slowly.

Graceful degradation

Browsers that don't support the loading attribute ignore it. They don't get the benefits of lazy loading, but there's no negative impact from including it.

Some frequently asked questions about browser-level lazy loading.

Can I automatically lazy-load images in Chrome?

Previously, Chromium automatically lazy-loaded any images that were well suited to being deferred if Lite mode was enabled on Chrome for Android and the loading attribute was either not provided or set to loading="auto" . However, Lite mode and loading="auto" have been deprecated and there are no plans to provide automatically lazy-load of images in Chrome.

Can I change how close an image needs to be to the viewport before it loads?

These values are hardcoded and can't be changed through the API. However, they might change in the future as browsers experiment with different threshold distances and variables.

Can CSS background images use the loading attribute?

No, you can only use it with <img> tags.

Can loading work with images in the viewport that aren't immediately visible?

Using loading="lazy" can prevent images being loaded when they aren't visible but are within the calculated distance . These images might be behind a carousel or hidden by CSS for certain screen sizes. For example, Chrome, Safari, and Firefox don't load images using display: none; styling, either on the image element or on a parent element. However, other image hiding techniques, such as using opacity:0 styling, still cause the browser to load the image. Always test your implementation thoroughly to make sure it's acting as intended.

Chrome 121 changed the behavior for horizontal-scrolling images like carousels. These now use the same thresholds as vertical scrolling. This means for the carousel use case, images will be loaded before they visible in the viewport. This means the image loading is less likely to be noticeable to the user, but at the cost of more downloads. Use the Horizontal Lazy Loading demo to compare behaviour in Chrome versus Safari and Firefox.

What if I'm already using a third-party library or a script to lazy-load images?

With full support of lazy loading built into modern browsers, you probably don't need a third-party library or script to lazy-load images.

One reason to continue to use a third-party library alongside loading="lazy" is to provide a polyfill for browsers that don't support the attribute, or to have more control over when lazy loading is triggered.

How do I handle browsers that don't support lazy loading?

Browser-level image lazy loading is well supported across all the major browsers and is recommended for most use cases, to remove the need for extra dependencies on JavaScript.

However, if you have a need to support more browsers or want to have more control over lazy-loading thresholds then you can use a third-party library to lazy-load images on your site.

You can use the loading property to detect whether a browser supports the feature:

For example, lazysizes is a popular JavaScript lazy loading library. You can detect support for the loading attribute to load lazysizes as a fallback library only when loading isn't supported. This works as follows:

• Replace <img src> with <img data-src> to avoid an eager load in unsupported browsers. If the loading attribute is supported, swap data-src for src .
• If loading isn't supported, load a fallback from lazysizes and initiate it, using the lazyload class to indicate which images to lazy-load:

Here's a demo of this pattern. Try it in an older browser to see the fallback in action.

Is lazy loading for iframes also supported in browsers?

<iframe loading=lazy> has also been standardized. This lets you lazy-load iframes using the loading attribute. For more information, see It's time to lazy-load offscreen iframes!

How does browser-level lazy loading affect advertisements on a web page?

All ads displayed to the user as images or iframes lazy-load just like any other image or iframe.

How are images handled when a web page is printed?

All images and iframes load immediately when the page is printed. See issue #875403 for details.

Does Lighthouse recognize browser-level lazy loading?

Lighthouse 6.0 and higher factor in approaches for offscreen image lazy loading that can use different thresholds, letting them pass the Defer offscreen images audit.

Lazy-load images to improve performance

Browser support for lazy loading images can make it significantly easier for you to improve your pages' performance.

Are you noticing any unusual behavior with this feature enabled in Chrome? File a bug !

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-08-13 UTC.

Preventing Content Reflow From Lazy-Loaded Images

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

You know the concept of lazy loading images . It prevents the browser from loading images until those images are in (or nearly in) the browser’s viewport.

There are a plethora of JavaScript-based lazy loading solutions. GitHub has over 3,400 different lazy load repos , and those are just the ones with “lazy load” in a searchable string! Most of them rely on the same trick: Instead of putting an image’s URL in the src attribute, you put it in data-src — which is the same pattern for responsive images:

• JavaScript watches the user scroll down the page
• When the use encounters an image, JavaScript moves the data-src value into src where it belongs
• The browser requests the image and it loads into view

The result is the browser loading fewer images up front so that the page loads faster. Additionally, if the user never scrolls far enough to see an image, that image is never loaded. That equals faster page loads and less data the user needs to spend.

“This is amazing!” you may be thinking. And, you’re right… it is amazing!

That said, it does indeed introduce a noticeable problem: images not containing the src attribute (including when it’s empty or invalid) have no height. This means that they’re not the right size in the page layout until they’re lazy-loaded.

Update! Times changed fast here, and to avoid lazy-load jank, all you have to do is put the correct natural width and height attributes on images and they will load nicely, even if CSS makes the image fluid with. So do it like: <img src="image.jpg" width="800" height="600">

When a user scrolls and images are lazy-loaded, those img elements go from a height of 0 pixels to whatever they need to be. This causes reflow , where the content below or around the image gets pushed to make room for the freshly loaded image. Reflow is a problem because it’s a user-blocking operation. It slows down the browser by forcing it to recalculate the layout of any elements that are affected by that image’s shape. The CSS scroll-behavior property may help here at some point, but its support needs to improve before it’s a viable option.

Lazy loading doesn’t guarantee that the image will fully load before it enters the viewport. The result is a perceived janky experience, even if it’s a big performance win.

There are other issues with lazy loading images that are worth mentioning but are outside the scope of this post. For example, if JavaScript fails to run at all, then no images will load on the page. That’s a common concern for any JavaScript-based solution but this article only concerned with solving the problems introduced by reflow.

If we could force pre-loaded images to maintain their normal width and height (i.e. their aspect ratio), we could prevent reflow problems while still lazy loading them. This is something I recently had to solve building a progressive web app at DockYard where I work.

For future reference, there’s an HTML attribute called intrinsicsize that’s designed to preserve the aspect ratio, but right now, that’s just experimental in Chrome.

Here’s how we did it.

Maintaining aspect ratio

There are many ways to go about the way we can maintain aspect ratios. Chris once rounded up an exhaustive list of options, but here’s what we’re looking at for image-specific options.

The image itself

The image src provides a natural aspect ratio. Even when an image is resized responsively, its natural dimensions still apply. Here’s a pretty common bit of responsive image CSS:

That CSS is telling images not to exceed the width of the element that contains them, but to scale the height properly so that there’s no “stretching” or “squishing” as the image is resized. Even if the image has inline height and width attributes, this CSS will keep them behaving nicely on small viewports.

However, that “natural aspect ratio” behavior breaks down if there’s no src yet. Browsers don’t care about data-src and don’t do anything with it, so it’s not really a viable solution for lazy loading reflow; but it is important to help understand the “normal” way images are laid out once they’ve loaded.

A pseudo-element

Many developers — including myself — have been frustrated trying to use pseudo-elements (e.g. ::before and ::after ) to add decorations to img elements. Browsers don’t render an image’s pseudo-elements because img is a replaced element , meaning its layout is controlled by an external resource.

However, there is an exception to that rule: If an image’s src attribute is invalid, browsers will render its pseudo-elements. So, if we store the src for an image in data-src and the src is empty, then we can use a pseudo-element to set an aspect ratio:

That’ll set a 16:9 aspect ratio on ::before for any element with a data-src attribute. As soon as the data-src becomes the src , the browser stops rendering ::before and the image’s natural aspect ratio takes over.

Here’s a demo:

See the Pen Image Aspect Ratio: ::before padding by James Steinbach ( @jdsteinbach ) on CodePen .

There are a couple drawbacks to this solution, however. First, it relies on CSS and HTML working together. Your stylesheet needs to have a declaration for each image aspect ratio you need to support. It would be much better if the template could insert an image without needing CSS edits.

Second, it doesn’t work in Safari 12 and below, or Edge, at the time of writing. That’s a pretty big traffic swatch to send poor layouts. To be fair, maintaining the aspect ratio is a bit of a progressive enhancement — there’s nothing “broken” about the final rendered page. Still, it’s much more ideal to solve the reflow problem and for images to render as expected.

Data URI (Base64) PNGs

Another way we attempted to preserve the aspect ratio was to inline data URI for the src . as PNG. Using png-pixel.com will help with the lift of all that base64-encoding with any dimensions and colors. This can go straight into the image’s src attribute in the HTML:

The inline PNG there has a 3:2 aspect ratio (the same aspect ratio as the final image). When src is replaced with the data-src value, the image will maintain its aspect ratio exactly like we want!

See the Pen Image Aspect Ratio: inline base64 PNG by James Steinbach ( @jdsteinbach ) on CodePen .

And, yes, this approach also comes with some drawbacks. Although the browser support is much better, it’s complicated to maintain. We need to generate a base64 string for each new image size, then make that object of strings available to whatever templating tool that’s being used. It’s also not the most efficient way to represent this data.

I kept exploring and found a smaller way.

Combine SVG with base64

After exploring the inline PNG option, I wondered if SVG might be a smaller format for inline images and here’s what I found: An SVG with a viewBox declaration is a placeholder image with an easily editable native aspect ratio.

First, I tried base64-encoding an SVG. Here’s an example of what that looked like in my HTML:

On small, simple aspect ratios, this is roughly equivalent in size to the base64 PNGs. A 1:1 ratio would be 114 bytes with base64 PNG and 106 bytes with base64 SVG. A 2:3 ratio is 118 bytes with base64 PNG and 106 bytes with base64 SVG.

However, using base64 SVG for larger, more complex ratios stay small, which is a real winner in file size. A 16:9 ratio is 122 bytes in base64 PNG and 110 bytes in base64 SVG. A 923:742 ratio is 3,100 bytes in base64 PNG but only 114b in base64 SVG! (That’s not a common aspect ratio, but I needed to test with custom dimensions with my client’s use case.)

Here’s a table to see those comparisons more clearly:

The differences are negligible with simple ratios, but you can see how extremely well SVG scales as ratios become complex.

We’ve got much better browser support now. This technique is supported by all the big players, including Chrome, Firefox, Safari, Opera, IE11, and Edge, but also has great support in mobile browsers, including Safari iOS, Chrome for Android, and Samsung for Android (from 4.4 up).

Here’s a demo:

See the Pen Image Aspect Ratio: inline base64 SVG by James Steinbach ( @jdsteinbach ) on CodePen .

🏆 We have a winner!

Yes, we do, but stick with me as we improve this approach even more! I remembered Chris suggesting that we should not use base64 encoding with SVG inlined in CSS background-images and thought that advice might apply here, too.

In this case, instead of base64-encoding the SVGs, I used the “Optimized URL-encoded” technique from that post. Here’s the markup:

This is just a tad smaller than base64 SVG. The 1:1 is 106 bytes in base64 and 92 bytes when URL-encoding. 16:9 outputs 110 bytes in base64 and 97 bytes when URL-encoded.

If you’re interested in more data size by file and encoding format, this demo compares different byte sizes between all of these techniques.

However, the real benefits that make the URL-encoded SVG a clear winner are that its format is human-readable, easily template-able, and infinitely customizable!

You don’t need to create a CSS block or generate a base64 string to get a perfect placeholder for images where the dimensions are unknown! For example, here’s a little React component that uses this technique:

See the Pen React LazyLoad Image with Stable Aspect Ratio by James Steinbach ( @jdsteinbach ) on CodePen .

Or, if you prefer Vue:

See the Pen Vue LazyLoad Image with Stable Aspect Ratio by James Steinbach ( @jdsteinbach ) on CodePen .

I’m happy to report that browser support hasn’t changed with this improvement — we’ve still got the full support as base64 SVG!

We’ve explored several techniques to prevent content reflow by preserving the aspect ratio of a lazy-loaded image before the swap happens. The best technique I was able to find is inlined and optimized URL-encoded SVG with image dimensions defined in the viewBox attribute. That can be scripted with a function like this:

There are several benefits to this technique:

• Solid browser support across desktop and mobile
• Smallest byte size
• Human-readable format
• Easily templated without run-time encoding calls
• Infinitely extensible

What do you think of this approach? Have you used something similar or have a completely different way of handling reflow? Let me know!

Personnaly, i use a wrapper around my image with an ‘utility’ class i write (functionnal css). Something like this

And my defined utility class

‘fluid-holder’ is sass function that set the correct padding regard to the ratio i pass to the param

I’ve been using that SVG technique for a little while on my WordPress blog for GIFs: I use the generated JPEG thumbnail as a background image to the <img> , and place the GIF’s URL in a data-gif-url attribute. The src attribute with the data URI for the SVG is generated on the fly when I insert it in my blog posts (with a little custom Gutenberg block that reads the file’s attributes). Then I simply overlay a button that’s toggle the src and data-gif-url attributes and that’s it!

It makes it a lot easier than having to resize each GIF to a certain aspect ratio. (and yes, I know it’s bad to use GIFs instead of a video file… I’ll find a solution for that later)

You can get the final snippet even smaller by self-closing the root <svg> element:

…but why not just use inline height and width attributes? That is the most semantic solution, and is guaranteed to work. Even better, it lets you use a 1px transparent png data url as a placeholder until the image starts to load.

That doesn’t seem to work as described: I tried that in a CodePen & the 1px transparent png data-uri overrode the height/width attributes: https://codepen.io/jdsteinbach/pen/EOzWqa

But why not just use inline height and width attributes? Those are guaranteed to work, can be set per image, are the most semantic, and let you use a 1px transparent png dataurl as a placeholder until the image starts loading.

“Even if the image has inline height and width attributes, this CSS (author is referring to the ‘fluid image’ styles) will keep them behaving nicely on small viewports.”

Is there an impact on SEO with data uri ?

I just use JS to set padding from the width & height attributes – this means that non-JS-having clients don’t get a big empty block of whitespace (and a fallback image loads from a noscript tag).

Shameless plug: https://shakyjake.github.io/Lazy-Loading-With-IntersectionObserver/

Using src has another big caveat: You are removing progressive loading/displaying of images, which results into much later shown image. This even happens with non progressive images and the difference is pretty heavy. So don’t use this technique.

Alex, can you elaborate? What is the disadvantage to providing a placeholder in the src attribute?

What about picture element where every source have different ratio?

Solved same way for each source src.

Picture source not accept src attribute and when I set inline svg as srcset, bowser get me this error: “Failed parsing ‘srcset’ attribute value since it has an unknown descriptor.” Any suggestion how to set srcset as a inline svg? Thanks

Maintaining aspect ratio is a really good advice, thanks for sharing this article. If the target is to avoid reflows, then most of the lazy load libraries are doing it wrong, because only the IntersectionObserver will avoid reflows. I have a small (vanilla) approach described here, maybe that can inspire someone :-) https://medium.com/@iliketoplay/lazy-loading-a-flexible-and-performant-approach-5a46b97ef60f

Hopefully this get solved by a better CSS property in the near future (see “what now?” in https://www.bram.us/2017/06/16/aspect-ratios-in-css-are-a-hack/ )

The method shown in the article does not get rid of reflow. Src should be changed by the load event for the picture.

I solved the reflow problem using tiny, highly-compressed, thumbnail images (e.g. 40×30) with the same aspect ratio as the larger image (e.g. 800×600). Thumbnails can be inlined but services such as Cloudinary can generate them on the fly.

The full image is then positioned absolutely over the top when required. (The full image is then made into a standard block and the thumbnail is removed – but that was only to prevent some janky behaviour in Edge.)

Demo: https://codepen.io/craigbuckler/pen/yPqLXW

That’s a really neat trick !

It might be interesting to know that this technique doesn’t work if the image ratios are different between screen sizes (e.g. 1:1 on small screens, 2:1 on large screens). The browser will only look for the src tag to define the element size and optimized URLs-encoded images are not accepted by the srcset tag for responsive images.

I could be wrong but that’s what I found out with the few tests I did this afternoon. I’d love to see if anyone know work-arounds for this particular case.

Rectification: This technique won’t work with srcset attribute as written above. The problem comes from the spaces included in the Optimized URL-encoded that browsers use for to separate the image URL and the width descriptor. To fix this issue, you’ll have to write the following :

Instead of :

That difference is in the characters encoded. The article’s one only have < and > encoded. The one that works for both src and srcset attributes have < , > , " and spaces encoded.

Hi, this is a very interesting post. I just a have a question, which tool are you using to convert SVG to base64? Thank you

They are many tools available online. You can even use Chrome DevTools to do that.

It seems Safari on iOS 12 won’t trigger an observer event (in the IntersectionObserver polyfill) when the SVG placeholder enters the viewport. I’m investigating a workaround, but for now that makes this not a production-ready technique.

https://github.com/w3c/IntersectionObserver/tree/master/polyfill

4 Ways to Fix Safari Not Loading Images on iPhone

Pankil is a Civil Engineer turned freelance writer. Since his arrival at Guiding Tech in 2021, he delves into the world of how-tos, and troubleshooting guides for Android, iOS, and Windows. Besides his new-found love for mechanical keyboards, he's a disciplined footfall fan and loves international travel with his wife.

• It’s worth ruling out any internet-related issues before troubleshooting Safari or your iPhone.
• If images are not loading across all websites, there may be an issue with one of your extensions.
• You can try clearing browsing data or resetting Safari settings if the issue persists.

Fix 1: Disable Content Blocker Extensions

If you use any content blocker extensions to avoid ads or pop-ups while browsing, they may interfere with Safari and prevent them from loading images. To check for this possibility, disable your extensions temporarily.

Step 1: Open the Settings app, scroll down, and tap on Safari .

Step 2: Go to Extensions and turn off all your extensions one by one.

Fix 2: Ensure JavaScript Is Enabled

Many websites rely on JavaScript to display images and other visual elements. However, if you’ve disabled JavaScript in Safari, the browser may fail to load images on your iPhone.

Step 1: Launch the Settings app on your iPhone and go to Safari .

Step 2: Scroll down to tap Advanced and turn on the toggle for JavaScript .

Fix 3: Turn off Content Restrictions

The Screen Time feature on your iPhone can come in handy when you want to impose content restrictions on apps. If you’ve previously enabled this feature, Safari may fail to load web pages or specific content on those web pages. Disable these restrictions and see if that makes a difference.

Step 1: Open the Settings app and navigate to Screen Time .

Step 2: Tap Content & Privacy Restrictions and turn off the toggle for the same in the following menu.

Fix 4: Clear Browsing Data

Overwhelming or corrupt Safari browsing data can also affect Safari’s performance on your iPhone. Here’s how to clear it out and start with a fresh slate.

Step 1: Open the Settings app and scroll down to tap on Safari .

Step 2: Tap Clear History and Website Data . Choose All history and tap Clear History to confirm.

If Safari won’t load any images after clearing the browsing data, update your iPhone to the latest iOS version as a last resort.

Was this helpful?

Last updated on 07 May, 2024

The above article may contain affiliate links which help support Guiding Tech. However, it does not affect our editorial integrity. The content remains unbiased and authentic.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

The article above may contain affiliate links which help support Guiding Tech. The content remains unbiased and authentic and will never affect our editorial integrity.

DID YOU KNOW

Pankil Shah

More in ios.

Fix: WhatsApp Not Showing Message Notifications Until Opened

5 Ways to Fix Mail App Not Working on iPhone

Join the newsletter.

Get Guiding Tech articles delivered to your inbox.

Safari Is Working On Native Lazy-Loading Images

• Post author By josephscott
• Post date Mon 30 Sep 2019
• 2 Comments on Safari Is Working On Native Lazy-Loading Images

This little Webkit gem is really nice to see: Bug 200764 – Main implementation for lazy image loading .

Chrome recently started supporting native lazy-loading , being the first, and so far only browser to do so. This concept is such a good idea, it would be a shame for it to remain Chrome only. Having it show up in a future version of Safari would be awesome.

I found two Mozilla bugs filed regarding lazy loading support, 1542784 and 947427 . Unfortunately there hasn’t been any movement on either one.

• Tags performance , safari , webkit

2 replies on “Safari Is Working On Native Lazy-Loading Images”

One Year later. Nothing happens. Chrome and Firefox work, Safari not. Bad thing.

Safari has an option for it, under Develop > Experimental Features > Lazy Image Loading . I haven’t heard anything about when that would be promoted to a regular option ( enabled by default ).

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

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

Safari: Lazy Load Images in v.15.4 prevents some images from loading #23583

lizswafford commented Mar 15, 2022

the-misha commented Mar 21, 2022 • edited by jeherve Loading

Sorry, something went wrong.

manuelrebollo-a11y commented Mar 23, 2022

edequalsawesome commented Mar 23, 2022

jeherve commented Mar 24, 2022

renata-franco commented Jun 6, 2022

nagpai commented Jun 9, 2022

No branches or pull requests

How to Lazy Load Images in React for Faster Page Loads

Lazy loading images defers offscreen image loading until users scroll near them. This optimization strategy accelerates page load speeds, saves bandwidth, and improves user experience.

In this comprehensive 3200-word guide, you’ll master lazy loading images in React from basic to advanced, using relevant examples and code samples.

Overview of Image Lazy Loading

The core premise of lazy loading is to delay loading non-essential assets like images.

Instead of downloading all images upfront, you load only what’s visible inside the initial viewport. The rest render as users scroll down or interact with the page.

Here’s a scroll animation from Unsplash demonstrating lazy image loading:

Lazy loading images provides a few key web performance wins:

• Faster initial page loads – Deferring offscreen images allows visible content to load faster. Pages load extremely quick without all assets needing to download first.
• Reduced data usage – Images outside of viewport are not downloaded immediately. This saves mobile bandwidth and costs.
• Improved Core Web Vitals – Lazy loading boosts metrics like LCP and TTI that measure loading experience. Good scores equal higher search rankings.
• Lower infrastructure costs – CDNs and media hosts bill you for bandwidth and requests. Lazy loading minimizes asset downloads resulting in cost savings.

Now let’s dive into implementing lazy image loading in React apps.

Getting Started with React Lazy Load Images

We’ll utilize the popular JavaScript library react-lazy-load-image-component for demo examples.

Let’s set it up:

1. Install the Package

Or with Yarn:

2. Import LazyLoadImage Component

Now import LazyLoadImage in your React code:

3. Wrap Images with the Component

Wrap existing <img> elements using <LazyLoadImage> :

And that’s it! This image will only load when scrolled into the visible viewport.

4. Add Low Quality Placeholders

We can enhance the loading experience by displaying thumbnail previews first. These are known as LQIP (Low-Quality Image Placeholders).

Import your thumbnail:

Then supply it via the placeholderSrc prop:

This will show the smaller thumbnail first as a preview until the main image loads.

5. Lazy Load Effects

The react-lazy-load library offers built-in effects that further improve the loading experience:

Blur Effect

Import blur effect styling:

Apply effect prop:

This grays out the placeholder until the original image finishes loading.

Black & White Effect

Renders a grayscale preview initially:

Advanced Implementations

Let’s explore some more advanced custom lazy loading implementations.

React Router Integration

Lazy image loading plays extremely nicely with react router for app-like interfaces.

Consider this App component using v6 router that conditionally loads the Home or About screen:

Adding lazy load logic ensures images specific to the active screen only load within view.

So Home images remain deferred when user is on About screen and vice versa. This keeps memory utilization in check even with hundreds of images across various screens.

Custom Hook for Reusable Logic

We can abstract out the lazy loading implementation into a custom hook for reuse across components:

Components can utilize this hook to lazy load images:

This allows sharing lazy loading logic in a reusable way.

Comparison of React Lazy Load Libraries

There are a few popular JavaScript lazy load libraries like lazysizes and lozad.js. How does the react-lazy-load component fare in comparison?

Based on benchmarks, react-lazy-load outperforms alternatives by efficient usage of IntersectionObserver without unnecessary recalculations.

It also offers richer built-in effects and TypeScript support.

So you can comfortably use react-lazy-load over other libraries in React contexts.

Integrating IntersectionObserver

Modern browsers have native support for intersecting elements in the viewport via the IntersectionObserver API.

We can build custom lazy loading around this as follows:

This allows lazy loading without needing react-lazy-load utilities.

Comparison to Image Optimization Alternatives

Lazy loading solves a specific problem – delaying offscreen image loading.

But it doesn’t automatically handle other optimization needs like:

• Responsively serving multiple sizes
• Efficient compression and encoding
• Caching and HTTP delivery optimization

It’s meant to complement solutions like:

Responsive Images

Using srcset and sizes to serve appropriately sized images across device sizes and resolutions.

WebP Images

Converting images like JPEGs and PNGs to WebP, which is generally 25-35% smaller. All modern browsers now have WebP support.

Using CDN image hosts helps with caching, image processing, and fast cookieless delivery. Popular options include Imgix, Cloudinary, and Akamai.

So while lazy loading streamlines loading priority, combine it with other optimization techniques for maximum gains.

Debugging Common Lazy Load Issues

Here are some tips for troubleshooting quirks with lazy loaded images:

• Open browser DevTools network tab and throttle CPU to replicate mobile environments
• Verify placeholder image is loading first, then main image after scroll event
• If images overlap, adjust CSS to avoid cumulative layout shift
• Handle missing thumbnails by fallbacks to a default placeholder icon
• Use console.log statements and React props to debug rendering issues

additionally, check these factors:

• IntersectionObserver not triggered → Element not visible during intersection check
• Incorrect image URLs → Double check paths are valid
• Multiple duplicate requests → Images reloaded unnecessarily
• Layout shifts → Containers without fixed height/width

Getting grasping of browser tools and React lifecycles helps resolve most problems quickly.

Conclusion & Next Steps

Lazy loading enables you to optimize React apps by deferring offscreen image loading until user scroll interaction.

Key highlights:

• Use react-lazy-load-image-component for straightforward implementation
• Enhance perceived performance with blur & filters
• Integrates well with react router and code splitting
• Combine with other image optimization techniques for best results

This guide should provide a 360 degree view of applying lazy loading across React apps both at basic and advanced levels.

Here are additional resources for taking this further:

• Lazysizes Docs – Lightweight JS lazyload script
• Native Lazy Loading Guide – Using built-in browser support
• Image Performance – Optimization and best practices

I hope this gives you a firm grounding on implementing performant image lazy loading in your React projects!

Dr. Alex Mitchell is a dedicated coding instructor with a deep passion for teaching and a wealth of experience in computer science education. As a university professor, Dr. Mitchell has played a pivotal role in shaping the coding skills of countless students, helping them navigate the intricate world of programming languages and software development.

Beyond the classroom, Dr. Mitchell is an active contributor to the freeCodeCamp community, where he regularly shares his expertise through tutorials, code examples, and practical insights. His teaching repertoire includes a wide range of languages and frameworks, such as Python, JavaScript, Next.js, and React, which he presents in an accessible and engaging manner.

Dr. Mitchell’s approach to teaching blends academic rigor with real-world applications, ensuring that his students not only understand the theory but also how to apply it effectively. His commitment to education and his ability to simplify complex topics have made him a respected figure in both the university and online learning communities.

Similar Posts

AWS Certified Cloud Practitioner Training 2019 – A 2600+ Word Expert Guide

Earning the entry-level AWS Certified Cloud Practitioner (CLF-C01) certification is a great way to demonstrate your…

Donating a Million Dollars to freeCodeCamp to Develop a Free, Carbon-Neutral Web3 Curriculum

I am a freeCodeCamp alumnus. I learned to code through their free, self-paced curriculum and community…

Unlocking the Geolocation Data Behind IP Addresses with Python

IP addresses serve as unique identifiers on computer networks and the internet, facilitating communication between devices….

Host your Static Website on your own Domain through Github Pages

As a full-stack developer who has created numerous personal projects and blogs over the years, I‘ve…

AWS Basics for DevOps – How to Setup a Linux Machine

Cloud computing has transformed how modern applications are built and delivered. Instead of managing your own…

Concatenate in Excel – Join Multiple Text Strings with the Concat Function

Combining text strings together from different sources, also known as concatenation, serves as an essential building…

• Use the old theme

Home / Plugin:  W3 Total Cache / new issue – lazy loaded images don’t appear on Safari on iOS

new issue – lazy loaded images don’t appear on Safari on iOS

(@oferlaor)

11 months, 3 weeks ago

open safari on incognito (so you can reproduce more than once) and open: https://htmag.webmind28.com/roidmi-eva-%d7%a8%d7%95%d7%91%d7%95%d7%98%d7%99-%d7%a9%d7%9e%d7%a0%d7%a7%d7%94-%d7%95%d7%9e%d7%a8%d7%95%d7%a7%d7%9f-%d7%90%d7%aa-%d7%a2%d7%a6%d7%9e%d7%95-%d7%9c%d7%91%d7%93.html Scroll down and see that the images do not load properly. Try to load again and they’ll load. There are no console errors or other problems. On chrome on windows+mac it works fine. Now try this (same configuration):

https://htmag.co.il/roidmi-eva-%D7%A8%D7%95%D7%91%D7%95%D7%98%D7%99-%D7%A9%D7%9E%D7%A0%D7%A7%D7%94-%D7%95%D7%9E%D7%A8%D7%95%D7%A7%D7%9F-%D7%90%D7%AA-%D7%A2%D7%A6%D7%9E%D7%95-%D7%9C%D7%91%D7%93.html

The difference is that on the first one I’m using W3 total cache “load lazy images” and on the second link I’m using the WordPress lazy load solution.

The page I need help with: [ log in to see the link]

Hello @oferlaor

Thank you for reaching out and I am happy to assist you with this.

We have received your email via the W3 Total Cache support channel and replied to it. Please check your email and please continue the correspondence there so we can avoid duplicating the answers.

• The topic ‘new issue – lazy loaded images don’t appear on Safari on iOS’ is closed to new replies.

• W3 Total Cache
• Frequently Asked Questions
• Support Threads
• Active Topics
• Unresolved Topics
• lazy load images
• In: Plugins
• 2 participants
• Last reply from: Marko Vasiljevic
• Last activity: 11 months, 3 weeks ago
• Status: resolved