How to make mobile-friendly images using CSS
Mobile-friendly image
How your images appear on mobile devices such as Androids and iphones is very important these days. On April 21, 2015 Google released a new updated algorithm that affects mobile searches in all languages worldwide and has a significant impact on Google Search results. If the images on your website are not mobile-friendly then you will lose rank on Google Search results. This means that if your images bleed through or expand the width of your webpage and your visitors need to scroll to the side you will be affected by the algorithm change. Furthermore, mobile images that are not responsive and do not display properly on mobile device browsers are an eyesore to those who visit the webpage on their phones.
A useful CSS snippet for mobile developers and website owners is one that will speak directly to mobile devices without affecting how mobile-friendly images appear on a desktop computer screen. By setting the max-width property of the image using CSS the mobile image cannot bleed to the right of the page, regardless of the mobile images size.
This small CSS snippet will allow you to change mobile image size on all images so that images on your website are responsive on mobile devices and not changed on desktop computer displays. This code will help you make mobile-friendly images. The mobile-friendly CSS snippet below can be included onto your CSS style sheet for any website that contains a .style file or custom CSS style sheet for WordPress websites. To use the code, simply make a backup of your old CSS style sheet and copy and paste the max-width image CSS snippet below into your CSS style sheet and save it.
@media screen and (max-width: 480px) {
img {width:100%}
}
Too see if your images are mobile-friendly use a mobile device to view your website. If your images are still bleeding to the side of the webpage on a mobile device or do not display properly the CSS snippet above can be edited to your liking.
