Viewing Image quality

Image quality



User: Michael S. 9 years ago
I saw a couple of threads already but not one has really resolved this.

All of the images I use (jpg and png), when dropped into Everweb look fine while editing in the program. But when publishing a preview, they look really pixelated. The only way it seems to solve this is to make a version just the right size in Photoshop and not have Everweb resize the picture - only in that case a sharp image is produced. I tried preview in Safari, Chrome, and Firefox, tried jpg and png files without any transparencies, I also tried pictures that are 'almost' the right size and then just re-sized them by a couple of pixels in Everweb. The result is that whenever I have Everweb resize an image file, the result is really to pixelated to be usable.

This is an example... the Japanese YEN sign is the only part that is pixelated - and that is the only image I used Everweb to resize. The logo is not being resized.

Pls fix this ASAP because I can't use the software having to resize everything in photoshop...

Screen Shot 2015-01-08 at 3.42.09 PM.png
In-software preview
Screen Shot 2015-01-08 at 3.42.21 PM.png
Firefox / Chrome preview
User: Paul-RAGESW 9 years ago
What version of EverWeb are you using? What is your website URL?

-------------------------------
Paul
EverWeb Developer
User: Michael S. 9 years ago
I have the latest version 1.7.3
The website is bupenglish.jp - but this is not Everweb yet because I can't get past the quality problem...
User: Paul-RAGESW 9 years ago
Can you publish it to a sub directory or a temporary location so I can take a look? You can enter anything in the Sub Directory field in the Publishing Settings Screen to do this.

-------------------------------
Paul
EverWeb Developer
User: Michael S. 9 years ago
Sorry I can't use Everweb to post anything, I have migrated my iweb site and it's pretty much finished BUT I haven't actually purchased Everweb yet - so can't publish. Here's a Firefox save of the preview file... I hope that can help.

https://www.dropbox.com/sh/h1l7wu3i1orcqhl/AADEu3Qolo0pHM7sTGQhHmuLa?dl=0
User: Paul-RAGESW 9 years ago
I'll need you to send me your website project file then so I can take a look.

In the Projects window in EverWeb, click the arrow on the right next to your website and select the 'Show On Disk' option.

**DO NOT move this file from this location on your computer**

Please compress the project file before sending it to me by right clicking on it and selecting Compress. You can upload it at http://ge.tt or http://www.dropbox.com and send the link to me.

Make sure to describe the problem you are experiencing when you send your email to our support department.

-------------------------------
Paul
EverWeb Developer
User: Paul-RAGESW 9 years ago
If other users are having an issue where the image looks fine in EverWeb but pixelated in their browser this issue is related to the retina image. You will only see the same issue described here on a Retina Mac.

To fix it, make sure you have a retina version of your image (an image ending in @2x.extension) that is double the size of the normal image.

If all you have is a large image you have resized down, add the @2x mark before the extension and EverWeb will output a retina and normal resolution image for you.

-------------------------------
Paul
EverWeb Developer
User: Thomas R. 8 years ago
Dear Paul,

I was simply astonished how bad my PNGs would look like when not placed at original size in EW (Vector from AI to PS, PNG via "Save for Web", about 8-15 kb in size). In a WYSIWYG-web-editor it is clear that I am resizing and changing all objects constantly until they fit. Once they fit, I have the problem that they just do not look any good when published. I can’t say the exact pixel-size of all the PNG-images up front. Is there any solution in sight? A button/preference "do not reprocess image" or something similar?

This is really annoying and a tremendous time-killer!

Thanks for your help!
Th

PS EW 1.7.5

Last edit 8 years ago
User: James G. 8 years ago
Thomas, are you sizing the images for Retina Display? This needs to be done prior to importing. All that means is that an image needs to be twice the size it will be displayed. That way, no matter what someone is using to surf the web, the correct image resolution is fed to them by the server. Some will upload multiples of the same image in different sizes, and end the larger size image with @2x. Image-name@2x.jpg/png/etc.

What I do: I figured out what size I wanted to display on the pages. I decided that most of my images will be 400px to 600px wide. I make the images 800px to 1200px wide and upload those to assets. I then display those images at a smaller size - 400px to 600px wide - on the pages.

This way, if someone comes to my site on a Windows comp with and old crt monitor, the images look fine to them; if they then jump on a mac with Retina display and navigate to my site, the server will know they are on a higher resolution monitor and the server will feed them the larger (higher resolution) image in the same space as they saw the lower res image on their Windows machine. So no matter the device used, they will get images with good resolution. I am also only posting snapshots and screenshots mostly, so image clarity is not a HUGE deal for me; I just wanted to feed quality images.

