Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by Jasmin chang
Jasmin chang
3,342 Points

How not to compromise quality in the image in small size?

Hello This was my ultimate question from the very beginning. I am not professional but self-owner of wordpress site.

If I make the image size small, then the quality just go awful... If I keep size big in order to keep quality, then it is too heavy and it doesn't work in design works as it takes up too much space.

I see sites are using light but a high quality of images... How and what should I do? Could you please give me any advice?

Thanks,

Jasmin

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Do you have some examples you could post links to?

4 Answers

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi Jasmin,

SVG format (Scalable Vector Graphics) is good for icons and (most) logos. No matter their dimensions they remain crisp and small size (although to get the best possible quality out of them takes some practice and knowledge, more so than you can find here at Treehouse).

If you're looking to optimize photos for web then SVG is definitely not the file format you want. Keep to JPEG and PNG, perhaps GIF. You can tweak the image in photoshop. Just use the 'save for web' functionality and tinker around until you find a balance between size and quality that you like.

Hope it helps, Max

Jasmin chang
Jasmin chang
3,342 Points
Jasmin chang
Jasmin chang
3,342 Points

Hello Steven, Thanks for such quick response.

Unfortunately, it would be complicated to give you a link as I am currently working on Dev environment to give you access & I am working with page builder. Is it the only way you could give me your advise?

Thanks a lot, in advance

Jasmin

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

When you said "I see sites..." I expected these were sites out on the internet you could point to as examples of what you want to achieve.

joelearner
joelearner
54,915 Points
joelearner
joelearner
54,915 Points

Hi Jasmin,

There are many design courses on this site that talk about different graphics tools. Are you looking to adjust size for photos or logos or anything in particular?

For some objects, you can use the Adobe products such as Illustrator and Photoshop and save the graphic as an SVG file. The SVG type of file uses vectors and it is good for adjusting the size of the object while maintaining clarity. I don't know if it works for photos as much as logo type objects though.

There is also an open source program called GIMP that you can download for free. It is similar to the Adobe tools but there is no monetary cost. See if you can adjust your images with that tool.

If you find one you like, repost about what you found out so students like me can learn more about what is good out there.

Thanks :)

Jasmin chang
Jasmin chang
3,342 Points
Jasmin chang
Jasmin chang
3,342 Points

Hello @max Thank you so much!! It gave me a great hint and now I am making a good progress. Wonderful. Thanks a lot!

Jasmin