Spritz Logo

Weaving the Power of the Web into Your Business!

Images

Floated Right

imageThis image is floated right and re-sizes based on screen size. It also has a class of "frame", which adds a padding of 5px and a solid gray border (#ccc).

An online presence is your single most important marketing tool. Use a firm that has the right knowledge, tools, and techniques for maximizing your website's effectiveness; use a firm that can design and develop the website that your business needs and deserves. Our web design and development services are versatile. Pellentesque at libero.

An online presence is your single most important marketing tool. Use a firm that has the right knowledge, tools, and techniques for maximizing your website's effectiveness; use a firm that can design and develop the website that your business needs and deserves. Our web design and development services are versatile. Pellentesque at libero.

An online presence is your single most important marketing tool. Use a firm that has the right knowledge, tools, and techniques for maximizing your website's effectiveness; use a firm that can design and develop the website that your business needs and deserves. Our web design and development services are versatile. Pellentesque at libero. In ut metus et lorem condimentum tempor. Etiam sit amet sapien. Curabitur quis tortor. Curabitur vitae pede aliquet nibh egestas scelerisque. Nulla faucibus, justo vel viverra elementum, enim lorem placerat augue, et feugiat elit odio in purus.

Floated Left

imageThis image is floated left and re-sizes based on screen size. It also has a class of "frame", which adds a padding of 5px and a solid gray border (#ccc).

An online presence is your single most important marketing tool. Use a firm that has the right knowledge, tools, and techniques for maximizing your website's effectiveness; use a firm that can design and develop the website that your business needs and deserves. Our web design and development services are versatile. Pellentesque at libero. In ut metus et lorem condimentum tempor. Etiam sit amet sapien. Curabitur quis tortor. Curabitur vitae pede aliquet nibh egestas scelerisque. Nulla faucibus, justo vel viverra elementum, enim lorem placerat augue, et feugiat elit odio in purus.

An online presence is your single most important marketing tool. Use a firm that has the right knowledge, tools, and techniques for maximizing your website's effectiveness; use a firm that can design and develop the website that your business needs and deserves. Our web design and development services are versatile. Pellentesque at libero. In ut metus et lorem condimentum tempor. Etiam sit amet sapien. Curabitur quis tortor.

An online presence is your single most important marketing tool. Use a firm that has the right knowledge, tools, and techniques for maximizing your website's effectiveness; use a firm that can design and develop the website that your business needs and deserves. Our web design and development services are versatile. Pellentesque at libero. In ut metus et lorem condimentum tempor. Etiam sit amet sapien. Curabitur quis tortor. Curabitur vitae pede aliquet nibh egestas scelerisque. Nulla faucibus.


Using SrcSet for Multiple Image Sizes

imageThe srcset attribute allows us to provide a comma-separated list of one or more images the browser can choose from, based on screen size, etc.

Srcset can be used to load smaller files of the same image for smaller screen devices. The browser chooses the most appropriate image file from the list, replacing the original src image file. You can use Photoshop to automatically create different sizes of the same image. Or, you can even use different images entirely (for example, perhaps you want the smaller images to be cropped.)

For each file size, use the width descriptor in the source code to provide the browser with the actual width of an image file (in pixels) before it's loaded. The browser will then choose which width it makes most sense to load. Common breakpoint widths include 600px, 800px, 1200px, and 1600px.  Or, you can use 767px, 959px and 1200px.  It is really up to you and how many different sizes you want to have.

Srcset is supported by all major browsers, except for IE. IE will just load the primary image.

Example SrcSet code looks like this:

					<img
					   src="business.jpg" alt="Business Concepts"
					   srcset="images/small.jpg 600w,
						   images/medium.jpg 800w,
						   images/large.jpg 1200w,
						   images/extralarge.jpg 1600w"
					>
					

Note: For background images, use media queries to load the different sizes.


Simple Background Image

There's an easy way to make a background image work like an img element so that it adjusts its height automatically.

Set the height of the container to 0 in your CSS. Then, divide the image height by the image width. Use the resulting percentage as your top padding for the background image.


Center Text over Regular Responsive Image

I BELIEVE VIDEO