- This topic has 5 replies, 2 voices, and was last updated 5 years, 12 months ago by Tom.
-
AuthorPosts
-
March 29, 2018 at 7:05 am #535065George
I am using a video script on my website that imports video from a YouTube playlist and creates custom post types. Instead of importing the image in the post I am just using the YouTube image URL to display thumbnails in various places. One of those places is the footer when I am displaying the latest 3 imported videos using the WP Show posts addon along with some custom code to show the YouTube thumbnail straight from the YouTube server instead of importing it into the Media library.
The issue I am having is related to how GTmetrix flags these thumbnails. Basically I am using CSS to scale those image down 100x75px size from their original 640x480px size. GTmetrix gives me a 0 grade on the Serve scaled images section:
The following images are resized in HTML or CSS. Serving scaled images could save 148.9KiB (97% reduction).
- https://i.ytimg.com/vi/7gDKEhTs1u0/sddefault.jpg is resized in HTML or CSS from 640×480 to 100×75. Serving a scaled image could save 52.6KiB (97% reduction).
- https://i.ytimg.com/vi/csuUD2Dh_Y8/sddefault.jpg is resized in HTML or CSS from 640×480 to 100×75. Serving a scaled image could save 49.3KiB (97% reduction).
- https://i.ytimg.com/vi/32hyo83Ay9c/sddefault.jpg is resized in HTML or CSS from 640×480 to 100×75. Serving a scaled image could save 47.0KiB (97% reduction).
Is there a way to solve that issue? Website URL is:
https://www.audiotutorialvideos.comMarch 29, 2018 at 10:35 am #535362TomLead DeveloperLead DeveloperI believe the only way to do that would be to serve the images closer to the size they’re being displayed at. Those tools don’t like it when a larger image is scaled down using CSS.
March 30, 2018 at 11:32 am #536466GeorgeThanks Tom, I got a question: Is it possible to apply a thumbnail size (from the one in the media library) to an image that has not been imported in the media library and the only thing I have is the external image URL?
If it helps, I am using this code to query an external image from a custom meta:
add_action( 'wpsp_before_title','wpsp_add_videoimage_meta' ); function wpsp_add_videoimage_meta($settings) { if ( 1169 == $settings[ 'list_id' ] ) { $meta = get_post_meta( get_the_ID(), 'VideoImage', true ); if ( isset( $meta ) && '' !== $meta ) echo '<a href="' . get_permalink( $id ) . '"> <img class="recent-videos-thumb" src="' . $meta . '" alt="' . get_the_title( $id ) . '"></a>'; } }
Then, I am scaling down with CSS.
March 30, 2018 at 9:48 pm #536767TomLead DeveloperLead DeveloperI don’t believe so. The image would need to be resized and server from the server it’s hosted on.
March 31, 2018 at 7:37 am #537062GeorgeNo worries Tom, I have sorted that out. I used the str_replace function to query a smaller sized image for the thumbnails:
add_action( 'wpsp_before_title','wpsp_add_videoimage_meta' ); function wpsp_add_videoimage_meta($settings) { if ( 1169 == $settings[ 'list_id' ] ) { $meta = get_post_meta( get_the_ID(), 'VideoImage', true ); $lowres_thumb = str_replace('sddefault.jpg', 'default.jpg', $meta); if ( isset( $meta ) && '' !== $meta ) echo '<a href="' . get_permalink( $id ) . '"> <img class="recent-videos-thumb" src="' . $lowres_thumb . '" alt="' . get_the_title( $id ) . '"></a>'; } }
Thanks again!
March 31, 2018 at 8:50 am #537200TomLead DeveloperLead DeveloperNice solution! 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.