Hello RW Community- Wow, been using RW for a very long time and sort of digging this new forum. Neato.
Ok, can people provide some tips, tricks, and guidance for making graphics clean using RW and Stacks? It seems like all the graphics I create look fuzzy. I’m creating nice jpegs, but they just don’t look so great once in RW.
So, what are the best formats, compression settings for quick load, resolution, etc…
What are your top 3 tips for creating great graphics?
Thx!
I think it is easier to tell you what not to do than what to do. Can you tell us what is your workflow while creating graphics and placing them within your RW project?
Hi Rovertek-
Thx for the response. Very basic flow.
For the most part, I use Pixelmator and export as jpg ~80%. Unfortunately, this goes for images that have text as well.
One of the biggest challenges I have is that the header graphic is quite large (1920x400). This creates a very large file size. Thus the reason for going with jpg since gif looks terrible.
Does this help guide you?
For sure look into getting JPEGMini, a great app! Then export from Pixelmator at 100% and let JPEGMini compress it for you.
There’s a lot of approaches to preparing graphics (especially pixel-based) for presentation on the web. One of them is what zeebe suggested. Pixelmator has a good reputation, but I’m not familiar with it. I use Lightroom and Photoshop.
There is one rule of thumb: you have to find a balance between image quality and the “weight” of the file. That balance depends on what is more important to you: quality or light weight of your project. Photographers want high quality and they look at this differently than bloggers or others, who may even opt for a GIF format instead of JPEG, because for them quality takes a back-seat to space and speed. Anyway, always export photos at 100% image quality if you want crisp detail/text contained in them. If it is possible, completely avoid embedding text in your photos.
Another rule: if your photo is in JPEG format, do not try to open it in an editor, make adjustments and save it. Every time you do that, you loose quality. First time, it is a small difference, but if you do that repeatedly to the same image, you will loose more and more quality every time you save it.
And another one: if you need as high quality of image as possible, do not make an image of smaller size (dimensions) than it is supposed to appear on screen. That is especially important if your photos contain text. Let RW present them at their original size.
And last but not least, if you want your photos look great on Retina screens, make them of the appropriate resolution (144 ppi instead of 72 ppi) – that, of course will make your images twice as heavy, but the visual effect (only on Retina) is very appreciable.
I wish you luck in your visual pursuits…
Thanks @Rovertek, just save this info to Evernote.
Thank you @Rovertek - Great information.
BTW- Thanks for the tip @zeebe - I just gave JPEGMini a try and the 1920 image was 1/2 the size as the 1500 image. Looks very sharp. Don’t know what JPEGMini does, but it works well.
Glad to help you out! Not sure what it does either, but it is well worth every penny!!
If you have photographs, then all the advice already given is great. But if you have some graphics that are only text, or only text and simply graphics (circles, boxes, etc.) then you may want to consider creating SVGs. SVG (or scalable vector graphic) is a great format, typically about 10% of the size of an equivalent JPG, and looks crystal clear on any screen. What a deal!
But … SVGs with photos don’t mix. Pixelmator won’t save as SVG because it is intended for bit-mapped (or photographic) images. Adobe Illustrator, iDraw, and Affinity Designer are 3 examples of apps that will create SVGs. So if some of your images are more of a “graphic” or “illustration” design then you may want to consider the SVG approach. (Put differently, there’s a good reason both Adobe Illustrator and Photoshop exist: one for vectors, one for pixels).
Thanks @Mathew - I remember you posted a great set of graphics applications you prefered on a previous post I made about your top RapidWeaver application recommendations (that is now deleted with the forum change). I remember you talking about SVGs in there as well.
Thanks for the tip.
@Mathew – Thanks for that info, as well. As a photographer, I deal with pixel-based images 99.9% of the time. But it is good to know what’s the best treatment for vector-based illustrations when the time comes to create them…
Thanks to you both. A little app I got a few months ago and has proved invaluable (for me) is: Image Vectorizer. I use it almost solely for dealing with hand-drawn illustrations (B&W). Instead of creating a PNG or JPG from the scanned illustration I now create a small, scalable, SVG. It can add a nice touch to some websites if hand-drawn approaches are appropriate for the content or style.
I forgot to add some remarks regarding preparing photos in image editors. This is a general consideration, independent of which particular editor you use.
There are several factors that – in combination or individually – affect the “weight” of a JPEG file. So, if you are editing a specific image, you can make it more or less heavy, if you adjust its characteristics, such as:
So, if you can make your photo look less than perfect, you can save a lot of “weight”. These are probably characteristics that apps such as JPEGMini manipulate in order to get as small file as possible.
P.S. I edited these 5 points to make my statement more clear.
Don’t forget the ImageOptim app which is great for image compression and it’s totally free!
ImageOptim is great, but it is only for PNGs, just an FYI to anyone wanting to use it.
Wondering how JPEGMini compares with Photoshop Save for Web. Curious if anyone has done a comparison test.
A bit old but interesting (and I am sure I found this on this forum bit can’t find the thread anymore):
http://photokaz.com/2012/06/image-compression-for-the-web/
Dave
Yes, I did actually in fact read that article. And the conclusion is thumbs up to Photoshop.
Nevertheless it was written three years ago. Still valid?