Menu icon Foundation
Show for small only question

I'm concerned about speed, so I want a small version of a logo to show on phones and a large version of a logo to show on all larger screens. If I use the show-for-small-only, for the small version of the logo and the show-for-medium-up for the larger version of the logo, does the large version still get downloaded to the Phone even though it's hidden?

imagebandwidthshow-for-small-onlymobiledownload

I'm concerned about speed, so I want a small version of a logo to show on phones and a large version of a logo to show on all larger screens. If I use the show-for-small-only, for the small version of the logo and the show-for-medium-up for the larger version of the logo, does the large version still get downloaded to the Phone even though it's hidden?

sudheer over 5 years ago

ya it sends both the images to the browser and displays according to the screen resolution

one example pug-in is interchange check it our here -http://zurb.com/playground/foundation-interchange

i suggest going through these blog post-
http://www.hongkiat.com/blog/serving-responsive-images/
http://css-tricks.com/which-responsive-images-solution-should-you-use/

James Stone over 5 years ago

Interchange is awesome, but before you go so far as that, you might look at how large the images are in respect to the increase in size from javascript from interchange. You might find out that you are better off with the image. It depends on the image size. If you have hundreds of images, interchange or slimmage.js are good ways to handle this. Note: slimmage also supports webp with fallback.

You could also look at async loading the desktop image with jquery (there are a bunch of jquery plugins that do this). You will get hit twice on desktop, but often the network speeds are faster.

Another thing to consider is if you are supporting retina. Often a 1.5x size image that is a heavily compressed jpeg might be small enough in size to use for both. Try not to use png if you can avoid it.

Another performance consideration is svg (either in css or loaded async) with a png fallback.

These are depend on your particular use case but are some things to check out. Run your site through pingdom, google page speed or yslow. Look at your image size. Ask yourself, can you make those images smaller or combine them. Make sure you run it through a tool like image_optim or smush it or an online image optimization tool.

In my experience it is always better to look at performance in this way before considering on of the responsive image libraries. That way if you add it, it will only increase your performance. Otherwise if you are using large unoptimized images to start with you are still just loading only 1 instead of 2 large unoptimized images.