100% Pure Seed. No Fillers. Non GMO.
How to Plant Wildflowers
Step by step instructions on how to plant your wildflower seeds.
Find mixtures for your region, or for special uses such as dry areas, partial shade, attracting animals, low growing, and more.
Over 75 choices that will bloom in the second year and for years to come.
Over 110 choices for fast color, such as poppies, cosmos, sunflowers, zinnia, and many more.
Help the birds, bees, butterflies & hummingbirds by planting wildflowers.
Wildflower seeds native to your region. Support local wildlife with native wildflowers.
100% Pure Seed
Free shipping on all packets: No Minimum!
Why buy seed packets for your promotion or event
Save Up To 50% - Pre-Order Now
Perennial Planting Guide
Step by step instructions on how to plant your bare root or potted perennials when they arrive.
Spring Flower Bulb Planting Guides
Step by step instructions on how to plant your spring-planted flower bulbs when they arrive.
Let's Do Lawns Differently
Less water, less mowing, and no pesticides
How to plant a cover crop
Learn about varieties which help to replenish nutrients to your soil.
Thrives in areas with cold freezing winters and hot summers.
Thrives in areas with hot temperatures.
Looking for gardening ideas, information and inspiration?
Enter Our Photo Contest
It's time to show off your garden filled with American Meadows products!
Lazy loading is telling the browser to not load images until its absolutely nessisary. Basically we delay loading images that are not currently visible on the page (below the current fold).
Because Google says so. One of the metrics Google uses for search results page rankings is "mobile friendliness", one of the recomendations Google gives to improve a page's mobile friendliness score is to lazy load images. They recomend this because if the user never sees the image (because they navigate away before they scroll down far enough to see it) then we are using the users bandwidth and potentially mobile data for no reason. It also can appear to make the page load faster by prioritzing loading resources they see first, but the actual page load may not technically be faster, but perceived speed > actual speed.
Generated content such as Bluefoot widgets, category page banner images, category page sub-category images, category page product image and product page product images automatically use the lazy loader (because I coded them to do so). So you don't have to worry about implementing the lazy loader on those images. You will need to manually implement the lazy loader on custom content. This includes custom HTML blocks in Bluefoot, Static Blocks (not using Bluefoot), CMS Pages (not using Bluefoot) and any custom HTML code put into category/product fields (such as description).
Use the lazy loader requires giving element a lazy-load attribute with the image URL as the attribute value.
When lazy loading an image element you should give it a src attribute of data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw== which is a base 64 encoded single pixel transparent image. Because its base64 encoded and embeded it will not load an actual image and will use almost no bandwidth other than these few characters on inital page load. You should explicitly define the size of the image within the style tag. If you want the image to be a fixed size and know the dimensions use those dimensions. Otherwise you should use 100% as the width and the images actual width as the "max-width". In this example the image has an width of 800px.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" lazy-load="https://source.unsplash.com/500x500?flower" style="width:100%;max-width:800px" alt="A beautiful flower" />
Lazy loading a background image is done exactly like an <img> but you dont need the placeholder image or size.
<div lazy-load="https://source.unsplash.com/1250x700?flower" style='padding: 20rem 0; text-align: center'>
<h1 style='color: white; text-shadow: 0 0 2px black;'>Lazy Loading Background Images</h1>