# Different attribute values for an HTML element based on responsiveness

There was a situation where I need to set the `width` and `height` attributes of an image *without* the CSS, since I was setting the CSS height via TailWindCSS's classnames based on responsiveness - `h-9 sm:h-20` - `h-9` for mobile view and `h-20` for desktop view. Because [Setting Height And Width On Images Is Important Again](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/) for Google's [PageSpeed Insights](https://pagespeed.web.dev/), I had to set the `width` and `height` attributes of the HTML `img` element on the server side, using PHP.

[detectmobilebrowsers](http://detectmobilebrowsers.com/)
has real short insert-able snippets for almost every web language. For PHP, its at http://detectmobilebrowsers.com/download/php

You'll get a 3 line code like below - the regular expression is not included in this post as it's too long.

Include this in your base php file :

```
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/this is a very long regular expression/i',substr($useragent,0,4)))
    $GLOBALS['isMobile'] = true;
?>
```

Then, in the HTML file you can set the `width` and `height` attributes :

```
$dimensions = 'width="80" height="80"';
if (isset($GLOBALS['isMobile']) && $GLOBALS['isMobile'])
    $dimensions = 'width="36" height="36"';
```

Now my `img` tag in my HTML looks like this :

```
<img class="h-9 sm:h-20" src="https://my-bucket.amazonaws.com/images/my-image.webp" alt="my image" <?php echo $dimensions ?> />
```

Now Google PageSpeed Insights won't complain of [images without dimensions](https://web.dev/optimize-cls/#images-without-dimensions).