I sometimes get asked questions about whether it is possible to control image sizes in WordPress using CSS rather than functions file etc. The answer to that is yes you can but it’s not normally advisable.
The reason why you don’t want to use css to control image size is that it takes longer to download large images than smaller versions so for visitor satisfaction it’s much better to speed up your page load times than slow it down.
Reducing number of images sizes in WordPress.
But there are occasions when you might want to use the css method. For instance you may not want to have lots of different versions of the same image that may be used once or twice and never seen again. An example of this would be on your frontpage where you may have a certain size of image that will appear for a few days and then never used again. It would be a waste of your server disc space to carry on storing those custom size images.
Using CSS for image sizes.
You can easily find out the id of WordPress standard images using any of your normal developer browser tools. you’ll find the standard images have div ids such as:
- .attachment-medium
- .attachment-thumbnail
If the theme you are using has already set aside custom image sizes then they should have div ids something like: .attachment-180×150.
You can resize those images site wide by using a bit of css in your style sheet like:
.attachment-thumbnail {width; 200px; height: 100px;}
Of course if you’re doing a site wide resize you will be better off changing the functions file so the image is resized on upload.
The benefits of using css is in one off instances of resizing such as on your front page or sidebar etc.
Control of images with css in WordPress themes.
So an example could be that you are displaying thumbnails in magazine grid style of your frontpage. Obviously as you add more stories the thumbnails will fall of and never be used again. It’s not very effective to have yet another image stored on your server.
You need to find the div class of the section that the thumbnail will appear in. So you may have a div class called #latestnews.
The css for your stylesheet will therefore look like;
#latestnews .attachment-medium {width: 200px; height: 100px;}
That bit of css will change the display of the standard medium size WordPress upload image to an image of 200 pixels by 100 pixels and it will only affect the medium size images that are displayed in the latest news section.
Forcing image size with CSS in WordPress.
Using css image resizing can also be useful for forcing images into a set size which helps when you are developing grid views of things such as products etc. You should remember that this is forcing an image size and does not scale so you will have issues with perspective if you force the image too far out of the original proportions.
It’s a useful little tip and when used correctly can be beneficial in controlling the number of unwanted images on your server.
