Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

Thanks

share|improve this question
    
We have many threads about this topic. Did your search our site? –  toscho May 29 '13 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 May 29 '13 at 9:27
    
See this answer. –  toscho May 29 '13 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 May 29 '13 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/… –  ialocin May 29 '13 at 12:08
show 1 more comment

3 Answers

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.

share|improve this answer
    
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 May 29 '13 at 13:19
add comment

The easiest way is using css

I use the following code to my site.

.your_div img {
height:auto;
max-width:100%;
}

I hope the above css code can help you.

share|improve this answer
    
No as smaller devices still download a large image. My concern here is bandwidth. –  Adam May 29 '13 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 May 29 '13 at 9:42
    
Yes I already mentioned that in my question. I don't think you understand. –  Adam May 29 '13 at 9:58
add comment

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' );
endif;
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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