Post by account_disabled on Mar 12, 2024 23:19:19 GMT -5
The your site performance can be even more severe. While its always a best practice to optimize your site using lossless and lossy image optimization techniques theres another consideration for mobile Should you even be downloading that image to begin with That big beautiful px wide hero image you use on your desktop site might be completely wasted on the smaller display of a phone or tablet even if that tablet as a high resolution or retina screen. The solution Consider loading a smaller image just for your mobile users. Be careful though theres a right and wrong way of doing this.
Quick aside for this example and your mobile site in general make Anhui Mobile Phone Number List sure youre specifying the viewport meta tag in the head section of your page. Basically this tells the mobile browser you have a responsive mobile site and not to try to autoscale a large desktop site down to mobile resolution ugly. Additionally if this tag is not present you will get different results in your Chrome tests below. meta nameviewport contentwidthdevicewidth initialscale. The wrong way Responsive design makes heavy use of at the smaller viewport sizes used by mobile devices so an obvious approach to swap out your images might go something like this DONT DO THIS style media minwidthpx .mobile_image display none desktop_image display inline media maxwidthpx mobile_image display inline .desktop_image display.
None style img srcmobile png classmobile_image img srcdesktop.png classdesktop_image This code displays one image when the screen resolution is wide and a differentsmaller image when the resolution is smaller. This looks just fine on the rendered page but theres a big problem both images get downloaded To verify load this sample in Chrome and youll see something like this code_mobile_waterfall Well thats not good in fact thats even worse You are wasting time and bandwidth downloading an image that wont even be shown The right way Instead.
Quick aside for this example and your mobile site in general make Anhui Mobile Phone Number List sure youre specifying the viewport meta tag in the head section of your page. Basically this tells the mobile browser you have a responsive mobile site and not to try to autoscale a large desktop site down to mobile resolution ugly. Additionally if this tag is not present you will get different results in your Chrome tests below. meta nameviewport contentwidthdevicewidth initialscale. The wrong way Responsive design makes heavy use of at the smaller viewport sizes used by mobile devices so an obvious approach to swap out your images might go something like this DONT DO THIS style media minwidthpx .mobile_image display none desktop_image display inline media maxwidthpx mobile_image display inline .desktop_image display.
None style img srcmobile png classmobile_image img srcdesktop.png classdesktop_image This code displays one image when the screen resolution is wide and a differentsmaller image when the resolution is smaller. This looks just fine on the rendered page but theres a big problem both images get downloaded To verify load this sample in Chrome and youll see something like this code_mobile_waterfall Well thats not good in fact thats even worse You are wasting time and bandwidth downloading an image that wont even be shown The right way Instead.