I'm having a bit of trouble understanding how to implement retina images with Picturefill
This is what I have...and I don't think it's working:
<picture>
<img
src="img/small.jpg"
srcet=
"img/large.jpg" data-media="(min-width: 800px) 900w"
"img/large.jpg" data-media="(min-width: 800px) and (min-device-pixel-ratio: 1.5) 1800w"
"img/medium.jpg" data-media="(min-width: 640px) 640w"
"img/medium_2x.jpg" data-media="(min-width: 640px) and (min-device-pixel-ratio: 1.5) 1280w"
"img/medium.jpg" data-media="(min-width: 320px) 320w"
"img/medium_2x.jpg" data-media="(min-width: 320px) and (min-device-pixel-ratio: 1.5) 640w"
size="100%"
alt="">
</picture>
The media-queires pull the images that are 2x bigger. Set it to 1.5 for Android devices.
Related
I have a simple webpage that I originally created using Vuetifyjs and I decided not to use that framework anymore. I have managed to strip all vuetify code and replace it with vanilla html/css, with the exception of v-img.
I am using the image as a banner image at the top of the page.
original code
<v-img
class="ban"
src="bg1-2560w.webp"
alt="some img"
lazy-src="pre.webp"
srcset="bg1-2560w.webp 2560w,
bg1-1440w.webp 1440w,
bg1-1024w.webp 1024w,
bg1-768w.webp 768w,
bg1-425w.webp 425w,
bg1-375w.webp 375w,
bg1-320w.webp 320w"
sizes="(min-width: 320px) 320w,
(min-width: 375px) 375w,
(min-width: 425px) 425w,
(min-width: 768px) 768w,
(min-width: 1024px) 1024w,
(min-width: 1440px) 1440w,
(min-width: 2560px) 2560w"
/>
I have tried replacing it with
<picture>
<source srcset="bg1-2560w.webp" type="image/webp" media="(min-width: 2560px)">
<source srcset="bg1-1440w.webp" type="image/webp" media="(min-width: 1440px)">
<source srcset="bg1-1024w.webp" type="image/webp" media="(min-width: 1024px)">
<source srcset="bg1-768w.webp" type="image/webp" media="(min-width: 768px)">
<source srcset="bg1-425w.webp" type="image/webp" media="(min-width: 425px)">
<source srcset="bg1-375w.webp" type="image/webp" media="(min-width: 375px)">
<source srcset="bg1-320w.webp" type="image/webp" media="(min-width: 320px)">
<img src="bg1-2560w.webp"
alt="some image"
height="769"
width="2560"
loading="lazy"
decoding="async"
class="ban"
/>
</picture>
The v-img version does what I want. However, it seems wasteful to import vuetify into my project solely for this one tag.
When I use the picture version and I run lighthouse on chrome. I get he following issues
Displays images with incorrect aspect ratio
Serves images with low resolution
Who do I fix this to perform similarly to the vuetify version for this limited case?
I have some div classes:
<a href="https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-reply-
to-ad/31/3-books/"><div class="email"><span><center><span class="fa
fa-envelope"></span></center></span></div></a><a href="tel:<br/>.
<label>Phone:</label> XXXX. XXXX XXXX"><div class="phone"><span>.
<center><span class="fas fa-phone"</span></center></span></div></a>
<a href="http://maps.google.com/maps?q=<br/><label>Location:</label>
London, London,
UK&zoom=14&size=512x512&maptype=roadmap&sensor=false""><div
class="location"><span><center><span class="fas fa-map-marker-alt".
</span></center></span></div></a>
One,.email i can't seem to alter the width in orientation:landscape
Tried css:
#media (max-width: 768px)and (orientation: landscape){.email {padding:0px; position: unset; float:unset; width: unset;background-color:unset; margin:unset; height:unset; display:unset;}}
and
#media (max-width: 768px)and (orientation: landscape){.awpcp-subtitle >.email {width: 10px !important; display:block;}}
Page for mobile landscapes view :https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/31/3-books/london/uk/london/business-advert/
When I have the srcset property on my <img /> tag, why doesn't it show up in the browser? It appears as through React.js is stripping it out.
<img src="/images/logo.png" srcset="/images/logo-1.5x.png 1.5x, /images/logo-2x.png 2x" />
The solution is to use srcSet instead of srcset.
<img src="/images/logo.png" srcSet="/images/logo-1.5x.png 1.5x, /images/logo-2x.png 2x" />
Reference: https://facebook.github.io/react/docs/tags-and-attributes.html under HTML Attributes
Another ugly solution using template literals:
<img
alt=''
src={require('../../assets/images/logo/logo.png')}
srcSet={`
${require('../../assets/images/logo/logo#2x.png')} 2x,
${require('../../assets/images/logo/logo#3x.png')} 3x
`}
/>
Tried to use srcSet with a string didn't work for me probably because how Webpack works so in the end, imported them and include them with the template string as in the next example:
import nat1 from "./img/nat-1.jpg";
import nat1Large from "./img/nat-1-large.jpg";
import nat2 from "./img/nat-2.jpg";
import nat2Large from "./img/nat-2-large.jpg";
import nat3 from "./img/nat-3.jpg";
import nat3Large from "./img/nat-3-large.jpg";
<div className="composition">
<img
srcSet={`${nat1} 300w, ${nat1Large} 1000w`}
sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
alt="Photo 1"
className="composition__photo composition__photo--p1"
src={nat1Large}
/>
<img
srcSet={`${nat2} 300w, ${nat2Large} 1000w`}
sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
alt="Photo 2"
className="composition__photo composition__photo--p2"
src={nat2Large}
/>
<img
srcSet={`${nat3} 300w, ${nat3Large} 1000w`}
sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
alt="Photo 3"
className="composition__photo composition__photo--p3"
src={nat3Large}
/>
</div>
import meal1x from '../images/meal.jpg';
import meal2x from '../images/meal#2x.jpg';
import meal3x from '../images/meal#3x.jpg';
<img
className='meal'
src={meal1x}
srcSet={`${meal1x} 1x, ${meal2x} 2x, ${meal3x} 3x `}
/>
Responsive images, the use-cases and the new HTML5 picture element are explained quite well in this article.
Update: To be more specific, I mean with responsive images, resized images for different devices. Less image weight, so faster loading sites.
Up to 72% less weight.
The shown Examples are just filenames (no path), in practice it will be more verbose like:
<picture>
<source
media="(min-width: 1280px)"
sizes="50vw"
srcset="wp-content/uploads/2015/03/opera-fullshot-200.webp 200w,
wp-content/uploads/2015/03/opera-fullshot-400.webp 400w,
wp-content/uploads/2015/03/opera-fullshot-800.webp 800w,
wp-content/uploads/2015/03/opera-fullshot-1200.webp 1200w,
wp-content/uploads/2015/03/opera-fullshot-1600.webp 1600w,
wp-content/uploads/2015/03/opera-fullshot-2000.webp 2000w"
type="image/webp">
<source
sizes="(min-width: 640px) 60vw, 100vw"
srcset="wp-content/uploads/2015/03/opera-closeup-200.webp 200w,
wp-content/uploads/2015/03/opera-closeup-400.webp 400w,
wp-content/uploads/2015/03/opera-closeup-800.webp 800w,
wp-content/uploads/2015/03/opera-closeup-1200.webp 1200w,
wp-content/uploads/2015/03/opera-closeup-1600.webp 1600w,
wp-content/uploads/2015/03/opera-closeup-2000.webp 2000w"
type="image/webp">
<source
media="(min-width: 1280px)"
sizes="50vw"
srcset="wp-content/uploads/2015/03/opera-fullshot-200.jpg 200w,
wp-content/uploads/2015/03/opera-fullshot-400.jpg 400w,
wp-content/uploads/2015/03/opera-fullshot-800.jpg 800w,
wp-content/uploads/2015/03/opera-fullshot-1200.jpg 1200w,
wp-content/uploads/2015/03/opera-fullshot-1600.jpg 1800w,
wp-content/uploads/2015/03/opera-fullshot-2000.jpg 2000w">
<img
src="wp-content/uploads/2015/03/opera-closeup-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="wp-content/uploads/2015/03/opera-closeup-200.jpg 200w,
wp-content/uploads/2015/03/opera-closeup-400.jpg 400w,
wp-content/uploads/2015/03/opera-closeup-800.jpg 800w,
wp-content/uploads/2015/03/opera-closeup-1200.jpg 1200w,
wp-content/uploads/2015/03/opera-closeup-1600.jpg 1600w,
wp-content/uploads/2015/03/opera-closeup-2000.jpg 2000w">
</picture>
Setting the full path every time seems akward.
I prefer this:
<picture pathset="http://example.com/wp-content/uploads/2015/03/">
<source
media="(min-width: 1280px)"
sizes="50vw"
srcset="opera-fullshot-200.webp 200w,
opera-fullshot-400.webp 400w,
opera-fullshot-800.webp 800w,
opera-fullshot-1200.webp 1200w,
opera-fullshot-1600.webp 1600w,
opera-fullshot-2000.webp 2000w"
type="image/webp">
<source
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-closeup-200.webp 200w,
opera-closeup-400.webp 400w,
opera-closeup-800.webp 800w,
opera-closeup-1200.webp 1200w,
opera-closeup-1600.webp 1600w,
opera-closeup-2000.webp 2000w"
type="image/webp">
<source
media="(min-width: 1280px)"
sizes="50vw"
srcset="opera-fullshot-200.jpg 200w,
opera-fullshot-400.jpg 400w,
opera-fullshot-800.jpg 800w,
opera-fullshot-1200.jpg 1200w,
opera-fullshot-1600.jpg 1800w,
opera-fullshot-2000.jpg 2000w">
<img
src="http://example.com/wp-content/uploads/2015/03/opera-closeup-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-closeup-200.jpg 200w,
opera-closeup-400.jpg 400w,
opera-closeup-800.jpg 800w,
opera-closeup-1200.jpg 1200w,
opera-closeup-1600.jpg 1600w,
opera-closeup-2000.jpg 2000w">
</picture>
BTW for readability and programming logic I prefer the responsive
stuff in the path not in filename. The you can do this
<picture pathset=/pathtoimages/>
<source fileset=opera-fullshot.webp
sizes="(min-width: 640px) 60vw, 100vw"
...
srcset="200w/ 200w,
800w/ 800w,
1200w/ 1200w,
1600w/ 1600w,">
...
<source fileset=opera-closeup.webp
...
srcset="200w/ 200w,
800w/ 800w,
1200w/ 1200w,
1600w/ 1600w,">
</picture>
If you drop support for a certain width, just delete the directory.
But the main issue, we need quite a lot of code for 1 image.
So, to limit that (without any JS solution):
Can I set something like a pathsrc attribute or scoped base element?
Nope.
It is an obvious idea to use a template syntax in srcset. In fact it was part of the earliest srcset draft. However, URLs can and do contain anything, and don't always map to a template (e.g. generated GUIDs for different images), so it didn't work.
In theory you could use XHTML and xml:base. In practice, you don't use XHTML, and xml:base support is being removed from browsers.
I would recommend not worrying so much about the repetition, just make sure you use gzip.
Disclaimer this is not an solution to your question. But a solution for responsive images
SVG
The <svg> element is highly supported.
There is an example of a responsive svg image:
circle {
fill: firebrick;
}
svg {
border: 1px solid black;
}
<svg width="100%" height="100%" viewBox="0 0 100 100">
<rect x="10" y="10" width="50" height="50" fill="DarkOrange" />
<rect x="40" y="40" width="50" height="50" fill="SeaGreen" />
<circle cx="50" cy="50" r="30" />
</svg>
Press the run code snippet and then Full page to test it out.
CSS
Or you can simple use an image that scales down properly:
body {
width: 100%;
}
.container {
width: 100%;
}
.container img {
display: block;
max-width: 100%;
height: auto;
}
<div class="container">
<img src="http://i.ytimg.com/vi/4rY4PlSCy48/maxresdefault.jpg" />
</div>
I am trying to add a div for social network widgets to the end of the footer on my website.The code works out on my desktop,but the contents alignment is changed when I test it on ipad,iphone and windows phone.Here is the code:
<div style="background-color: #1E2629;">
<div class="container">
<div class="row text-center">
<div>
<ul class="list-inline">
<li>
<div class="fb-like" style="overflow:hidden;" data-href="https://www.facebook.com/WebsitePage" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
</li>
<li>
<div>
Follow #CardInbox
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
</div>
</li>
<li>
<div>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/FollowCompany" data-id="111111">
</script>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Add media queries for each device screen size,
/* Ipad Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* your css code
.container {} */
}
/* iPhone 4/4s Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
/* your css code
.container {} */
}
/*5/5S */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
Windows phones comes in different screen size. So configure accordingly .