Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #33512

    Amy M
    Participant

    I am having trouble understanding the proper way to deal with images so they display correctly on retina displays as well as regular displays.

    The logo image was done automatically via your customizer so that wasn’t a problem.

    However, I have other images throughout the site that I need to make sure are optimized for retina displays.

    From what I can tell, I need two images uploaded. So if I want an image to display as 150px x 150px then I need to upload an image with those dimensions and one that is 300×300 for use with retina displays (which will ultimately resize down to 150×150). The larger image file would then be named with an @2x in it.

    So, I am not sure what to do after that point to make sure the images are properly used in the correct situations. I assume it is via some coding that tells it when to use which image but I am stuck at that point.

    Or, can I simply upload one image in the larger image size but use html or css to set height and width at 150px X 150px?

    #33802

    Support
    Member

    Hi there!

    Thank you for using the theme!

    The theme is actually retin ready but if you like to add a crispier image, you can use this plugin: http://wordpress.org/plugins/wp-retina-2x/

    You can upload another image which is double the size of the original. These images will be use in place of the original images when viewing on iPhones.

    Cheers!

    #39389

    Howard S
    Participant

    I do not understand this answer. If this theme is retina ready, how can I possibly benefit from wp-retina-2x? Does this X theme not make images crispy for retina displays? Also, I tried your suggestion of uploading another image which is double the size of the original, but it is not working. Can you be more specific about how I should be uploading another image? Does it have to have a specific name? Does that only work with wp-retina-2x plugin?

    Howard

    #39748

    Alexander
    Keymaster

    Hi Howard,

    For your logo, you can upload an image that is 400px wide, but then set it to 200px width in Customizer.

    For other images, X sets a max width that is relative to where the image is contained on your site. This means you can upload high resolution images for retina devices, but they will be scaled down to fit where they need to go on smaller screens

    X doesn’t modify the images at all, so everyone will be served the large quality images. The plugin above could be used to help performance by creating two sets of images.

    #40138

    Howard S
    Participant

    What is the max width? For non-logo images that are smaller than the max width, will they be displayed in high resolution on retina devices? I think I asked in a separate post whether it is possible to set the image size so that retina displays can display images in high resolution.

    #40243

    Christian
    Moderator

    Hey Howard,

    The max-width for your images depends on the width of its container. If you placed it in a single column full-width template, it’ll follow the width of the column minus the padding. If you uploaded a HD image, then it will display nicely in a retina device.

    Hope that helps. 🙂