Viewing Image Quality Issues

Image Quality Issues



User: Gerald L. 9 years ago
Hello

I've just switched from iWeb to ever web 1.7.3 and i'm noticing a substancial decline
in all of my images when in preview mode. I have read about this issue in past threads but still can't
quite get the solution or if there is a solution?

My process:
I build all of my photos for my site in photoshop and they all start as a hi resolution files until i flatten them
and save as a .jpg or i also tried .png also no luck. I've tried importing them, I've dragged and dropped, and even
tried letting ever web import as a hi res photo still no luck when in preview mode.

Is there something i'm doing incorrect with my process?
when i'm in the building mode photos look acceptable its just when i preview.
I'll be displaying a lot of artwork and i need all the images to look there best as far as resolution

Thanks

Image Quality.png
User: Paul-RAGESW 9 years ago
Check the Preferences->Publishing settings and set a higher number for JPEG quality.

-------------------------------
Paul
EverWeb Developer
User: Gerald L. 9 years ago
I did that and still no luck.

I even noticed on the ever web website the logo is a bit fuzzy (Yellow box). i went to the ever web code box and even there are a lot of
the images are off. Unfortunately when i was just trying out ever web i was not able to see what the images would look like when published.
If there are no solutions to this can you get a refund. I really like the similarities to iWeb but this image issue is a deal breaker for me.
should i start looking for another option?
User: Paul-RAGESW 9 years ago
The image on this forum is not retina. The image on everwebapp.com is retina. EverWebcodebox.com is not affiliated with is so I can't speak for what roddy has done. This forum is not made in Everweb.

If you can show me somewhere on EverWebapp.com where an image is blurry I can look into it further.

If you can show me your published site I can help you fix this.

Most likely you just have to add @2x to your image right before the file extension. Otherwise everweb won't export a retina image and the image will be blurry.

Last edit 9 years ago

-------------------------------
Paul
EverWeb Developer
User: Christopher 9 years ago
If you look at Gerald's example photo above, the issue does not appear to be retina-related. Otherwise, the pixel dimension would be half and with it the quality degradation. No? The issue is that EW makes dupes of every photo. So if Gerald is importing a jpg, his original file is then being compressed twice – regardless of what setting he chooses. Can Gerald simply import high-res photoshop files or tiffs? Then let EW create the first jpg. Why not advise that?

Otherwise, Gerald, you'd be better to insert your photos using the html snippet widget. See this page for instructions. I've started doing that, using images that are twice the size of their final dimension in the EW canvas so retina-computers get the full payoff. This will give you full control over quality and file size and is not that much more time consuming.

As for the logo up top, the edges of the yellow box are clearly jagged. Doesn't matter which site we're on.

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

www.cleetche.com
User: Christopher 9 years ago
Here's a video tutorial for creating retina ready images for EW. (And btw, I'm just an EW user too. If you like the application, I wouldn't bail just yet. Achieving high-quality images on your site is completely doable.)

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

www.cleetche.com
User: Paul-RAGESW 9 years ago
Quote:
If you look at Gerald's example photo above, the issue does not appear to be retina-related. Otherwise, the pixel dimension would be half and with it the quality degradation. No?


No that's not true. It could be retina related. What could be happening is he has imported a large image into his project. In EverWeb it is resized to the size of the shape object and can be shown as a retina image. When exporting it is being exported at the width/height of the object so it is not a retina version. To make sure a retina image gets exported he has to make sure he has an image with @2x before the extension.

Quote:
So if Gerald is importing a jpg, his original file is then being compressed twice – regardless of what setting he chooses. Can Gerald simply import high-res photoshop files or tiffs? Then let EW create the first jpg. Why not advise that?


He could but this is probably not the issue and you should never import a high resolution photo, ever. You should import a 72DPI photo one at regular size and one at double the size with the @2x extension.

Quote:
I've started doing that, using images that are twice the size of their final dimension in the EW canvas so retina-computers get the full payoff. This will give you full control over quality and file size and is not that much more time consuming.


This also means non-retina computers download a larger image than necessary.

I am currently looking into your other image issue but it is most likely not related to this one.

-------------------------------
Paul
EverWeb Developer
User: Gerald L. 9 years ago
Paul
So i tried just adding the @2x to my image right before the file extension hoping it was that easy.
but still no luck. However i also didn't make 2 copies and import 2 copies of the same photo at different sizes either (hoping just to work with one file if possible).

I took Christpher’s suggestion I DID :) have success importing a .tif.
and in preview mode it looks nice and sharp but now i’m concerned i’m importing
files that are to big? Does EW take that tif and compress it down to a manageable file?

Could anybody tell me for sure and in simple terms what is the correct or standard way to import a photo
with the best image quality suitable for the net.

html snippet widget?
creating retina ready images?
Importing a .tif?
User: Roddy 9 years ago
Displaying images on a website is a compromise between quality and file size. The higher the quality, the bigger the file size and the slower the page download time.

TIFF is not much used for web design. JPEG is used for larger images and PNGs for small icons with transparency. PNG is not a good idea for larger images.

Quality is very subjective and you can't predict what device the visitor is using. I get a a kind of different view of the web now that I'm using an iMac 27 Retina!

