I am stuck with an issue with Lighthouse Pagespeed that I've never experienced before and cannot replicate on any other website that I am managing.
The error message I am receiving is:
Serve images that are appropriately-sized to save cellular data and improve load time.
Screenshot from Pagespeed Insights
Here is the source code for one of the images in question (formatted for readability):
<img
width="300"
height="300"
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
src="https://example.com/assets/c1-300x300.jpg"
srcset="https://example.com/assets/c1-300x300.jpg 300w,
https://example.com/assets/c1-600x599.jpg 600w,
https://example.com/assets/c1-902x900.jpg 902w,
https://example.com/assets/c1-100x100.jpg 100w,
https://example.com/assets/c1.jpg 938w"
sizes="(max-width: 300px) 100vw, 300px"
alt=""
loading="lazy"
/>
I've found a long-closed GitHub issue addressing this behavior, where the devs responded that it is intended, and Lighthouse is using device pixel ratio of 3.0 on purpose. This explains why it picks the triple image size, but I still cannot figure out how I am supposed to “fix” this issue in the code.
I've tried further optimization for the images, but either it's irrelevant, or I haven't optimized enough.
Has anyone experienced the same, or has at least been able to replicate it on a different website?
It'd be great to find out both the cause (since the error message is not really telling anything) and the solution.
Ok, I've found out the cause. I was thinking that my smallest image size was close enough to the smallest necessary image size (at least according to Lighthouse), however, either it or its value multiplied by 3 wasn't.
So, the solution was to find out the screen width that Lighthouse Pagespeed uses for the mobile tests, which is 425 px, and then to provide a new image size specifically for this screen size along with the 2x and 3x versions.
I worked hard on making sure the correct image was loaded on devices. I actually found that gave me more control especially when coupled with preloading responsive images. For example,
<body>
<picture>
<source srcset="image-1200.jpg" media="(min-width: 992px)">
<source srcset="image-800.jpg" media="(min-width: 768px)">
<source srcset="image-500.jpg" media="(min-width: 0px)">
<img src="image-500.jpg" height="300" width="500" class="img-responsive" loading="eager" alt="Blah">
</picture>
</body>
Related
I was wondering if it is possible to stop WordPress from creating multiple copies of imagens, but still keeping, let's say, "medium" size.
I already edited my functions.php and the media options, leaving it all to "0", and it's fine. But, when I add an image do my post, the code reads as follow:
<img src="http://example.com/wp-content/uploads/2019/08/image.jpg" alt="" width="2008" height="1004" class="aligncenter size-full wp-image-XXXX" /></a>
I am using Jetpack and, for design reasons, I need the code to add the size to the image and change the "size-xxxx" class. For example:
<img src="http://example.com/wp-content/uploads/2019/08/image-1280x600.jpg" alt="" width="1280" class="aligncenter size-large wp-image-XXXX" /></a>
I can do this all manually, yes. But is there a way that I don't need to type this things everytime? Thank you!
I have a simple HTML5 audio player that I would like to make responsive in Bootstrap.
<div class="col-sm-4 col-sm-offset-4">
<audio controls style="width: 600px;">
<source src="sample.mp3">
</audio>
</div>
Is there a way to make the div containing this audio player responsive no matter what content is in it or at least a class or something to make the audio player responsive? Hoping to not have to use an external library if possible.
Thanks!
I suggest to use width:100% and max-width:600px.
When you make the window smaller in a desktop browser you will not see it the same way as on a real mobile device, but the audio element on mobile devices (i.e. iOS, Android) is definitely going to be smaller anyways - you don't have much influence on its apprearance. Together with those settings it should adapt to just about any situation properly.
(You just might want to add a second source tag with the audio in ogg format and also add the file format in the source tag/s, see https://www.w3schools.com/tags/tag_audio.asp)
Try:
<div class="col-sm-4 col-sm-offset-4 embed-responsive embed-responsive-4by3">
<audio controls class="embed-responsive-item">
<source src="sample.mp3">
</audio>
</div>
Ref: http://getbootstrap.com/components/#responsive-embed
I'm currently using DYI app builder platform and they have a <>source code page. So I put in
<img src="URL.png"/>
And it worked! But when I tried to shrink the image (original image is width=256 height 256)
<img src="URL.png" Width="100" Height="100"/>
Nothing happens to the size of the image.
So I tried
<div style="width:100px;height:100px;overflow:hidden;" >
<img src="URL.png" width="100px" height="auto">
</div>
Which I picked up on StackOverflow.. But it doesn't work.
Please help. BTW I have no knowledge of coding so please do not skip a step assuming I would know it.
(When I apply the code and go back to the source code page width and height disappeared from the source code page except the bare bone Img src="URL")
Something in your program is overriding it or disabling it (filtering it away). If it is another css rule that is overriding your css, then you could try:
width:100px !important;height:100px !important;
if this doesn't work then apparently the css gets filtered out, you might check the program's settings if this behavior can be changed
Try to save the page, in the DYI app builder you're using.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I set retina graphics for my website?
What is the best method for adding 2x images to webpages that will be displayed on the new iPad with Retina graphics?
I've gone through these articles.
http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/
http://www.teamdf.com/web/automatically-serve-retina-artwork/191/
http://retinajs.com/
There are various suggested methods for tackling the problem of Retina displays (and large display screens etc.) unfortunately most of these are just that, suggestions.
The two most popular are the suggestion of adding a tag, which accepts multiple images and the browser will load only one (dependant on media queries specified by the developer):
<picture alt="angry pirate">
<source src=hires.png media="min-width:800px">
<source src=midres.png media="min-width:480px">
<source src=lores.png>
<!-- fallback for browsers without support -->
<img src=midres.png alt="angry pirate">
</picture>
The other suggestion is specifying multiple sources for an image using 'srcset' on an image:
<img alt="Cat Dancing" src="small-1.jpg"
srcset="small-2.jpg 2x, // this is pretty cool
large-2.jpg 100w, // meh
large-2.jpg 100w 2x // meh#2x
">
I personally think this is a lot more ugly (and it leaves you less control as the browser decides which image to load) but from my understanding the second solution has been added to the official spec (in some capacity)
Outside of these suggestions the only real current solution is to start with an image 2x the original size (or 1.5x depending on your preference)
It may be possible to try and get all fancy and do a JavaScript solution, but I think that would be over complicating things ...
Below is a really good articles which discusses the issue you describe (I feel I'm rambling a bit!):
http://www.alistapart.com/articles/mo-pixels-mo-problems/
I am using a HTML5 video tag in my website. That video is playing perfectly with all browsers, but in IE9 it shows a black border(black extension). It is like the one usually the video players will show some black color extension on its both the side when the size of the player is more than the size of the video.
This is the solution we use.
For video, we display HTML5 by default backed in CDN storage. We also have fall back for Flash and then fall back for non-flash. So it checks HTML5 first, then flash failing that and then no content for non-flash support indicating some message about the user to upgrade their Fred Flintstones machine, we also offer an alternative so they can move out of BedRock!
Code
<style type="text/css">
.videobox{position:relative;width:300px;500px}
#video_box_id_css, .video_box_class{border:0px !important}
/* BACKGROUND SHOULD BE PAGE BACKGROUND */
.left{position:absolute;width:3px;height:500px;left:1px;z-index:10;background:#fff}
.right{position:absolute;width:3px;height:500px;right:1px;z-index:10;background:#fff}
</style>
<div class="videobox">
<video id="video_box_id_css" class="video_box_class" autoplay loop width="300" height="500">
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_VP8.webm" type='video/webm'/>
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_libtheora.ogv" type='video/ogg'/>
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_x264.mp4" type='video/mp4'/>
<!--
ALTERNATIVE CONTENT LIKE SWF
VIDEOS FOR NON HTML5 BROWSER
//-->
</video>
<div class="left"></div>
<div class="right"></div>
</div>
Code Info
Our code is above (removed the flash so it is more readable). A side thing to note is we add a left and right div column which goes over the video black borders. You can tweak these and even add a bottom and top if needed.
Photo
The green border is actually the white div in opacity so you can sit the effect. It may be hacky but it the best solution we found.
Final
The result is much better as you can see below:
I've had this issue before, usually the problem lies within the video itself. When you encode your video try to match the settings as closely as possible to what you will use in your tag. It shouldn't be a roadblock for you, once you inspect the video a bit closer you should see a discrepancy.