Grow your CSS skills. Land your dream job.

How do you handle different image sizes for different screen widths in WordPress

  • # June 10, 2013 at 4:31 am

    Hi guys

    I am working on a responsive wordpress website.

    So let’s say the client uploads an image in admin using the media gallery, for a blog post. I would then like WordPress to generate a smaller size of that same image. However I am unsure how to do this.

    I know there is a function called add_image_size(); however I am unsure how I would implement this into my theme, and have a couple of questions about it….

    1. Does add_image_size(); actually reduce file size as opposed to just dimensions?

    2. Does add_image_size(); only work with [featured image](http://codex.wordpress.org/Function_Reference/add_image_size “add image size”)?

    Even if the above is not the best technique, or I don’t mind if the client has to upload two separate images manually.

    Would like to hear any other ways you guys handle responsive images via WordPress admin, or if you can point me in the right direction, that would be great.

    # June 10, 2013 at 7:15 am

    From what I know, whenever a user uploads an image, small versions are created automatically, and you can define these yourself in functions.php. It does reduce the image dimensions, so yeah, the file size also changes.

    If you check these lines for example:

    add_image_size( ‘largeproduct’, 1280, 960, true );
    add_image_size( ‘mediumproduct’, 640, 480, true );
    add_image_size( ‘thumbnailproduct’, 320, 240, true );

    Whenever the user uploads an image (ANY image, not just the featured image), three other images are created with the sizes 1280×960, 640×480 and 320×240. Of course you can edit all this in functions.php. There probably is one of those already, but you can add as many as you like.

    So no, the user does not have to create and upload various sizes of images.

    # June 10, 2013 at 2:13 pm

    Hey @Senff

    Thanks for confirming that. I did some research and came to the same conclusion.

    Now it is just getting the images to work responsively, so only smaller file sizes get downloaded for smaller screens.

    I came across [this solution](http://mobile.smashingmagazine.com/2012/06/14/responsive-images-with-wordress-featured-images/ “Responsive images”) which uses a plugin called [Mobble](http://wordpress.org/plugins/mobble/ “Mobble”) – Only problem with this is it uses UA sniffing as opposed to detecting screen sizes.

    I will continue to have a look if there is a better way of doing this, and will update.

    # June 11, 2013 at 8:05 pm

    I’ve not yet seen any way to make it completely dynamic where it grabs the smaller file when using smaller screens. The method I typically use is to simply make anything at that phone size scale at max-width:100% with a height of auto. These are for just the normal images on the site – the Smashing article addresses the post image sizing specifically.

    # June 11, 2013 at 8:16 pm

    > `max-width: 100%;`

    ++

    # June 11, 2013 at 11:23 pm

    I also use `max-width: 100%; height: auto !important;`. Images should be compressed before adding them to a site regardless. There may be a plugin your client can use where he/she just clicks a button and it compresses the image for them.

    # June 12, 2013 at 4:38 am

    Thanks guys, I am using max-width: 100% however unfortunately using just this alone is not a viable solution.

    I am working on an image-heavy responsive site which is tailored for mobiles to 27″ iMacs! There are a few images almost full screen, so I’m sure you can appreciate the difference in file size for that range, even if compressed to the max.

    I haven’t had a chance to look into this properly just yet but will update this post when I do.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".