I hope this helps you. My site is here if you want to see what images look like using different displays. Some images may take longer to load since I am only using one image size (a large one) and not uploading two of the same image in two sizes
User: Thomas R. 8 years ago
Hi Jim,

thanks for your reply... yes I am setting up the images with the retina-suffix. It looks a bit better now.

Quote: Jim G. - 02/06/2015 19:09:21
What I do: I figured out what size I wanted to display on the pages.

This is fine when all sizes are clearly set in advance. As stated I am used to shuffle, resize, arrange... images and texts around like in iWeb or a standard layout program like InDesign. It is simply not possible to "guess" all the correct pixel measurings before putting the objects together in EW. Isn’t this procedure the exact USP of a WYSIWYG-editor?

kind regards
Th
User: James G. 8 years ago
'Isn’t this procedure the exact USP of a WYSIWYG-editor?' Well, it is a selling point to some, however it is not really correct.
'I am used to shuffle, resize, arrange' That is why it is not correct.

A website, like most other things (story, book, game, app, garden layout, construction, etc) should really be planned outside of the actual project. There are a number of reasons why, including- A website loads not from top to bottom, but from first placed to last placed. If you have say, a lot of images on a single page and you rearrange them, they still load in the order they were placed. So, the first image placed loads first, no matter where on a page it is. You have probably landed on a blank page and slowly things blinked into existence in a random order. That is caused by rearranging.
What I have done in the past is to create a blank page and do layout on that, then I will create the real page and refer to the layout page and place things from top to bottom in order.
This is really a Best Practices thing. You have small pages without too much on them, so may this stuff may not be an issue for you now, but if you ever work on a different site you may run into this. If you do it correctly(?) from the beginning, you avoid these frustrations.
It may help to think this way- You may go to a store and buy a bunch of wood, go home, cut it up, and throw together a bird house that looks great. Then you may head out again and buy wood, go home, cut it up, and throw together a shed to protect your yard tools, and it works.
If you were to try to do the same thing with a full size house, things would go badly pretty quickly.
So in this case, the Best Practices would be to plan the birdhouse first, then plan the shed first. Once you get to the house, it is a much bigger project and without the base of planning, it does not go correctly and you spend more time and money fixing it than enjoying it. I refuse to do any work with my girlfried. She refuses to plan on paper. So if she wants to redo part of the yard, it is a waste of my time to go out there with a shovel and be told 'oh dig there and there' I know she is coming up with things by the seat of the pants. If she cannot put draw it on paper, it is not a 'plan'. Or for her it is, and she can have fun doing it alone.
I have never used iweb, but have learned about it through these forums. A lot here come from iweb, as this is advertised as an iweb replacement. What I have seen here over the past year is iweb users coming over, getting frustrated that things do not work the same as iweb, getting an explanation as to why it is this way instead of that way, and what iweb actually does and what it appears to do. After they spend a little time learning EW and basics of how sites work, they love EW and end up helping other iweb migrators. It seems that iweb did not explain much to users, they kind of fudged how things work, like apple likes to do.
'It is simply not possible to "guess" all the correct pixel measurings before putting the objects together in EW.' If you are using a Master Page, after a little time you know what the dimensions are of the page, and as you visualize, or put on paper, you will start to estimate sizes as you are preparing images. On my main site, the pages are 800px wide. As I am preparing images, I know about how much space they will take up, by using fractions or percents and estimating. If I have an image with a number of small things (my possum pieces images) I know I want those large so people can see the things in the images. So I know they will be about 3/4 of the page width, or 600px wide approximately, so the image needs to be about 1200px wide, to work for higher resolution screens. Smaller images, in a gallery, will be about 1/3 the width of the page, which would be about 250px to 300px wide, so I size them at 800px wide so they work at 300px wide and at about 400px wide in case I include some in a story and size them larger on the page.
So with a little time, you should easily estimate the sizes you need. Most people build sites that use the same sizes for a lot of things, which keeps things 'orderly and organized' looking. That leads to sizing images without thinking about it, since you have standardized your own site.
Roddys site everweb codebox is a great resource to quickly learn how individual things work and the best way to do them.
Once again, I hope this helps; and I hope I do not come across as preachy.
User: Thomas R. 8 years ago
Dear Father Jim G., my preacher of choice!

I shall really be thankful for your novel (I really appreciate it!), but please grant me a little time to overthink and reply in full rig...

Th


Post Reply
You must login or signup to post.