I have troubles regarding a slider I have on my website.
Currently it's a slider with the <img> element. Problem I encounter now is that on mobile the large images get loaded as well. Now I want to load specific (smaller) images for mobile so that my website is faster on these devices.
A solution I had was using the media queries in combination with CSS background image. This is perfect to use because I can load the images with CSS and thus can use media queries to select the image based on screen size.
But the problem is is that I want to add the images to the SEO, they are essential for my website and I read everywhere that if you have such images, you need to use the <img> element. So that the SEO can work and include these images in the content. Also I cannot add ALT tags to background-image.
Another solution is rendering two sliders, one for mobile and one for desktop, and hiding the slider you don't want to see. Problem I have with this solution is that both of the sliders need to render, thus decreasing performance.
Is there a solution that I'm missing here? In my understanding you cannot change images in a <img> element with CSS media queries.
You can use the picture element. As the Mozilla Developer Network says, "[This element] serves as a container for zero or more elements and one element to provide versions of an image for different display device scenarios". I think it does the trick. Here you are another good article that explains how to use this element to achieve the result you need with your responsive images.
The picture element is a really nice modern solution. But if you want something more cross-browser, consider an approach with JavaScript. My solution for some websites was using sets of images with regular suffixes, for example image.jmg, image-medium.jpg, image-small.jpg, and a script checking the screen resolution. In the HTML only small images are included, but if the script finds the screen is big enough, it updates their src with corresponding suffixes.
Related
I am using amp (Accelerated Mobile Pages Project) technology in a new project.
My concern is about amp-img tag for images. According to this documentation (https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) you can use the attribut layout='responsive' for responsive purpose and in conjonction you can use srcset,media,sizes attributs also for responsive purpose.
Likewise, the documentation says that the image will take the space of its parent container.
I don't understand this logic. Why should we size the container to have the proper size of the image. If it works this way, it is very heavy to use.
Thank you in advance for your answers
The tricky part is having responsive elements render on the page without adversely affecting performance metrics or user experience.
Yes, you can easily get images to fit the screen without width and height but there are performance hits. I think that is why AMP does not allow responsive layout without width and height.
The browser must download the image first to get the dimensions of the image, then resize the image appropriately for the screen size, and finally reflow and repaint the page.
In AMP, the rendering path is optimized so that first the page is laid out, setting aside placeholders for the images based on the dimensions provided in amp-img (using those numbers to establish aspect ratio), then the resources are downloaded, and the page is painted. No reflow is required.
For more information about Restricting width of responsive images Click Here
I'm using rails and bootstrap and I'm using the bootstrap carousel on my landing page. I found that on the mobile view the carousel starts to look quite bad unless I make the pictures much higher than wide.
I wanted to use an if statement in my erb file to check the viewport size and render the appropriate image. I don't think using media queries in css is appropriate in this case as the image size determines the size of the carousel (not simply a background image).
Sorry if this is a newb question.
Erb is rendered server-side, which really has no notion of the viewport size, you would need to resort to using javascript in conjunction with your code, to make the adjustment.
This seems like a perfect case for media queries in the css. This is a much cleaner solution than muddling around with js.
You can, in the carousel, draw both of the images. Give all the wide images a distinct class (wide-image, for example) and all of the tall images a distinct class (tall-image, for example). Then, in the appropriate section in your css, simply set the undesirable image class to display none, which will effectively leave you with only the appropriate images displaying (and governing the size of the carousel).
I'm kind of sure this is not possible but I ask because it seems unbelievable.
I have some elements styled for reponsive design
img {max-width:100%;height:auto;}
but the images have to be different depending on the device (I won't load heavy wide screen images on a phone device).
Since media queries aren't supported inline, I could go for a css background solution, but background-size is not perfectly supported and honnestly it would look more like a hack.
Can anyone confirm that "widely supported device related responsive images" are not properly possible ?
Thanks
If I understand your question correctly, you are looking for a way to deliver a different image depending on the viewpoint.
Adaptive Images could be the solution you are looking for. Easy enough to setup and confirm.
A second possiblity which might give you even more control is Adapt.js . I've used it with good success on several sites. You load a small javascript file in the head of your document. This tests viewpoint width and then dependending on the results, it will send the appropriate CSS file. It has wider browser support than #media requests.
If you could live with using background images, then it would work well, and since you could specify different images for different viewpoints, you aren't up the creek with browsers that don't understand background image sizes.
Good luck!
You could try the Responsive Img jQuery plugin.
It's made to automatically create and swap in different-sized images at different breakpoints, based on the container's width.
If you already have different versions on your image created and on your server, the plugin will just swap those in at the right breakpoint sizes.
Therefore, you can create new images for all the different breakpoint sizes you want, and the plugin takes care of the rest.
It's not CSS, but it gets the job done.
2014 update
There is a nice and new technique here :
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
It requires a small js, a 1x1px blank image, a few extra markup for img tags, and some .htaccess rules.
Seems to work fine so far.
To be more specific, I have a single column Tumblr blog. I don't want to use a generic "mobile friendly" theme when someone hits it from a mobile device. I want the single column to fill the width without stretching the width of the content or making the font size larger.
Essentially, I want to "zoom" to the content without the user having to double-tap the screen.
You need a couple of things:
You need a mobile-only CSS file to change the stylings (usually simpler, with fewer or smaller images). You can use the "#media" tags to accomplish this. Here's a good article on this method: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Make sure you use "meta viewport" tags to set the width of the page. This will properly "zoom in" on the text that you're talking about. It tells the mobile browser how wide the page should be. Here's more information on the topic (specifically for iOS, but the tag can be read by other mobile browsers): http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
You're going to have to use a special mobile friendly css if you want different behavior on a mobile browser. It doesn't have to be in a separate theme though.
You can preface a css rule with #media only handheld to make it target mobile devices with small screens only.
Give us your css and html and I'll give you a more exact answer.
When I was first learning HTML a very long time ago, I was told that it was important to always set the dimensions of your images in your HTML, so that browsers could draw an empty box where the image should go, render your page, and then download and render the images where they belong. If you didn't set width and height values for your images, the browser would have to download the images first to discover their dimensions, and it would slow page loading for people with crappy connections.
For the past few years I've been using CSS, I always put a width and height declaration in my img tags in my HTML. My question is, is setting width and height in the style sheet, and no longer adding these HTML attributes, just as good? It certainly makes my spartan HTML look even cleaner without them.
The problem you mention with the image not being downloaded immediately also applies to your CSS.
The difference is that without the rest of the CSS the whole layout may not make sense. In other words, if the rest of the CSS hasn't loaded then the fact that the image dimensions are also missing won't really be that noticeable.
So personally I think it's fine to put the dimensions in the CSS.
This is a good question, but it's a bit subjective and may lead to more discussion than is generally advised on SO.
Back in the 90's, browsers were slow, and so was the internet. 56k took a while to transfer medium sized images. During that time, the layout would resize to fit the image.
Fast-forward a decade, and internet speeds are much faster, rendering times are much faster. People are used to layouts that change a bit in the first half-second of page load. It's not bad to not specify an image size, as long as you understand the layout of the page may shift during loading.
CSS is parsed before the page is loaded, so specifying the height & width in CSS will work just as well as specifying it inline.
One thing to keep in mind is that inline styles (and that includes height and width declarations) always trump CSS in specificity. If you specify heights and widths of images inline, you may have to go back through every page where an image is present if you want to adjust the size of the images.
Personally I'd suggest using CSS, as it keeps all your styles in the same place.
Yes, setting these properties in CSS will work just as well.
I don't know that it affects page rendering speed in any manner, however. The little effect it does have, is that layout that depends on the image will appear to jump around on the page until the image is loaded and allocates all the space it eventually will.
This is not a practice I follow myself.
A similar question has already been discussed and answered here:
Image width/height as an attribute or in CSS?
It should be defined inline. If you
are using the img tag, that image
should have semantic value to the
content, which is why the alt
attribute is required for validation.
If the image is to be part of the
layout or template, you should use a
tag other than the img tag and assign
the image as a CSS background to the
element. In this case, the image has
no semantic meaning and therefore
doesn't require the alt attribute. I'm
fairly certain that most screen
readers would not even know that a CSS
image exists.
This is also helpful:
If it's part of your site template,
I'd place it in the CSS file.
If it's just on one page, it should be
inline (or defined in a block of
page-specific CSS at the top).
I think the only difference is that css can (yeah it's possible!) not to be read, so <img> attributes are used.
But I'm not sure, I'm going to check that.
EDIT: http://www.mezzoblue.com/archives/2005/05/10/image_attrib/
While you can use CSS to clean up the layout, if your layout messes up by inability to load a single image you should fix that first.
Modern layouts should be controlled by divs and CSS, images in the layout should be supplied only in the form of a background-image:
The reason for always putting the dimensions into HTML code back in the day was due to loading times -- on a 14.4K modem, even relatively small image files would load noticably after the main HTML document had loaded.
These days this is much less of an issue. If it is an issue, it's worth noting that a CSS file will load after the main HTML document, so if you only specify your dimensions there you could potentially suffer the same problem, but CSS files are typically fairly small, so the effect should be minimised.
The other point is that old-school HTML design was very focused on layout, and image sizes were often a critical part of that - if the images were the wrong size, the layout of the whole page would often be completely wrong.
Modern page design approaches things very differently, putting minimal of any layout information into the HTML, and abstracting it all to the stylesheet. Therefore on a typical modern site, until the stylesheets have loaded, the site will just be a series of blocks, and be completely lacking in design. In fact, often the graphics themselves - not just their dimensions - are defined in the stylesheet.
So the answer is that to follow modern page design methods, you should put it in the stylesheet.
Obviously it's critical for most sites these days that the stylesheets load quickly, but it isn't just the size of the graphics that it'll affect.