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.
Related
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.
I am using yslow in which it tells don't scale images in HTML but the images are coming from database and I use them using bootstrap grids. Most of the images are show in popup on click.
The image width I set is in the css file in percentages like max-width:100% or width:100%;, but I don't know what to set to not scale the images in HTML.
I don't know how to resolve this issue. Please help me.
YSlow is telling you this because it is not a good practice to resize images in HTML, especially if the images become smaller, as this means you spend too much time downloading.
You don't need to take everything performance monitors like YSlow are telling you as an action item. The reports are only recommendations. As #Amin Gharavi said, if the images load fast enough for you, then it's probably okay.
The problem is if you are downloading images that are MUCH bigger than their apparent visual, which usually means much slower download in addition to lower visual quality in some browsers.
I regards to responsive design, if I have a set of large background images that fade between each other on large screen sizes and have them hidden on smaller screen sizes do they still load on the smaller screen sizes? I don't want to use unnecessary bandwidth if the images aren't going to show. It seems that they do not load on my computer, but it is difficult for me to test for every possible setup. If they do load and not show by default, is there any way to fix that? Also, I'd like this to work without having to use javascript, if possible.
"Adaptive Images" detects the user's screen size and automatically generate cache for that particular size.
I have used this previously in some of my projects, it works like a charm.
You can find more information here and here
And you can't avoid Javascript, that's the only solution as per my knowledge. But it is easy, all steps are given in above links.
Yes, most browsers will download images even if you have them hidden.
There is no way to stop image load with just html and css alone. JS is the best way to do this and it is also very easy, so you might not have any choice but to use javascript.
Just incase you decide to use javascript you should check out lazyload, it is very simple to use.
http://www.appelsiini.net/projects/lazyload
I like to use a lot of unique graphics on my pages, which often results in making different page sizes depending on available screen width/height.
Here are two examples:
http://www.uvm.edu/~areid/homesite/ - the image floats at the bottom of my screen but on a larger browser, the image floats near the middle making it look off. It looks best when the bottom of the window aligns with the bottom of the image
www.stevenlebel.com - it loads two different pages depending on what monitor size is detected.
This seems like a lot of redundant coding. My question is, how can I make sliced/Photoshop images transition well to different screen sizes. Does Photoshop allow you to make DIVS instead of tables?
Can i make each of the slices created by Photoshop grow/shrink when the browser window size changes?
If anyone has any input on creating websites like this I would be very interested to hear what they have to say.
Thanks
Katie
Using a combination of media queries with properly selected breakpoints, sprites or individual images, and even a library like foresight.js you can achieve the results you're looking for.
The media queries will allow you to set up your site for different screen groups with breakpoints set to cover most tablets, phones, etc. You could then load a different image version from a sprite or a separate image entirely. Finally, foresight.js will look at screen resolution and available bandwidth to load higher resolution images for retina browsers if so desired.
set the page size as
.page
{
width:100%
margin-left:auto;
margin-right:auto;
}
Take a tour on mediaqueri.es and find out how others have solved your problem and don't forget dribbble also. I think you know about web designing for PCs, others are smart phones, tablets and TVs. Get some basic understanding of the user interfaces of apps on mobile OSes. Read the Android Design, App Design Strategies for iOS and Designing UX for apps for Windows 8. After that I think you'll have a proper design to solve your question. Then learn about css3 media queries, start coding with html5boilerplate and start from the mobile design. Good luck!
Im looking for some options regarding scaling some HTML elements for use on a large screen (like a kiosk). I'm currently using CSS3 scale() to get a relatively cross-browser scale (thanks to cssplease), but seeing if anyone else has any better suggestion.
Primarily, I'm looking at rendering widgets (HTML, js, and images) on a large scale (from 400x200px to 800x500 for example). While I could rewrite each widget for a larger scale, I thought I'd check my options.
Is there something that SVG can do, or canvas? CSS3 scale() is okay, but images need to be replaced with high-res versions. Text spacing seems to also be slightly off.
Thanks!
CSS3 Transforms are still the best option for what I want, especially for browser performance.
Not sure if Understood you right, but if you need your website, images, videos etc to look good on any screen (with any resolution) you could try to go for responsive design. You have option of using css media queries to adjust website for different screen resolutions, it will also maintain original image quality etc.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
I found them very help full and once you get into it you would easily build scalable websites ;))
This may be an extensive retrofit but you might be able to define your elements' dimensions using ems then use media queries to increase the base font size for different screen sizes. So if your base font size is 16px, you main column might be 47em, sidebar 12em, for an approximate site width of 1000px. You could then use media queries to detect a larger browser and all you need to do is increase the base font size to 20px and viola your site is now 25% bigger.