Viewing Photo gallery - normal/retina images?

Photo gallery - normal/retina images?



User: pumpkin 10 years ago
Helloes,

do I need to have retina ready images (photos) for galleries, or is it enough to have one image file?

-------------------------------
Darian
new to web design
______________________
My websites: Vocal Affairs // Singkehlchen
User: Guest 10 years ago
You never need to have retina ready images. It is entirely up to you. If you would like the images in your photo gallery to be retina ready, then you will need to add retina versions of those images.
Edit
User: Paul-RAGESW 10 years ago
Note that even if you don't include retina images for your image galleries, your thumbnails will always be exported as retina so they look sharp on retina screens. You don't need to do anything to make this happen, EasyWeb does it for you.

-------------------------------
Paul
EverWeb Developer
User: Christopher 10 years ago
[quote="Jeremy":3iv9buyd]You never need to have retina ready images. It is entirely up to you. If you would like the images in your photo gallery to be retina ready, then you will need to add retina versions of those images.
What exactly does this mean? I never did get a clear understanding on this. If my site is 960 pixels wide, for example, I can use images that are 1920 and finish their name with @2x. That part I get. Is that all I have to do? Then for normal screens, it automatically scales down - for retina, the full dimensions are used?

Chris

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: pumpkin 10 years ago
Cheers. I have my gallery images fit into 1280pixel width. I won't bother making normal and retina ready images then. Maybe I will do later, should I notice they look like stamps on a retina screen ;)

-------------------------------
Darian
new to web design
______________________
My websites: Vocal Affairs // Singkehlchen
User: Guest 10 years ago
Basically, any image you want to be retina ready, you will need to include two images on your site. If the first image, let's call it image.jpg is 250x250, then in order to make the image retina ready on your site, you would need to include another version of the image, but at 500x500. This image would need to be called image@2x.jpg

Note: you do not want to just take your 250x250 image and stretch it to become 500x500. My recommendation when editing your image would be to take the image at its highest resolution, and then resize it first at its retina size. Then from there, resize the image to half the size of the retina image.

Then you would add both those images to your site in EasyWeb. When you want to place the image somewhere on the site, just drag and drop the image.jpg file on the canvas. If you are using a retina Mac, the image will be displayed in retina. Likewise, once you publish the site, any user visiting your site on a retina device will then see the image in retina form. Otherwise, anyone else will see the original image.
Edit
User: Roddy 10 years ago
See this page to get an idea of the difference between normal and retina...

http://www.apple.com/macbook-pro/features-retina/

An image that looks OK on a normal screen won't appear too good on a retina one so it's worth taking the trouble to add the 2x image if you are a photographer/artist out to impress us simple folks with the quality and detail of your work.

I do most of my browsing with a retina screen but I wonder how many other people on the planet do? Not so many that you would need to bother to add retina images unless you really need to display high quality ones - which most of us don't. This will change in the future so maybe it's time to make a habit of adding retina images as a matter of course?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 10 years ago
[quote="Jeremy":3hpsok7o]Basically, any image you want to be retina ready, you will need to include two images on your site. If the first image, let's call it image.jpg is 250x250, then in order to make the image retina ready on your site, you would need to include another version of the image, but at 500x500. This image would need to be called image@2x.jpg

Note: you do not want to just take your 250x250 image and stretch it to become 500x500. My recommendation when editing your image would be to take the image at its highest resolution, and then resize it first at its retina size. Then from there, resize the image to half the size of the retina image.

Then you would add both those images to your site in EasyWeb. When you want to place the image somewhere on the site, just drag and drop the image.jpg file on the canvas. If you are using a retina Mac, the image will be displayed in retina. Likewise, once you publish the site, any user visiting your site on a retina device will then see the image in retina form. Otherwise, anyone else will see the original image.
So you add both the files to EasyWeb Assets. I get that part. But am I dragging both images into the Canvas? Right now, my 1920 image has rescaled to 960 in the canvas. I feel stupid asking because it seems everyone else gets this... but I still don't get it.

Chris

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: pumpkin 10 years ago
You add both images to the assets, but only the normal ones (without the @2x) to the gallery widget.

-------------------------------
Darian
new to web design
______________________
My websites: Vocal Affairs // Singkehlchen
User: Paul-RAGESW 10 years ago
Quote:
I do most of my browsing with a retina screen but I wonder how many other people on the planet do?


Actually almost every single person with a smart phone purchased within the last few years is on a high resolution screen. iOS requires high resolution (retina) images as do many Nokia and Android phones. Some aren't as sharp as the retina screen, but images will still look blurry on them (they may require images at 1.5x the resolution instead of 2x). In addition, most tablets are high resolution too.

One reason current websites look less blurry on a phone than on a computer is because the phone is usually scaling down the website to fit within the screen size. Hence doing the same thing you would do with a retina image. Zooming in on a website on your phone or making a mobile website will need retina images.

-------------------------------
Paul
EverWeb Developer
User: Christopher 10 years ago
Thanks Pumpkin. Same goes for any ol' page (not just Gallery widget)?

Chris

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com


Post Reply
You must login or signup to post.