Home » Blog » Web Design » How to make mobile-friendly images using CSS
mobile-friendly image size

How to make mobile-friendly images using CSS

mobile-friendly image size
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.

Lead Editor

Jared Harrison is an accomplished tech author and entrepreneur, bringing forth over 20 years of extensive expertise in cybersecurity, privacy, malware, Google Analytics, online marketing, and various other tech domains. He has made significant contributions to the industry and has been featured in multiple esteemed publications. Jared is widely recognized for his keen intellect and innovative insights, earning him a reputation as a respected figure in the tech community.

More Reading

Post navigation

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to make responsive YouTube videos for all browsers and mobile devices

How To Hide Or Remove WordPress Page And Post Titles With CSS

How To Remove Or Style The Happy Face In The WordPress Footer