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.
Related
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!
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 am using srcset to display an animated GIF for users on large devices, but need to display a static JPG to users on small and medium devices.
The following code works great when I resize my browser window on a 1x screen. The issue I'm running into is when viewing the page on iPad in portrait mode (768px), the animated GIF is displaying. I get that the browser is trying to display a higher quality image, since it's a 2x resolution, but in my case, it needs to be an entirely different image.
How can this be changed to only show the GIF if the user's screen is wider than 940px?
<img src="static.jpg" sizes="(max-width: 940px)" srcset="static.jpg 940w, animated.gif 1400w" alt="">
This is not a job for srcset at all - srcset handles multiple sources that are all exactly identical except for resolution. If you're providing different images, use <picture> and multiple <source> elements.
For example, to answer your question precisely as asked:
<picture>
<source media="(min-width: 940px)" srcset="animated.gif">
<img src="static.jpg">
</picture>
But the meta-question remains: why are you only sending the gif to large-screen devices? Are you imagining that large-screen devices have more bandwidth or something?
I am using the picture element in HTML like so:
<picture>
<source media="(max-width: 375px)"
srcset="http://mysite/-/media/Images/picture.ashx?mw=375">
<source media="(max-width: 800px)"
srcset="http://mysite/-/media/Images/picture.ashx?mw=800">
<img src="http://mysite/-/media/Images/picture.ashx"
alt="responsive image that doesn’t break your layout">
</picture>
I am using a CMS to handle media, thus the .ashx extension. My CMS supports dynamically resizing images by appending a mw=X query string to call out max-width. My default mage is a .png with width of 1280px.
This appears to work great in Chrome 46.x. When I resize my viewport, the image shrinks appropriately to the various sizes.
What I'm confused on, is when I inspect network traffic (with both chrome and fiddler), I'm seeing my image downloaded twice. I've used chrome to set my viewport to an iPhone 6s and performed a "Empty cache and hard reload". What I see in fiddler is picture.ashx?mw=800 downloaded and then picture.ashx immediately following.
Screen shot from Chrome's network traffic:
Why is my browser downloading the image twice?
I found the problem. When using device mode in Chrome, the image is downloaded twice. If I just resize the browser window to a smaller size, it is not downloaded twice. I think this is just a bug in the Device Viewport.
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.