I've taken over a site and for some reason I can't get the image of the credit card logos to show on an iPhone 4. The image shows up and looks great when I test the site on an iPhone 4 on http://quirktools.com/screenfly/ but when I look at it on an actual iPhone 4 the credit cards logos are not there. Using IOS 7.0.2
Here is the code:
<img class="auto auto1" srcset="images/credit-cards-paypal.png 450w,
images/credit-cards-paypal-350md.png 350w,
images/credit-cards-paypal-200sm.png 200w"
src="images/credit-cards-paypal.png" >
Here is the page with the CC logos: http://www.oralsurgeons.com/register.php
URL to my style sheet: http://www.oralsurgeons.com/includes/style.css
Any help you can give me is greatly appreciated. Thanks
Normally this version of iOS shouldn't support srcset at all, and therefore shouldn't have been impacted by the presence of srcset :/
Can you please try:
Add images/credit-cards-paypal.png 1x, to the start of the srcset value?
Removing srcset altogether?
I'm guessing either the path in your src isn't correct or the name of your non-retina image isn't correct.
I for example forgot a slash in my src path. It might be working in quirk tools because it's loading the srcset image — if your screen's a retina screen — which has the correct data.
Related
What the specification says about cases when the same path (or probably the same sized images) appear with different pixel density descriptors?
The following example renders differently in desktop (Windows) Firefox 82.0b2 and Chrome 85.0.4183.121. The image appears natively scaled in FF and half the size in Chrome
<html><head></head>
<body>
<img src="testpicture.jpg" srcset="testpicture.jpg 2x">
</body>
</html>
The reason I'm asking is because a commercial CMS I use very often uses such output. In order to encourage them to avoid this I need a clarification. In this CMS the rendered content works mostly properly in FF, but in Chrome the rendering is sometimes unexpectedly scaled or some image content not appears at all (probably relating to cache availability of different sizes).
Update: This is very likely a chromium issue when the browser due to internal logic related to caching chooses a wrong variant. But until it finally fixed, I'd rather not post my own answer
The srcset attribute is a feature that enable responsive images. Specifically srcset gives the browser a hint what resolution images are available. In your case there is only on definition which hints at one image (testpicture.jpg) which has double (2x) resolution. But since there is only one definition, the srcset attribute won't do nothing and could be omited.
A full example would look like this:
<img src="/files/16864/clock-demo-200px.png"
alt="Clock"
srcset="/files/16864/clock-demo-200px.png 200w,
/files/16797/clock-demo-400px.png 400w"
sizes="(max-width: 600px) 200px, 50vw">
Check out the MDN documentation for the image element and their guide on responsive image for further details.
I'm new to this world and I'm learning by myself with the "Learning Web Design" book by Jennifer Robbins.
I got in the "Responsive images" chapter. After reading everything was clear but when I tried the exercise things got tricky.
The exercise on the book asked me to replace 3 tags from a previous page and replace them with a tag and a set of three files for each image (400, 800 & 1200px).
The code on the book is this:
<picture>
<source media="(min-width: 640px)"
srcset="images/bread-800.jpg 800w,
images/bread-1200.jpg 1200w"
sizes="80vw">
<img src="images/bread-400.jpg" alt="close-up of sliced rustic bread">
</picture>
I tried it and checked with Chrome developer tools but I can't see the 800px image file. For <640px width the browser gets the 400px file. And for >=640px widths it uses the 1200px files.
I also uploaded the page on GitHub at david0495.github.io/gallery.html and tried XRespond.
Here is a screenshot of the result:
screenshot
At last, I tried to open the page on Chrome with a resized window. Enlarging the windows I can see finally see the 800px file. But I'm not understanding at which size it activates and why I can't see it on developer tools.
I'm getting crazy with these thing. Hope someone can help. Thank you!
this is the link to my website: http://oanceacezarfotograf.com
I have an issue when displaying images on iOS devices. When on every other device there is no problem at all, when accessing my site from any iOS device (have tried with my iPhone 6 and a friends iPhone 6) no images at all on the website will be shown.
The website is coded just in HTML so all the code is out there. I have already tried the solution shown in this post:
2017 Answer to "How to make background image fixed on iPhone6"
But then everything just screws up, as shown on http://oanceacezarfotograf.com/test.
I have no idea at all how to solve this or what causes the problem. Any help would be much appreciated.
Thank you.
iOS (and several other browsers) does not support webP image format: https://caniuse.com/#feat=webp
Either use supported image formats like jpg or use the picture tag to support both:
<picture>
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>
Source: https://css-tricks.com/using-webp-images/
Side note: Also consider downscaling the images, they are huge (6000x4000px) and take a while to load even at a higher speed connection.
I am trying to change/art direct an image based on device and screen sizes — not just change the resolution of the image.
I am using the <picture> element, and it is working fine when I resize browsers on my desktop, but is not working on mobile devices.
The code currently reads:
<picture>
<source media="(min-width: 950px)" srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home.png">
<img src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”>
</picture>
I understand that <picture> is not supported on all platforms, so I also tried srcset, as follows:
<img srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png 500w,
http://phillipsperfections.com/images/PhillipsPerfections_Home.png 950w"
sizes="100vw”
src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”>
I want the image to always be 100% width, and to switch to a different image when viewing below 950px.
I am referencing code from here http://alistapart.com/article/using-responsive-images-now#section3, but am I missing something? Can someone point me in the right direction?
My working site is http://phillipsperfections.com/. You should be able to view source for all of the code.
Thanks so much!
Because the two versions contain different visual content, you are indeed “art-directing”, and should use the <picture> element (and not srcset) to switch between the two versions of your image.
(If the two versions were identical, scaled-up-and-down versions of each other, srcset would be the way to go).
Your <picture> markup looks correct; what mobile browser are you not seeing the expected version in? <picture> support is actually pretty good these days; here’s a current support matrix.
If you need the art direction to work in older browsers, you’ll need to use Picturefill — and inspecting your site, it looks like you are! But with some extra quotes which are preventing the script from loading:
<script src="“http://phillipsperfections.com/js/picturefill.js"" async=""></script>
If you change that to:
<script src="http://phillipsperfections.com/js/picturefill.js" async></script>
Do you see the desired behavior in the mobile browser that wasn’t showing it to you before?
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