Mostly, I'm not concerned with image quality. The EverWeb Codebox website images are optimised for fast download rather than image quality. Obviously the quality of a screenshot of widget settings only needs to be good enough for the visitor to see them. I'm not displaying top notch graphics or artwork.

Most designers, artist and photographers get really concerned about the quality of the images portraying their work - in most cases, unnecessarily so. Very few visitors are going to give these images much more than a quick glance and will be unlikely to ever see them at all if the web page takes too long to download!

If you have high quality images to showcase, insert a lower quality, fast downloading version and link it to a higher quality version that the visitor can download.

If you want to improve the quality of the images on a web page., import them into the Assets list at twice the size they will be displayed at and use an <img> tag or a widget to insert them. Note that you will need to import your @2x image at four times the display size for a similar increase in quality.

To find out what is the best way for you to display your images on a website you need to experiment, try them every which way at different file sizes and view the result on as many different devices as you can get your hands on.

-------------------------------
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: Gerald L. 9 years ago
Ugggh!
I really didn't want to have to conduct experiments. In that case i would just put the time into learning dreamweaver
i want to just design and build websites with a simple drag drop and design platform like iWeb.

Quote:
“Most designers, artist and photographers get really concerned about the quality of the images portraying their work - in most cases, unnecessarily so.”
i would have to disagree with your quote but then again i'm a graphic designer so quality of image is everything to me and i want
my clients to see the best representation of my work.

Roddy I appreciate your imput but your saying there is no standard way to create a hi quality image with out experimenting.
I can't see having a low res image linked to a hi res image for people to download thats not what i’m looking for.
i'm just looking for sharp images to display on my site without having to jump through hoops, or learn code, or multiplying
pixels, every which way and so far the only thing that worked is when i imputed a tif file but i'm worried the tif file might be too big
User: James G. 9 years ago
nothing to add, sorry

Last edit 9 years ago
User: Christopher 9 years ago
Quote: Gerald L. - 24/01/2015 12:18:50
Ugggh!
I really didn't want to have to conduct experiments. In that case i would just put the time into learning dreamweaver
i want to just design and build websites with a simple drag drop and design platform like iWeb.

Quote:
“Most designers, artist and photographers get really concerned about the quality of the images portraying their work - in most cases, unnecessarily so.”
i would have to disagree with your quote but then again i'm a graphic designer so quality of image is everything to me and i want
my clients to see the best representation of my work.

Roddy I appreciate your imput but your saying there is no standard way to create a hi quality image with out experimenting.
I can't see having a low res image linked to a hi res image for people to download thats not what i’m looking for.
i'm just looking for sharp images to display on my site without having to jump through hoops, or learn code, or multiplying
pixels, every which way and so far the only thing that worked is when i imputed a tif file but i'm worried the tif file might be too big


Yep, I agree. Quality of image is very important. But like Roddy says, so is download time. So you do need to find the balance. At present, EW appears to be making dupes of everything – jpgs or pngs. It also appears to be adding colour profiles even to images that are already stamped with a colour profile. Maybe the solution is to prepare your image for normal and retina, save them as tiffs, and import them both. For example, a 800px wide image.tiff, as well as 1600px wide image@2x.tiff. Then EW will convert them to web-friendly jpgs suitable for both normal and retina screens. Before importing them though, you can adjust your jpg compression in EverWeb by going to Everweb/Preferences/Publishing. Then publish to a folder (since this is a test) and look for those images in the subfolder of your page or directory called "images". See what their file sizes are. Open them in preview and if you're not satisfied with the compression or file size, adjust accordingly. That's the size that matters. Not the size of the tiff you're importing into EW. (If I'm wrong, I'm sure the experts will speak up ;)

Last edit 9 years ago

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

www.cleetche.com
User: Christopher 9 years ago
But Gerald, once you get your images sorted out, how do you want to show them? The features of the image gallery widget are pretty limited. I've been promoting Photoswipe which is both mobile and desktop friendly, responsive, allows for 'sharing', full screen mode, swiping on phones and tablets, zooming in and out, captions, etc. It's a lot of work to implement though! You can see my example here and read one of the forum threads about it here. Make sure you read to the end.

Another option would be to go with Galleria (what EW uses), but use one of their premium themes.

Last edit 9 years ago

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

www.cleetche.com
User: Gerald L. 9 years ago
“But Gerald, once you get your images sorted out, how do you want to show them?”

I figure i’ll have a Picture of a logo you’d be able to click on and access the work i’ve done for that company
maybe in an image slider that you could watch as slide show or scroll. and with that said.

I created the 2 files for retina display so it seemed to do the trick
but now i’m having trouble putting these images in sliders without losing quality.
What file should i put into the slider the @2x.jpg or just .jpg?
User: Christopher 9 years ago
You've just stumbled on another problem. I don't think the EW slider references a @2x.jpg image if the .jpg is inserted. I just inserted my @2x images. The file sizes are bigger but they look good on non-retina or retina screens.

Edit: Also, you can hyperlink to an image in EW and have it redirect to another page where you can create your slider. But to click on the image and go straight to slider in the same page, you'll have to use 3rd party options via an html snippet: such as Galleria, Shadowbox or Photoswipe. I've pointed out before, the EW image gallery and slider are very very basic.

Last edit 9 years ago

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

www.cleetche.com


Post Reply
You must login or signup to post.