What are best practices for retina screens regarding images? Do you x2 everything? That meaning do you export all images at double size? (then of course display at half that with css).

I have been trying to get SRCSET to load in images for different device sizes. My understanding is that when the device width or window width changes, that SRCSET will ONLY load the URL of the corresponding size. I can see the URLs generating for each image, as well as the sizes. These are all actual images and they link properly to the correct sizes: This is great! The issue is, I haven’t been able to produce, on any device, …

I need to add the "2x" to the url attribute srcset in wordpress 4.4.2. Maybe you can do so using a function in the functions.php file?

I have updated the large image size to be 1440px by 1440px on Wordpress, however it only pulls 2048 for the 2x. I have created a 2x size of 2880x2880 and have also updated 2048 to be 2880x2880 however when I do it no longer shows the retina size. Things I have checked so far: the image is being generated by Wordpress upon upload. I have taken the new large image limit put in place since 5.3 out using the …

I have scoured the web for plugins and articles to help me solve something that seems pretty basic, but couldn't find anything. I want a way to create custom versions, particularly sizes, of an image on a per-image basis. I know I can register a specific size of image and WP will create it for every image that is uploaded. But what I want is to be able to create a scaled version of an existing image from the media …

I have a wordpress site that runs Avada theme on siteground hosting. I have recently optimised all the images using shortpixel to improve pagespeed. What I am now finding is that the retina images are slowing my mobile pagespeed, and I cannot figure out how to stop the website serving them. I have tried deleting the retina (@2x) images from the server but they reappear. Does anyone know how to turn them off?

I need to know is it possible to generate 200%,200% image size and save with suffix @2x simply in WordPress? want to enable a simple retina ready theme.

I'm trying to come up with a solution where the generated image formats cover both responsive and high-resolution aspects when uploading a new item in the WP admin. I've put together a set of formats that should meet these requirements, 2560 x 1600 retina desktop ('largex2', custom) 1280 x 800 desktop (large) 1920 x 1200 retina tablet ('mediumx2', custom) 960 x 600 tablet + retina mobile (medium) 480 x 300 mobile (thumbnail) My problem lies in the image quality for …

I intend to develop a Retina ready theme. I uploaded retina.min.js on my theme folder: http://riehling.mrcoolblog.com/wp-content/themes/riehling/js/retina.min.js In my functions.php, I've added the following code: add_action( 'wp_enqueue_scripts', 'retina_support_enqueue_scripts' ); function retina_support_enqueue_scripts() { wp_enqueue_script( 'retina_min_js', get_template_directory_uri() . '/js/retina.min.js', null, '', true ); } add_filter( 'wp_generate_attachment_metadata', 'retina_support_attachment_meta', 10, 2 ); function retina_support_attachment_meta( $metadata, $attachment_id ) { foreach ( $metadata as $key => $value ) { if ( is_array( $value ) ) { foreach ( $value as $image => $attr ) { if ( …

My goal is to make a retina and non-retina image when user uploads a photo. This is doable like so: add_action('init', function() { // Get the original image sizes and duplicate $thumb_w = get_option('thumbnail_size_w') * 2; $thumb_h = get_option('thumbnail_size_h') * 2; $thumb_crop = get_option('thumbnail_crop'); $medium_w = get_option('medium_size_w') * 2; $medium_h = get_option('medium_size_h') * 2; $large_w = get_option('large_size_w') * 2; $large_h = get_option('large_size_h') * 2; // Register the actual sizes add_image_size('thumbnail-retina', $thumb_w, $thumb_h, $thumb_crop); add_image_size('medium-retina', $medium_w, $medium_h); add_image_size('large-retina', $large_w, $large_h); }); …

My theme uses header_image(); function to echo out a header image <img src="..."> it is set to 200x50px with add_theme_support(...); - all good here. My problem comes when I want to get the url of retina sized version of the image. Tried get_header_image(); but it doesn't accept any parameters so can't pass custom size (400x100px). How can I (using WP's header_image();) get the url of the retina-size version (400x100px) of the standard (200x50px) header image? If it's not possible maybe …

I need to be able to insert screenshots (mostly cropped sections of web pages, not whole pages) into my WordPress site for instructional purposes. I have discovered the Awesome Screenshot app for Google and Chrome which does a good job of creating and annotating screenshots. What I'm unsure of is how or if I can optimise these for retina screens. I don't own a retina device myself so the screenshots are being created on a regular pc. Is my only …

I'm creating my first Wordpress theme and I've got everything working fine, and by following this tutorial and few others I've understood how to add custom image sizes by using add_image_size() function. However, I just don't know what image size to choose when. For example, in my theme I have created a blog template that shows blog thumbnails in 3 columns. Each column is around 400px wide. So my first guess is that I should create a 400px wide image …

I was checking one of the answers here, and it says: Just create the copies of images with double size using wordpress native media settings. And then add the following code in your templates. <?php $normal = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail'); $retina = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' ); ?> <img src="<?php echo $normal[0]; ?>" data-at2x="<?php echo $retina[0]; ?> alt="<?php the_title(); ?>" width="xxx" height="xxx"/> Here my thumbnail (normal) size is 300x300px and medium thumbnail (retina) has 600x600px size. And …