Community Forums › Forums › Archived Forums › Design Tips and Tricks › Minimum Pro Background Image Loading
- This topic has 3 replies, 3 voices, and was last updated 9 years ago by carrieoke13.
-
AuthorPosts
-
March 24, 2015 at 7:58 am #145463carrieoke13Participant
Hi,
I'm using Minimum Pro, and I've got a different background image loading one each page. The images are loading slowly and there is a flash of white as they load. Is there a better way to pull in the background images so they load immediately? I've tried compressing the images, I'm running a caching plugin.Here's the code that calls the images for each page:
//* Enqueue scripts add_action( 'wp_enqueue_scripts', 'minimum_static_page_enqueue_scripts' ); function minimum_static_page_enqueue_scripts() { if (is_page()) { //* Enqueue Backstretch scripts wp_enqueue_script( 'minimum-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_script( 'minimum-backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'minimum-backstretch' ), '1.0.0' ); if (is_page('about')) : wp_localize_script( 'minimum-backstretch-set', 'BackStretchImg', array( 'src' => 'http://westonjrobins.com/wordpress/wp-content/uploads/2015/01/railroad-e1420639948954.jpg' ) ); elseif (is_page('practice')) : wp_localize_script( 'minimum-backstretch-set', 'BackStretchImg', array( 'src' => 'http://westonjrobins.com/wordpress/wp-content/uploads/2015/01/iStock_000043420020_Double-e1420591483119.jpg' ) ); elseif (is_page('frequently-asked-questions')) : wp_localize_script( 'minimum-backstretch-set', 'BackStretchImg', array( 'src' => 'http://westonjrobins.com/wordpress/wp-content/uploads/2015/01/trees-lower.jpg' ) ); elseif (is_page('resources')) : wp_localize_script( 'minimum-backstretch-set', 'BackStretchImg', array( 'src' => ' http://westonjrobins.com/wordpress/wp-content/uploads/2015/01/mistytrees.jpg' ) ); elseif (is_page('contact')) : wp_localize_script( 'minimum-backstretch-set', 'BackStretchImg', array( 'src' => ' http://westonjrobins.com/wordpress/wp-content/uploads/2015/03/lights-compressed.jpg' ) ); elseif (is_page('forms')) : wp_localize_script( 'minimum-backstretch-set', 'BackStretchImg', array( 'src' => ' http://westonjrobins.com/wordpress/wp-content/uploads/2015/01/dandelion.jpg' ) ); endif;
Thanks for any help!
http://westonjrobins.com/March 24, 2015 at 12:40 pm #145513ChristophMemberHi,
I´m not sure what service you used to compress the images, but the two I just tried in tinyjpg.com got compressed with a gain of 75% and 88%.
mistytrees.jpg 1.4 MB down to 359 kb -75%
dandelion.jpg 2,7 MB down to 306kb -88%That will help you a lot with loading times.
If that's not fast enough, Jetpack has a module called photon that you can use to serve the pictures.
March 24, 2015 at 11:23 pm #145575coralseaitMemberOn OSX use ImageOptim - https://imageoptim.com/
On Windows use RIOT - http://luci.criosweb.ro/riot/ OR FileOptimizer http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer
March 25, 2015 at 8:29 am #145595carrieoke13ParticipantThank you both! I will try this.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.