Viewing Uploading Image Problem

Uploading Image Problem



User: Roddy 11 years ago
Don't allow EverWeb to do anything to your images. Use an <img> tag or a widget to insert the image at the size and resolution you want it to be.

For example, try dragging an image into the Assets list at 1280px x 960px and display it using an <img> tag at 640 x 480 px. Now reduce the image to 640 x 480 px outside of EverWeb, drag it into assets and display at 640 x 480px on the same page. Publish the page to compare the quality in the browser.

Quote:
All these photo options like scale to fit..scale to fill..stretch...original size...tile. What are their best uses?


These are for background shape images and should not be used for inserting images where you need quality.

-------------------------------
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 11 years ago
Okay, now I'm curious. We need Paul to wade in here. If I drop an image into EW and do nothing to it, is it still being compressed or converted when published?

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

www.cleetche.com
User: Milo L. 11 years ago
It definitely compresses and changes the image. What's the best solution?
User: Roddy 11 years ago
Have you tried doing what I suggested in my previous post?

Anybody who is into visual arts and wants to create a website needs to learn a little about image manipulation and insertion into an HTML doc. There's no magic to this. EverWeb doesn't know how you want the image to look - you need to tell it!

-------------------------------
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: Milo L. 11 years ago
Roddy, you're creating a hostile environment in these forums. You should kindly say "No, I don't know the answer to your question" and stop attacking people. You've lost credibility with your combative non answers. We're looking for help here so please stop.
User: Christopher 11 years ago
Milo, I understand your frustration but Roddy is hardly creating a hostile environment. He's a web genius and we're all lucky to have him on these boards!

Getting back to the issue, it appears that the images are being treated like external files when used by the Image Slider - so no manipulation or compression there. At least in my case. But all my other files, whether resized or not, are having duplicates made of them with numbers added before the extension (poster@2x-22@2x.jpg for example). This came as a bit of a surprise to me. The file sizes are even larger than what I started with. If this is the case, then surely EW should be offering an <img> tag widget for the photogs in our midst. At least in my opinion. Until then, just follow Roddy's instructions. It's easy! That's the beauty of EverWeb. You can inject code for anything.

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

www.cleetche.com
User: Milo L. 11 years ago
Here is one of the websites from 'Customers Websites' section. He is very talented!!! This is not a knock against him in any way!
So the images at the header and footer have that softened look. This seems to happen sometimes and not other times with the same images used? Resized images are ending up sometimes soft and blurry.
John Easterlin
User: Paul-RAGESW 11 years ago
A few things;

1. If you are finding your images are not looking right in EverWeb, do not just use a widget. Obviously we want to fix these things and switching to a widget is not only inconvenient, but it doesn't help us fix this. I apologize for these issues you guys are having, and would like to get them fixed, or clarified ASAP. I am not sure at this point if all of your issues are the same, if it's a bug in EverWeb, or if a feature is being used incorrectly.

2. I think what is happening for some users is their JPEGs are being converted to PNGs. This was adjusted somewhat in version 1.6, but perhaps we missed some of these fixes.

3. For other user's a JPEG is being saved at 80% quality. We can put in an option to adjust this quality. I can do this ASAP because it is an important feature. That could be the compression people are seeing.

4. If you put in a large image and resize it to be smaller, the quality will be affected. This would be true mostly for very large images that are resized much smaller. If you find there is a big change in the quality, or that other programs can resize the images without any significant loss of quality, then this is a bug in EverWeb. We do not want people to have to use a third party tool to resize their images. EverWeb should do this properly for you, but please have realistic expectations. Resizing images will always affect quality, it is just a question of how much. If another program can resize it better than EverWeb, I want to know so we can build this right into EverWeb.

5. If you are seeing these compression issues, please upload your website project to dropbox.com, or another file sharing website. Then send us a support email with the subject 'Image Issues - Paul'. Be sure to specify which page and which images you are having the issues with so I can be sure I solve the correct issue for you. I want to get these issues fixed for you guys ASAP.

Again, I am sorry for these issues. I hope to have them addressed for all of you as quickly as possible.

Thanks,

-------------------------------
Paul
EverWeb Developer
User: Paul-RAGESW 11 years ago
IMPORTANT: Please indicate whether or not you are using 1.7 beta or 1.6. This appears to be a bug in the 1.7 betas where the retina version of the image is not properly being used. If you are using 1.7, we are working on fixing this issue now.

-------------------------------
Paul
EverWeb Developer
User: Paul-RAGESW 11 years ago
UPDATE: I believe this issue was related to a problem in 1.7 where code was left out and it didn't display the retina version of the image.

Very sorry about this and we will have an update that fixes this, as well as allows you to adjust the quality of JPEG images in the Preferences.

This is why we beta test :)

Sorry again for the inconvenience.

-------------------------------
Paul
EverWeb Developer
User: Christopher 11 years ago
Hi Paul,

Thanks for the explanation. Your desire to continue improving this app and attention to detail and quality is clearly evident.

First a question:

