How do I debug srcset with different dpr? - html

I've decided to change my site to use srcset for the images to account for low dpi screens. My site is images heavy, and the default 400x400 thumbnails look very nice on a hidpi screen. On a lodpi screen they're an overkill as the actual size of displayed image is 165x165. After the changes my img elements look more or less like this:
<img class="img-rounded img-responsive"
src="/photos/tiny/gcu-01015.jpg"
srcset="/photos/tiny/gcu-01015.jpg 170w, /photos/thumb/gcu-01015.jpg 400w">
/tiny/ images are 170x170 and /thumb/ ones are 400x400. Sure enough, loading a page with these on a hidpi screens gives me 400x400 version. That shows the browser sees srcset and acts accordingly. I pull up the developer tools in Firefox, enable "Responsive Design Mode, change the "screen" size to 300x700 with device pixel ratio of 1.0 and reload the page. It still uses the/thumb/` version, even though the images on the page are now 120x120, and with dpr of 1.0 there's no point in pulling down 400x400 images.
Here's the page in question.
I've fiddled a bit with it but I couldn't find a good answer for the selection of the images. I'm pretty sure I'm missing something here :|

Related

Google Chrome version 40 srcset attribute problems

I'm seeing a lot of inconsistencies with srcset attribute on img tags (responsive images) in Chrome 40.0.2214.91
Before I updated to Chrome v40 (I was on ~39), srcset attribute worked fine and would swap the image upon browser resize. Now, sometimes, the smaller version of the image will display if I have the browser set to the desired width then refresh the page. Other times it will not work whatsoever.
Testing jsbin:
http://jsbin.com/hulaconake/1/edit?html,output
Image tag I have:
<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">
I'm also testing this in another env with non-Placehold.it images, and using Picturefill.js http://scottjehl.github.io/picturefill/
I'm not having any issues in FF or Safari (both using picturefill).
iOS Chrome has similar problems.
Is my syntax wrong? Is there something going on I don't know about?
It's a feature not a bug. Chrome does not switch the size because Chrome already has a larger image in cache, so there is no need to download new data of the same image.
In case you want to use different images or same image with different crops, use the picture element.
Responsive images can be technically differentiated between 2 types.
srcset with source descriptors (let the browser choose the right image based on screen size/resolution, bandwidth…):
density descriptor (x) (for static image sizes, Retina vs. normal resolution)
width descriptor (w) and the corresponding sizes attribute (for flexible, responsive / adaptive images (automatically also includes Retina optimization)
and the picture element with its source[media] children (gives the author control about what srcset should be chosen by the browser depending on specific media queries)
So img[srcset] is for resolution switching and picture is for different images reacting to your design

How to show the same logo image with proper dimensions on all devices and browsers?

I'm designing a website using Bootstrap framework 2.0.1.
But I'm having one issue with the image logo I used on my website. The logo image looks fine on PC and laptops but when I see this logo image on devices like iPhone and iPad it loses it's quality, the image logo looks blur and stretched.
So my question to you is how should I overcome this issue?
Do I need to create three different copies of same logo image with different dimensions and use them respectively for laptop/PC, iPhone and iPad? If yes how?
If there is any other better solution for this problem please let me know.
Thanks in advance.
One option regarding different image copies based on resolution, would be the srcset attribute. It specifies sources for an image based on the pixel density of the user’s display.
For example:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w">
"In the simple example above, all we're doing is telling the browser about some images that we have available and what size they are. The browser then does all the work figuring out which one will be best."
Read more here.
have you considered converting the image to an SVG?
because it uses vectors rather than pixel data it won't distort regardless how far it gets stretched/squashed.
and i believe it's cross-browser compatible back to ie8
http://caniuse.com/#feat=svg
you can download inkscape for free (or use illustrator if you have it) and try converting the image to SVG to try it out

Why won't these images load on mobile? - HTML/CSS

On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there
I have checked your files, #MrVimes is correct your should finish your html which will help validate better on slower devices.
However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.
Try using Picturefil.js to serve smaller images or make them smaller in your software application.
This was the picture I got from Google Dev Tools (which is free and amazing):
Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:
Position:center
Is not valid, maybe set it to relative or static depending on how you want your page structure to look.
I also saw you may want to update your header with this css:
z-index: 99999;
This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)
sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser
IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI
take a look here for maximum image size and resolution support Apple IOS developper
to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it
Note: Check the avaible space on your IOS DEVICE should be greater then 50MB
You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices

image quality deteriorates when used more than once

In my html page, I include an image as
<img src="http://i44.tinypic.com/w2o9kh.png" border="0" alt="Image by TinyPic">
I style it from an external css by
img {width:2em;height:2em; }
However I notice that the image quality deteriorates when same image is used more than once in a page.
Compare http://jsfiddle.net/aJ333/50/ and http://jsfiddle.net/zxgQr/ in firefox. The quality of smiley is worse in the first one.
Any insight on why this happens and how to retain the quality ?
P.S. Ive checked this happens even if images are in different div containers.
P.S. This seems to be browser specific:
In chrome both are good quality
In IE9 both are bad quality
In firefox quality of smiley is worse in the first fiddle.
I would like this to work in firefox at least.
Im novice in html so please bear with in case this is obvious
You are setting a height and a width value on your images. If those values are bigger or smaller than the actual dimensions of the picture, the browser must scale it. This process changes the resolution of the picture making it look somewhat blurry.

Serving identical double-sized images to retina display computers AND non-retina computers?

On my website, I have a 1300x200 image that I am forcing down to 650x100 using the simple width=650px parameter in the img tag. What happens when a retina Mac/iPhone/iPad user views my site. Will they see the full quality 1300x200 image, or will the quality artificially be reduced by half?
As far as whether or not this is efficient, it's just a 50k PNG. My site is otherwise mostly vectored with text/CSS. You could argue this is more efficient than messing with browser-agent detecting Javascript.
Ok folks, I went about answering it myself, and yes, if you use the width tag to half-size an img in HTML, the retina browser will display the full sized image.
I displayed the 1300x200 image half-sized using width on the top, and the plain 650x100 image on the bottom. Zoomed in using Safari on iOS 6.