Introducing Retina Support

nextgen-gallery-retinaNextGEN Plus and Pro now offer full retina support for thumbnails on all Pro thumbnail style galleries.

This is a very exciting feature which will make the thumbnail quality look even better when viewed on retina devices.

"Retina Display, or later Retina HD Display on release of the iPhone 6/iPhone 6 Plus in September 2014, and Retina 5K Display on release of the October 2014 iMac are brand names used by Apple for screens that have a higher pixel density than their previous models." - Wikipedia

Many non-Apple displays use the term HDPI to describe their retina screens.

It's important to note that 1080p screens do not mean they are retina or HDPI.

To use the new retina feature, turn on "resize on upload" and "backup originals" within Other Options. Then NextGEN will dynamically create your retina thumbnails and display them to viewers using retina devices.

Share this with other photographers

This Post Has 33 Comments

  1. Hi Scott! I have a question. What about the setting which says, “What should images be resized to?” How should this be set?

    1. That’s 100% up to you. Think about your visitor viewing size and your site speed. Combine those things and you should find a comfortable size that will make you and your visitors happy.

      1. I’m not clear on this either Scott.

        I have images of different sizes in my gallery so if I set the resize option as you demonstrate will NextGen make them all the same size? Will it scale down images that are bigger than the specified resized dimensions and scale up images that are smaller? How will it deal with images of different aspect ratios?

        A little more clarity would be really helpful here.

        Thanks

        1. I’ll try to make it easier to understand. If you have NextGEN Gallery set to resize your images to 500px, then we will also generate a 1000px image. The 1000px image is displayed on retina devices. However, it will show up as a 500px image, because retina displays at 2 times the image size specified.

          On a standard screen only the 500px image is displayed.

          All of this is done automatically, so you only have to worry about uploading your images.

  2. Forgive me Scott, but I don’t think you’ve made it any clearer with your answer. I understand how Retina displays work I just don’t get what NextGen is doing with the resize.

    My question is: What will happen to images of different sizes and aspect ratios if I set one size in the NextGen Gallery resize option? For instance: I have images that are 1200×800, 1200×600, 900×600, 800×800.

    How do I set the resize option to suit all these different dimensions?

    If I set the resize (for example) to 1200×800 what will NextGen do to the images that are 1200×600, 900×600 and 800×800?

    In your example above (resize to 500px) you say that NextGen would also generate an image of 1000px. What happens if the original image was only say 800px to start with? Will it try to upscale it?

    Not very clear is it?

    Thanks

    Paul

    1. NextGEN Gallery does not upscale images, so if the image is too small then resize will not happen. That also means a retina image will not exist. So you would have to upload an image larger than you want NextGEN to resize the image to.

  3. Okay, thanks for that Scott but you still haven’t answered my main question:

    “What will happen to images of different sizes and aspect ratios if I set one size in the NextGen Gallery resize option? For instance: I have images that are 1200×800, 1200×600, 900×600, 800×800.

    How do I set the resize option to suit all these different dimensions?

    If I set the resize (for example) to 1200×800 what will NextGen do to the images that are 1200×600, 900×600 and 800×800? “

    1. NextGEN keeps your aspect ratio, so whatever you set the resize to is relative. If your image is 1200×800 and your resize is 500×500, then it will make the longest resized side 500px. The retina resized would be 1000px.

  4. Okay thanks Scott.

    So in order to generate a retina thumbnail for a 1200px wide image I have to upload at 2400px!

    I can’t say I’m in a hurry to do that to be honest. That will result in serving a massively oversized image to non retina displays, eating up bandwidth unecessarily and slowing everything down for the end user. Not a smart way to work at all and not really something I want to inflict on my customers.

    Thanks for your time anyway.

    1. You shouldn’t have thumbnails that large anyway. If you are, you’re already inflicting large bandwidth issues on your site. We’d recommend leaving thumbnails to around 300px or so.

  5. I wasn’t referring to the thumbnail, that was the image size lol.

    I meant that if you want retina quality (thumbs and large images) then a 1200px image would need to be uploaded at 2400px. That’s the ‘double pixel’ nature of retina I know. But the only ‘new’ NextGen feature I can see here is that you get a better quality thumbnail as a trade off for serving massive files to all viewers, when the majority will see no benefit. The majority are actually being penalised with slower loading.

    The gains in image quality when viewed on retina displays are just a result of uploading double sized images. That’s always been a not very smart option anyway.

    Don’t misunderstand me, I really like NextGen, it’s just the lack of proper retina support that really disappoints me.

    Just my opinion of course 🙂

    1. The retina support we’re offering is only on thumbnails at the moment, not full-size images. With that said, we’re handling the retina implementation the normal way, so I’m unsure I understand your comment on lack of proper retina support. Feel free to email our support team with concerns.

  6. I was referring to the lack of proper retina support for full size images Scott. The only option for this with NextGen is to serve the double size image to all viewers. The ‘proper’ way as you know, is to select the appropriate size image by detecting retina and non retina devices.

    I’ve seen this raised elsewhere and it’s pretty much swept under the carpet for some reason. It’s not even on the list of suggestions for new features. Like I said, it’s disappointing.

    1. Double size images is how retina works. So we’re doing it the correct way. What you’re referring to is a full responsive system, where there are numerous image sizes and an individual one is displayed per device screen size. Combine that with retina and you have a lot of extra images. That is something we have on the list of features to add, but it’s not a high priority since the plugin is already responsive with fluid style.

      With that said, you’re welcome to vote for full responsive support combined with retina for full size images.

      1. With respect Scott, that sounds like wordplay.

        Given that NextGen already advertises itself as ‘Fully Responsive’ then it’s clearly the ‘Retina Support’ for full size images that’s lacking.

        I’ve already voted for it btw 🙂

        1. There are multiple forms of responsive design. They range from simple to complex. To start with we went with simple, with the goal of eventually adding in the complex style. Thanks for voting.

  7. Hi Scott,

    So I decided to give your suggestion a try.

    I set the resize option to 1024px wide and uploaded a gallery of images at 2048px. The thumbnails are now displaying retina quality on my macbook pro but the full size image still looks the same as before….poor!

    If I understand your earlier comments correctly then NextGen should be displaying a full size retina quality image (on my Macbook) at 1024px using the 2048px image that I’ve uploaded while displaying the (resized) 1024px image on my non retina desktop screen?

      1. Any word on when Nextgen will implement retina for full images/lightbox images? This is important for photographers as more and more screens are retina!!

        1. Not yet. The function is there, but we have some tweaking to do to the code before it’s ready for a million+ users to utilize.

  8. Hi Scott

    I’m just implementing NextGen throughout my new site and have just found this post about Retina thumbnails. It’s exactly what I was hoping/looking for. However, can you please explain something to me that is not clear.

    In your example in the comments above you said the following:

    “I’ll try to make it easier to understand. If you have NextGEN Gallery set to resize your images to 500px, then we will also generate a 1000px image. The 1000px image is displayed on retina devices. However, it will show up as a 500px image, because retina displays at 2 times the image size specified.”

    But surely turning on “resize on upload” and “backup originals” within Other Options refers to full/main images NOT thumbnails? But NextGen does not have Retina support for the main images. And in any case this article is about Retina thumbnails. So you see my confusion.

    Please can you clear this up?

    Many thanks,

    Ben

    1. Certain display types are using retina for the larger images. For example, blog style and pro sidescroll. Becuase they use the dynamic processor used for thumbnails too. Technically those are showing thumbnails. But larger thumbnails. However, the full-size images (like when viewed in the Pro Lightbox) are not currently retina because they’re already going to be much larger.

      1. Ok, thanks Scott, I understand that now. Fortunately I don’t need Rentina for the full-size images, only thumbnails.

        So please you could now explain how to achieve Retina thumbnails for say, a Pro Masonry Gallery? Perhaps if you gave an example of the settings you’d change (eg, in Other Settings), because I’ve tried and can’t get it to work.

        Many thanks,

        Ben

        1. Retina for Pro Masonry would be set up the same as every other. Turn on Backup Originals and Resize on Upload. Then the dynamic processor can create the appropriate thumbnail sizes depending on the settings you pick for the gallery thumbnail sizes. Thumbnails will then be retina automatically. If you need further assistance I recommend contacting support.

          1. Thanks Scott. However Backup Originals and Resize on Upload both refer to full-size images and are not related to thumbnails.

          2. I know that, but that is what enables the dynamic processor for retina creation as well. In the future we hope to automate it, but for now those are both needed for the feature to work.

  9. Hi Scott

    When using Resize on Upload all metadata (including caption/description) is lost. Is there any way around this? I really like having the Retina thumbnails but having the metadata for captions is crucial. Surely it’s possible to have both and have to choose one or the other?

    Many thanks,

    Ben

    1. We do not strip metadata. So it could be something specific to your instance. I suggest contacting support to troubleshoot.

      1. Thanks Scott. I hope it’s something specific to me and can be fixed but I’ve just found this online from the original developer of NextGen Gallery:

        “Please note : If you resize the image after upload , all EXIF information are lost.”

        So I fear it’s not just me.

        I have contacted support.

      2. I have contacted support and they have confirmed that the Resize on Upload feature does in fact strip all metadata and EXIF data (including ICC profiles).

        Needless to say this is major problem.

        1. We just had an internal discussion. I was unaware of this bug. But it’s severe enough to become a priority, so it’s on the list for the next Sprint of development. That means it should be3 or 4 releases out if all goes as planned.

  10. I already have many existing NexGEN galleries that do not have Retina thumbnails.; if I upgrade to Plus/Pro, do I have to re-upload all my images to generate Retina thumbnails, or can I do a “Regenerate Thumbnails” command in NexGEN?

    1. As long as Backup Originals and Resize on Upload are turned on, you don’t have to re-upload anything. Those two settings are required for Retina to work.

Leave a Reply

Close Menu
[i]
[i]