I'm still using v 1.6. I haven't noticed any quality degradation in photos. However, responding to this thread made me look at things a little closer. I'm working on a mobile site now with a width of 400px. Some of my pics are therefore 800 wide using the @2x extension. I've gotten into the habit of simply using the 2x photos since most smart phones have hdpi screens. Is this alright, or is it advisable that I import both photos and insert the 400px instead?

As for resizing:

I've discovered that jpg duplicates are being made of all my photos regardless of whether they're being scaled in EW. One photo for example is 183 KB. I didn't resize it all or add any shadows or anything. When published, the same photo now has a -22 added to the end (image@2x-22@2x.jpg) and is now 299 KB. I can also confirm that the same is done for photos which are resized. So essentially, duplicates are being made of everything. While jpg at setting 8 doesn't degrade the photo in any real discernible way (especially on a phone), the file size is larger than I'd planned for. This is why I think it's better to use external editing apps for photos. It's not that they're going to produce better results over EW (presumedly). Rather, it lets us manage the quality and size of each image before import.

I suppose if I were to just import giant pics, it would be better to let EW do all the resizing and compression 'cause then it only happens once. But I'd also like it to only happen once if I do it myself externally – meaning not at all within EW.

1. So why does EW duplicate every jpg?
2. If a photo is resized in EW, can EW not just apply those metrics to the html/css rather than duplicating the image?

Thanks again for all the hard work you guys are doing!

Last edit 11 years ago

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

www.cleetche.com
User: Paul-RAGESW 11 years ago
Quote:
"I'm still using v 1.6. I haven't noticed any quality degradation in photos."


Yes you won't because it appears that 1.7, which changed the way images are added to your page, wasn't showing retina image.

Quote:
"Is this alright, or is it advisable that I import both photos and insert the 400px instead?"


EverWeb will create a non retina version if you don't have one when you publish your site.

Quote:
I've discovered that jpg duplicates are being made of all my photos regardless of whether they're being scaled in EW.


It won't duplicate them. The number you see in the file name is not the number of images there are, it's the order index number (adjusted by using the Arrange menu). It ensures image file names are unique, even if you use the same image twice on a page.

Quote:
While jpg at setting 8 doesn't degrade the photo in any real discernible way (especially on a phone), the file size is larger than I'd planned for.


In addition to setting the JPEG export quality within EverWeb's preferences another reason image file sizes are larger is because EverWeb is including the color profile information within the image. If you recall months back people were complaining that there images looked different after publishing. This is because they didn't include an color profile. Now they do and this is required on websites to make sure all images look consistent in all browser and operating systems.

We added an option to not use the Color profiles but images are still coming out larger. I am not entirely sure why at this point.

Quote:
This is why I think it's better to use external editing apps for photos. It's not that they're going to produce better results over EW (presumedly). Rather, it lets us manage the quality and size of each image before import.


We're working to improve this and I don't think you get better quality at this point. You will get a bigger file size, but this won't be changed even if you do the resizing outside of EverWeb (and is inconvenient). We are still working on the file size issue to see if we can bring it down, or find out what is causing images to be much larger.

Quote:
1. So why does EW duplicate every jpg?


As noted above, it isn't duplicating them, it just may appear that way.

Quote:
2. If a photo is resized in EW, can EW not just apply those metrics to the html/css rather than duplicating the image?


It could, but then we would get people complaining that the images are too large when exporting. I am still investigating and will hopefully have a better solution.

Just a few notes;
1. The quality issue mentioned in this thread was for retina images in version 1.7. This is fixed
2. The number in the image names (i.e. imagename-22.jpg) will no longer be used in the next version of EverWeb, unless you are using the same image more than once on a page.
3. The next beta of version 1.7 will have an option to not include the color profile, along with the option just implemented to specify the JPEG image quality in the preferences. This does reduce the file size a little more
4. I am still investigating the file size issue here

For anyone using version 1.8 and suffer from the blurry images on this thread, please download beta 15 and see if you still have these problems.

-------------------------------
Paul
EverWeb Developer
User: Roddy 11 years ago
There are basically three methods of inserting "retina" images on a smart phone site.

In the case of your 400px wide site…

[1] Do Nothing - Use the 800px wide image and insert it with a widget or using code entry via an &lt;img&gt; tag.

[2] CSS - Insert the image as a background image by dragging it straight onto the design canvas. The downside to this is that it is useless for SEO.

[3] Javascript - Insert the image using an <img> tag, supply an @2x image and include the retina.js. The main disadvantage is that both images need to be downloaded - first the image and then the @2x.

Method [1] is the best for a smart phone website - particularly if you insert the image using an HTML5 figure element with title, alt text and caption…

http://everwebcodebox.com/html5/design/seo.html

-------------------------------
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: Dmitri Z. 11 years ago
Images still have a very low resolution / blurry look when I preview my webpage, even in latest 1.7 beta (downloaded today).
User: Paul-RAGESW 11 years ago
Quote:
Images still have a very low resolution / blurry look when I preview my webpage, even in latest 1.7 beta (downloaded today).


Yes, it was re-boroken in 1.7fc1 but fixed for the next update. Just finishing up another issue before publishing a new version.

-------------------------------
Paul
EverWeb Developer


Post Reply
You must login or signup to post.