I have a web page with a row 1200px wide with some 3/4 columns, each one holding an image, that is each image may be 300/400 px wide. On collapse, below the breakpoint (768), images appear blurred because they are scaled to 768px in width.
I wanted to keep things as small as possible, however I think I'll have to use larger images, shrinking them with media queries on large desktop view and 1:1 (almost) on tablets.
Any thought?
You can upload the images to 768px if that is the biggest they get. If you have a lot of images and worry about download time for slow connections or bandwidth from server, consider only load images depending on resolution.
You can read more here:
http://www.html5rocks.com/en/tutorials/responsive/picture-element/
You can also google responsive images and see what would fit you best, or build your own solution if you are into that :)
Related
I have a very large hero image, set as a background-image, that takes up the entire initial viewport size. I want to serve up multiple sizes based on device resolution for improved speed.
Media queries seem like the best approach, but I have some questions about implementing them:
Would it be better to use the width feature or device-width feature? I'm thinking the latter, because the width can change if a user resizes their browser, which could trigger a new background-image to load. With device-width, I can detect the largest possible screen size and load an image whose dimensions can look good if the user resizes their browser to full size.
How do you accommodate for pixel density? I need to make the images twice as big, or in some cases, three times as big, so they render properly on devices with large pixel density. So I can't really cut down the image size that much when I have to account for potentially high pixel density. I could make media queries targeting specific pixel densities and device-widths together, but that's seems like a complicated and suboptimal solution.
I'd love to hear some solutions people have found for this.
How can I force mediawiki to disable resizing and use the original size of my image? My main problem is that I'm uploading small parts of screenshots. If I don't use the original size then they look awful. (Imagine a 237px wide image resized to 400px....) But I don't see any option for that.
http://www.mediawiki.org/wiki/Help:Images#Size_and_frame
By simply using the image name, it will fit the image to screen which is really bad! For example, a 300px wide screenshot cutout looks awful on a full hd monitor... You could say that the image may be too large for the users' screen but in my particular case that is not the case. I'll always be using small images (300px and smaller) and the users will always watch these pages on desktop monitors.
I'm sorry I was very dump. If I don't use any option then it is displayed in its original size. I was mistaken because somebody has changed the zoom level of my browser, but I did not realize this because the monitor resolution was so high...
I have a responsive WordPress-based website (with all the media queries that auto adjust when you adjust the width of the site) and I currently have it set to 980px in width.
My content area is only 600 px in width, as my sidebar and margins/wraps take up the rest of the width.
Current:
--------------content 600px-------------|--sidebar+margins = 980 px
I'd like to have a wider content area without altering the sidebar/margins/wraps.
Because this is a high quality responsive theme, is there any danger in setting the full width to, say, 1170px? This would make the content area 790px, which would be much more manageable for me.
Desired - but appropriate, if responsive?
-----------------------content 790px----------------------|--sidebar+margins = 1170 px
Or will this just totally screw things up on Iphones/tablets, etc.? Thanks for any guidance anybody can offer!
We have so many templates using 1170px and no problems with this when it's responsible. Working in every iphones, ipads and tablets.
I've recommend you to install in your browser (chrome) a plugin called Window Resizer. That will help you when you are developing this.
I'll second Franks answer, and also would like to add that the content is always the determinant of the appropriate size. I've pushed sites as big as 1280 on the upper limit.
Responsive Web Design tends to focus a lot on small screens, but smart TV's and other big screen devices pose a whole new set of challenges, and big allowing for bigger widths is a great thing for end users.
I want all images for a mobile site to be 640px wide, based on iPhone screen size.
All images should be the full width of the screen when shown img { width: 100%; height: auto; }.
For the images that are smaller than 640px wide, is it better to use the above CSS to scale them up, or should I use Photoshop or something to scale the actual image up? Does it even make a difference?
So does scaling up an image using CSS result in a better or worse image quality than using something like Photoshop to increase the size?
Scaling images up doesn't go well for the quality of said images, you need to sort out your priorities on this one. You can work on those images and increase the quality and size of those images in Photoshop so you don't lose any quality when resizing, but this will increase page loads or you could lose some quality, but improve page loads with smaller but more crappy images.
If you really want to target each device (computer vs mobile) perfectly you can use javascript to switch out the images. This can be done really easily using http://foundation.zurb.com/docs/components/interchange.html or similar libraries.
If the images are graphics or icons I might suggest just making them svgs and using those instead as they are crisp at a greater range of resolutions. If you go with this option its best to make their sizes multiples of two.
Is an image displaying in a lightbox script (e.g. prettyPhoto, lightbox, thickbox, etc) affected by high pixel ratio devices?
For example, if I had an 800px wide image up in a lightbox, will it be shown at 800 CSS pixels or 800 actual pixels? To probe further, is an image displayed raw in the browser affected in the same way?
If images displayed with lightboxes are affected by retina screens, what's the solution? Simply link to a larger image? (assuming the script auto resizes images to fit in the viewport)
Perhaps someone needs to develop a new jQuery plugin. :)