Viewing What's the best graphics file type for EW?

What's the best graphics file type for EW?



User: Bill R. 9 years ago
Coming over from iWeb, which was darn simple to have great looking graphics and photos without any problem. I have not been so lucky shifting to EW. I'm dealing mostly in commercial kitchens, some site photos and some are factory generated graphics of various pieces of equipment. In iWeb, I would convert everything to PSD files, drop them in, and, whatever conversion iWeb used, when visiting the site, the graphics looked crystal clear.

In Everweb, I have tried everything, but the same graphics look fuzzy and sophomoric online. Some things require transparency, so I'll convert to PNG. They look bad. I've dropped these in PSD and JPEG, sometimes being asked if EW wants to reduce the file size, which I usually agree. Everything just looks out of resolution. Probably not helping me is I review everything on a Retina screen.

I know file size related to load times. But this seemed to be such a piece of cake with iWeb. Now everything looks bad. What's the best practice and formats for EW? I obviously can use PS, but still can't seem the find the right method.
User: Paul-RAGESW 9 years ago
Name the image with the @2x before the extension so the file name is imagename@2x.extension where extension is png, jpg or psd or whatever in the assets list.

iWeb didn't do this, your images would look just as fuzzy on your retina your Mac in iWeb. Everweb adds support for retina images so that they don't look fuzzy if you follow the above advice.

You should only use pngs for images that use transparency and jpegs for everything else. Don't use psds. In fact 1.8 has the option to auto convert psds to pngs or jpegs.

Last edit 9 years ago

-------------------------------
Paul
EverWeb Developer
✔ Best Answer  
User: Bill R. 9 years ago
Whoa! I don't know where I missed that tip. But, for me, it was kinda like watching The Wizard of Oz for the first time as a kid where it went from B&W to Color.

The obvious thing is I need to rename a lot of graphics files. Is there a more practical way to do this internally through the resource center. Or, do I just batch rename the original files, and go back to every one, re-import them over?

Thanks,
Bill Rzasa
User: Paul-RAGESW 9 years ago
You should rename them in the assets list.

Do not remove them and reimport. That will require reassigning them all to each object.

We are working on ways to improve this though but don't have a release date for it.

-------------------------------
Paul
EverWeb Developer
User: Gregory K. 9 years ago
For those trolling the forum to glean nuggets of information, this was an excellent question with a clear concise answer. Thanks Paul, Bill.
User: Steven D. 9 years ago
Quote: Paul-RAGESW - 13/03/2015 13:21:57
In fact 1.8 has the option to auto convert psds to pngs or jpegs.


What do you mean, 1.8? I'm using 1.7.5 - the latest version.
User: Paul-RAGESW 9 years ago
1.8 is the next version that is currently being beta tested. It can be found in the Announcements section of this forum.

-------------------------------
Paul
EverWeb Developer
User: Steven D. 9 years ago
Thanks. If I size a photo on the page, will it be reduced (pixel size) when uploaded? I don't understand how to size an image for final output.
User: Steven D. 9 years ago
Quote: Steven D. - 06/04/2015 12:21:45
If I size a photo on the page, will it be reduced (pixel size) when uploaded? I don't understand how to size an image for final output.


.. or do the photos have to be sized correctly prior to placing on a page? iPhoto had a way of downsizing photos when put there. And iWeb resizes photos when changed on the web page. Is that not the case here?

- Steve
User: James G. 9 years ago
I resize mine outside of EW. It took a bit of fiddling to get them to display correctly. You want to resize 2 images. EW handles Retina images using a @2x at end of image name. If I want an image to be displayed at 400px wide, I make 1 image 400px and another at 800px and add the @2x to end of name of double size one- image-name.jpg and image-name@2x.jpg. EW will display the one that is correct for the browser being used as long as both are in Assets.
User: Steven D. 9 years ago
Quote: Jim G. - 07/04/2015 17:33:18
You want to resize 2 images. EW handles Retina images using a @2x at end of image name.


What happens if I don't make the larger files? I don't really want to make large files available on the site.
User: James G. 9 years ago
Anyone with a Retina or HD display will get fuzzy images. You could try putting up only @2x images and see how it goes.
A confession: I USED to do 2 images, now I just put up 1 at a @2x size, without the @2x extension and images look fine for me, but my images are not for photography, just snapshots that go with something else. My image sizes tend to be 40kb to 300kb, trying to get them all under 150kb. My mobile site has very few images, just what is included in a story. My desktop site has galleries, and I set those to open in a new tab in case someone has a slow connection or system, they can continue to look at things until a gallery loads.
User: Paul-RAGESW 9 years ago
Quote:
Thanks. If I size a photo on the page, will it be reduced (pixel size) when uploaded? I don't understand how to size an image for final output.


You make an image that is the exact pixels that you want it to be in on your website and you make an image that is twice the size that you want it to appear on your site. (Note that you can not scale a smaller larger to be larger as that defeats the purpose)

But all you really have to do is include one image that ends with @2x before the extension that is at least twice the size of how you want it displayed on your site and EverWeb will take care of everything for you.

Quote:
What happens if I don't make the larger files? I don't really want to make large files available on the site.


You should want the larger sized images on your site, otherwise they will appear blurry when viewed on a retina screen.

-------------------------------
Paul
EverWeb Developer
User: Steven D. 9 years ago
Quote: Paul-RAGESW - 09/04/2015 6:34:22
Quote:


But all you really have to do is include one image that is at least twice the size of how you want it displayed on your site and EverWeb will take care of everything for you.





Photographers generally like to keep their images small to help prevent theft. Does EW have anything to protect the images?
User: James G. 9 years ago
Nothing within EW that I know of. There are various ways to keep people from getting images, but none that really work well. ANYTHING that goes up to a server can be pulled from the server. You can pay for DRM services that kind of work. The only thing that I have sen work is in medical apps on a mobile device that prevent screenshots. If you go with something like that; think carefully what pages have it and what does not. Like do not have it on a Contact page. On desktop, you can employ right-click preventers, but you then remove functionality. It kind of sucks, but watermarking them may be the best solution.


Post Reply
You must login or signup to post.