Poor performance with custom image sizes
-
I wanted to make this plugin compatible with my custom image sizes. After reading https://github.com/kylereicks/picturefill.js.wp#respond-to-custom-image-sizes my first thought was “Omg why is this so complicated”. Anyway I have edited a bit the code from that article and ended up with following code. It can be improoved but it suits my needs.
function getImages() { $images = array( 'img-320' => 320, 'img-768' => 768, 'img-1024' => 1024, 'img-1450' => 1450, 'img-1900' => 1900 ); return $images; } responsiveImages(); function responsiveImages() { foreach (getImages() as $key => $val) { add_image_size($key, $val, false); add_image_size($key . '@2x', $val * 2, false); } add_filter('picturefill_wp_image_sizes', 'theme_remove_thumbnail_from_responsive_image_list', 11, 2); function theme_remove_thumbnail_from_responsive_image_list($image_sizes, $image_attributes) { return array_diff($image_sizes, array('thumbnail', 'thumbnail@2x', 'medium', 'medium@2x', 'large', 'large@2x', 'full')); } add_filter('picturefill_wp_image_attachment_data', 'theme_picturefill_new_size_attachment_data', 10, 2); function theme_picturefill_new_size_attachment_data($attachment_data, $attachment_id) { $data = array(); foreach (getImages() as $key => $val) { $data[$key] = wp_get_attachment_image_src($attachment_id, $key); $data[$key . '@2x'] = wp_get_attachment_image_src($attachment_id, $key . '@2x'); } return array_merge($attachment_data, $data); } // Add the new image size(s) to the responsive queue add_filter('picturefill_wp_image_sizes', 'theme_add_new_small_size_to_responsive_image_list', 11, 2); function theme_add_new_small_size_to_responsive_image_list($image_sizes, $image_attributes) { $data = array(); //'thumbnail', 'medium', 'large', 'full'); foreach (getImages() as $key => $val) { array_push($data, $key); array_push($data, $key . '@2x'); } if (!in_array($image_attributes['min_size'], $data)) { return $data; } else { return $image_sizes; } } // Set the breakpoint for the new image as a new size add_filter('picturefill_wp_media_query_breakpoint', 'theme_picturefill_new_small_size_breakpoint', 10, 3); function theme_picturefill_new_small_size_breakpoint($breakpoint, $image_size, $width) { foreach (getImages() as $key => $val) { if (in_array($image_size, array($key, $key . '@2x'))) return $val; } return $breakpoint; } }
I think that everything is properly done here but still there is one critical bug. When I open any website with picturefill code the above code is executed and the filter “picturefill_wp_image_attachment_data” is applied in file picturefillwp\inc\class-model-picturefill-wp.php on line 100. After that there is this loop
foreach($image_attachment_data as $attachment_size => $attachment_data){ if($this->image_needs_to_be_created($image_attachment_data, $attachment_size, $attachment_data)){ $new_meta_data = wp_generate_attachment_metadata($attachment_id, get_attached_file($attachment_id)); wp_update_attachment_metadata($attachment_id, $new_meta_data); $image_attachment_data[$attachment_size] = wp_get_attachment_image_src($attachment_id, $attachment_size); } }
Which increases load time about 10 times longer. When there is more that one image (in my case about 15) page loads in 20 minutes… When I comment out this loop. Everything works fine and page loads instantly. Whats the point of this loop? Can this be fixed?
- The topic ‘Poor performance with custom image sizes’ is closed to new replies.