I am creating a responsive WordPress website with a mobile-first approach.

When my client uploads an image for a blog post, I would like WordPress to then generate smaller versions of the image (with a smaller file size!) which then get served to smaller screen sizes?

Even if the user has to upload several versions of the image themselves, this would still be a good solution.

I am aware there is a function called add_image_size, however I believe this only changes the dimensions of the image, and not the actual file size. The different file sizes are the most important thing here.

So is there any plugin or code I have to write to enable this?

I look forward to hearing any help or advice on this question.


  • We have many threads about this topic. Did your search our site?
    – fuxia
    Commented May 29, 2013 at 9:21
  • Yes however all the ones I found refer to image resizing only. I want the FILE SIZE to reduce also, so small devices do not download heavy images.
    – Adam
    Commented May 29, 2013 at 9:27
  • See this answer.
    – fuxia
    Commented May 29, 2013 at 9:30
  • yes but it does not state how different variations of the image are produced. I cannot manually replace every image the user uploads in the admin. Something like this may work wordpress.org/plugins/picturefillwp
    – Adam
    Commented May 29, 2013 at 9:57
  • 1
    You might want to take a look at: adaptive-images.com; additional information how to integrate with wordpress here: windcompanionwebdesign.com/articles/wordpress-articles/… Commented May 29, 2013 at 12:08

3 Answers 3


add_image_size does change the actual size of the image file.

What I hava tried:

function odevice_image_sizes() {
    add_image_size( 'iphone-size', 300, 100, true );//OF course the dimensions are not correct...
    add_image_size( 'tablet-size', 600, 300, true );

function show_odevice_at_img_select($sizes) {
    $sizes['iphone-size'] = __( 'Image size for iphone' );
    $sizes['tablet-size'] = __( 'image size for tablet' );

    return $sizes;
add_action( 'init', 'odevice_image_sizes' );
add_filter('image_size_names_choose', 'show_odevice_at_img_select');

When checking for the device type (iphone or tablet), you can use the custom images like this

<?php the_post_thumbnail( 'iphone-size' ); ?>

I can't sent you a screen shot since I don't have the reputation needed. But you can see at the uploads folder, that the images entered with your custom dimensions, will have different size (at the disk), so they will consume different bandwidth. Smaller the dimensions, lesser the bandwidth.

  • Thanks. I think you are right, I always assumed add_image_size was just for dimensions only. So it seems this functionality is already in WordPress.
    – Adam
    Commented May 29, 2013 at 13:19
  • is this still the current method in 2017?
    – Zach Smith
    Commented Jan 20, 2017 at 10:36

panos got it right. You can use add_image_size to create different size images for different purposes. To continue a bit further with your question, I want to add:

Once you've created different image sizes with add_image_size, you can serve them for different devices by using Wordpress plugin Mobble (or any other php-based device recognition) http://wordpress.org/plugins/mobble

Just do a simple if else statement something like this:

if ( is_mobile() ) : the_post_thumbnail( 'mobile-size' );
elseif( is_tablet() ) : the_post_thumbnail( 'tablet-size' );
else : the_post_thumbnail( 'full' );

The easiest way is using css

I use the following code to my site.

.your_div img {

I hope the above css code can help you.

  • 2
    No as smaller devices still download a large image. My concern here is bandwidth.
    – Adam
    Commented May 29, 2013 at 9:28
  • If you do not want using css. I only know one solution, you must use "add_image_size". I hope you can solve your problem.
    – v123shine
    Commented May 29, 2013 at 9:42
  • Yes I already mentioned that in my question. I don't think you understand.
    – Adam
    Commented May 29, 2013 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.