Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End How do you handle different image sizes for different screen widths in WordPress

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #45416
    croydon86
    Participant

    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.

    #138190
    Senff
    Participant

    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.

    #138219
    croydon86
    Participant

    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.

    #138378
    TheDoc
    Member

    > `max-width: 100%;`

    ++

    #138384
    chrisburton
    Participant

    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.

    #138424
    croydon86
    Participant

    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 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Back End’ is closed to new topics and replies.