Exporting design assets for web - File types & optimization
Вставка
- Опубліковано 4 сер 2024
- A lesson in different file types and optimizing image exports for web design. Please remember to subscribe bit.ly/1aE5UOT
Things get nerdy today as we chat about why it's important for the image assets you're building in to a website (or passing on to a developer to use) should be as small as possible without compromising on quality. Basically, smaller files mean faster loading times. Which means happier users! In this video I show you some best practices for exporting three different file types: .svg, .png and .jpg, and I also walk you through when it's best to use each one.
Hopefully this video is useful!! If you've got any questions then please feel free to ask them in the comments.
Image optimization tools shown:
SVGOMG: jakearchibald.github.io/svgomg/
ImageOptim: imageoptim.com
Tinypng: tinypng.com/
Design software used:
Sketch: www.sketchapp.com/
Photoshop: www.adobe.com/products/photosh...
-----------------------------------------------
// ENJOY MY VIDEOS?
My videos no longer have pre-roll ads because I think ads are annoying. That means you don't have to sit through ads, and it also means I don't earn anything from the content I put on UA-cam. If you want to support me and my channel the best thing you can do is order something from my online store! I make t-shirts and printed products and you're bound to find something you like :)
Check it out at: linernotekids.storenvy.com
-----------------------------------------------
// ABOUT ME
Hello there! I'm Charli and I'm a web and graphic designer from New Zealand currently living in London and posting videos every Saturday about design, fashion/beauty and DIYs and vlogs every Tuesday here on CharliMarieTV. Please subscribe and say hi in the comments so we can be friends :)
-----------------------------------------------
// MORE
Blog: www.charlimarie.com
Online apparel store: linernotekids.com/
Design portfolio: charlimarie.com/portfolio
Podcast: designlife.fm
// SOCIAL
Twitter: / charliprangley
Instagram: / charliprangley
Facebook: / charlimarietv
Snapchat: charlimarietv
My sister SmayJay's channel: / frangisamme
-----------------------------------------------
// MUSIC & TECH
My gorgeous intro animation was created by hand lettering animator Austin Saylor, you should hire him to do yours too: www.austinsaylor.com/
I'VE BEEN LOOKING FOR VIDEO LIKE THIS FOR 6 MONTH! thank you, it's a diamond.
This video is GOLD! Thank you for creating it, def sharing it with my community.
Great video, will check out imageoptim and svgomg now. I agree with the tinypng comment about having to drag it back to your designated folder, that's what I use now, so I''m glad you showed us the options.
Keep up the good work.
You've managed to explain the tricky business of exporting design assets without confusing your audience. Other videos on this subject seemed too technical to me. Thanks for simplifying things for us ... I'm going to check out your channel.
I needed that so much! Thank you! Keep doing what you do and I'll keep watching and liking and sharing! :)
This is really amazing I had no idea about SVG. As I am mostly self taught and Didn't learn that in E-media back in the day. Love watching your videos Charlie.
This was so useful for me. I have learned a whole lot about the different types of files and how to compress them.
This is so useful, thank you! I'm always amazed that you do this for free on UA-cam!
+Lys A I know one day the karma will come back to me! :)
Thank you! I was going through several videos that were twice as long in and did not cover as much ground as you did when it came to exporting assets for web.
SVGOMG looks super handy, thanks for sharing!
another brilliant video charli! keep it up 😊
This was incredibly helpful. I knew images needed to be small but it's been so long since I actually put this stuff to good use. The images on my website are probably way too massive as a result. My first two years as a designer were at a newspaper doing print work so that might be why.
Really useful webtools, thanks for sharing!
This video was very, very, very useful! Thanks :)
Great video this is sooo helpful. I didn't know that you can change the colour of SVGs using code. I will need to look into this image optimize websites and tools very useful!
I learned so much from this thank you charlie! ❤
Great video! Easy to understand. Thank you.
I feel like you should teach a class in my Design School hahaha Seriously, some of my teachers are really boring, but you teach it in a way that makes it fun and interesting!
+justBorja I would seriously LOVE that someday! It's my dream to be invited to guest lecture at design schools.
My artboard is made on an iphone 7 and every size i try to export it in xcode the image turns blurry or pixelated. Can you tell me the 3 sizes im supposed to export it at? the simulator im using in xcode is also the iphone 7
Didn't know about imageoptim for further compression...awesome video!
glad you found it useful Khoi!
Thanks for the tinypng tip!
Great tips! Thanks!
Very useful! Thank you
Great stuff, your tips are alway useful.
+Max Ma glad you find them useful Max!
ah, great info. super helpful! thank you, charli!
glad you found it useful!
This is well edited and so refreshing. Thank You!
Off topic but what hair dye colors do you use?!?!?! The purple is beautiful on you!
Pro tips:
- PNGs can be much much smaller then JPGs when the content is flat/graphical content (icons, logos, buttons etc). But they will be much much bigger with photo content or repeated color differences. A great option when svg doesn't fit the bill like a huge infographic. It will turn out much smaller the a JPG.
- A dark image will weigh more then a light image (sometimes twice a over).
- The legacy save for web and new export layer in Photoshop let you see the export sizes before the fact. You can test it.
- If you're on Photoshop, and the layer is something with few colors and flat, try exporting it as PNG8 instead of PNG24. It can make a huge difference in size. Sometimes even 5 times smaller then the universal default of PNG24.
+SetThoseDucksFree thanks for adding these tips :)
@@charlimarieTV so if we want to save Infrographic should be save for web as .png? while Image/Photo should be save for web as .jpg?
Great vid, thanks for sharing!
+Photonerds University thank you for watching!
Very useful, gracias! :)
Amazing ! Thanks
soooo useful thanks
Loved today's video! very useful :)
Have you ever used affinity software? What's your opinion on it?
You're so pro. I can feel you're speaking from experience. You did it a thousand of times. You own it!
I'm one of the 'silent subscribers'. So.. Hello, Charli!
Now that you're learning to code, will you make a video about using the different types in html too? :D
Totally agree
Hey Charli! Thanks for all the helpful videos! Just getting into prototyping. Do you recommend Sketch over Adobe Xd? Thanks!
Hi Charli, this might sound like a vague question but anyway - sometimes when I export a png of an icon I made in illustrator at 72ppi for web and at whatever the required dimensions were for it, the result doesn't seem to be quite as sharp as the vector was in illustrator
...I've played around with anti aliasing and stuff but the result seems to be an image which just isn't pin sharp
Would be great if you could provide any ideas/suggestions if you have time
The .jpg file tip was amazing...
Thanks Charli....
I agree with the other viewers...you should really start teaching in design schools :)
You are the best teacher I've encountered on most tutorials. Do you have any tips on transferring Sketch files to html and css?
that's such high praise! thank you Catherine :) it's not really a case of 'transferring' the files as such as building the site as you would if the design has been created in any software, as you're not designing in code in Sketch. so no tips for that sorry! I'm still learning to code myself.
LOGGED in youtube especially to give you a thumps up and comment. Thanks for the valuable information. helped me a lot exporting from Sketch and upload to Behance. But got bummed to know Behance doesn't accept SVG files
ImageOptim
very helpful
Thanks for this!!
+juliana ferreira you're welcome!
super useful! I'm ashamed to say I didn't know these compressing sites existed but I'll be sure to check them out when I need it next. resizing images is such a boring process...
Hi! thanks so much for the tips, I like your videos a lot. I have a doubt, how I can export a complex logo with gradients in SVG without becoming a mess for the programmer. Thanks.
Hey Charli, one thing i am a bit confused about is - if we have two versions of an image (1x and 2x), why would we even bother to use the 1x one if the 2x will have better quality anyways?
Im currently working on a product page design in sketch, so I have pictures of models wearing clothing. So to get better quality I would export each image at 2x right? But then Im thinking why would i even keep the 1x
Also, why do you shrink the jpg but then make it double the size? Wont that just create the same result as?
Yup, this is really solid, exactly what I've done after 15 years of trial and error, wouldn't change a thing. You could of made that PNG asset a JPG though, since it's a solid purple background, doesn't have to be a PNG unless you plan to have that background color change :)
Any tips for implementing these best image practices into a Wordpress theme for someone who does not do a lot of coding? I know sometimes the same image works for both a hero image of a blog as well as the smaller thumbnail on the blogroll.
Hey Charli, say you have a bitmap let's say 1000 x 1000 px, if you want to create a png (let's say in Sketch) do you need to create the image at 2000 x 2000px to be able to export a X2 asset??
Hello, I'm brand new to sketch 3 and am designing my very first functioning website using meteor/react. I've already exported a few symbols that I've used for tab icons and such, so I'm getting the gist of it, but I still haven't 100% grasped what sketch 3 is fully for! I use balsamiq for wireframing, and I understand how sketch is a step up for clients to see a finished product design, but other than that, is it good for much else?
I guess I'm wondering if I should only be using exports for pictures/backgrounds/icons, and the purpose is to save css design time or easily add photos, OR if I should be exporting full pages,
Thanks for your time!
+dorrito Sketch is about design rather than development! So it’s purpose is to help you design a page not build it. Perhaps it’s not necessary for you if you prefer to jump straight into building a page. As a designer I spend a lot of time on the design of a page and get it fully confirmed before I start building. So that is why I use Sketch.
Thanks for giving a concise reply! Great vids.
Generaly jpegs are suitable for photos and pngs for images with bigger areas of the same color such as text, logos etc. If you use a jpg for a logo or text the edges can get distorted and fuzzy. Thanks for the optimisation tips!
Your vlogs are SO helpful. Thanks CharliMarieTV !
Does anyone know what format I should ask a designer to SEND me files in, so that I can easily add them to Sketch App? I am loathe to end up with 40 pages worth of SVGs that I need to rearrange all over again! I did the wireframes, she is doing the final design, then I need to turn the wireframes into final designs that are InVision freindly.
SVGs are the blood of my vector work.
Hi there, I dont know if you can read me and help me out, im trying to export my tv design in zeplin of 1080x1920 reso, is an android project and the dev told me that he need a more accurate canvas to see the correct paddings for the tv, can you help me out?
Hello Charli! First things first; I love your channel and podcast! And I therefore was wondering if you could maybe help me with something. I am applying to design studies at the moment, and they all have entrance exams. One of the assignments is to design a search engine, not code it, just design. Problem is; I have never done this before, so I am not sure how I should create the deliverables? The designs I figure should be made in Illustrator, or perhaps Sketch like you recommend, but should the full-page designs then just be exported as jpegs and delivered that way? Perhaps create mock-ups of them on a computer screen? Or is there a way I can be sure that the end recipient can view them in a browser? Should I include all the assets I created and used as separate files? I am so unsure! I would love to hear your thoughts on this, after all I really want to deliver my designs according to the industry standard, to impress as much as possible. Thank you for continuing to share so much great insight through your youtube channel and podcast!
This is tough to answer because it really will be up to the school and what they're expecting. I suggest asking them some more questions! But from what you've said I would design the site and then export as jpeg and create a project in Invision (you can have one project on the free plan!) and upload it there. then you can send a link to it and it will load in the browser :)
Thanks Charli! I appreciate that. :)
Hello, I like your tutorials. :) It is very useful and i learned a lot. Could you record tutorial about that how you choose colors for projects, which tools using to choose to make right choice which color scheme you will use. Thank you :)
I'll add that to my list :)
do you know a program equal or close to Photoshop?
it depends on what you're looking to do with it! tell me what you're trying to do and I can try suggest a different option :)
Is sketch available for windows? either way, I quite like using Inkscape. didn't know about OMG SVG so thanks
No, sketch is only for Mac.
Tahirul try Affinity Designer. It's recently come out of beta for Windows, and it's just as good as Adobe Illustrator.
hello, what design program do you use?
the programs shown in this video are Sketch and Photoshop :)
CharliMarieTV Thank you for your reply!
Thank you for this helpful video!! it cleared up so many things. I also have a question that requires a lengthy answer :p would you able to give an email I can contact you at? or it's better to post my question here? whatever you're comfortable with
The file size difference between PNG and JPEG is not because of the alpha transparency support in PNG, but because PNG uses lossless compression whereas JPEG uses lossy compression.
Ur perf
Love your videos Charlie. But unfortunately SVG is not usable by all browsers. Can't wait for it to be a standard though! Loved the scaling tips thank you!
+Ashley Handley yes great point! I forgot this as the company I most recently worked at decided to stop supporting the older browsers, and modern browsers support svg :) even so, for older browsers we just used to have a png fallback!
CharliMarieTV ahh! PNG fallback. Great idea! Everyday is a school day!
+Ashley Handley right!? I love that with design the industry and best practices are always changing, so we're never done learning!
What's the diff between Sketch and Photoshop? What are the benefits of Sketch vs Photoshop, etc
i've done a Sketch 101 video you should check out to hear my thoughts on the differences between the two! sketch is made for designing websites, photoshop is designed for creating graphics.
I feel like if you ever see how I save my images and stuff you're going to have a heart attack 😂
Me too! Learned so much from this video!
Can we save all web assets in png format from sketch in one click??
I'm gonna be designer just like you
Slightly too fast and caffeinated speech...I,m only able to follow you however the novices are left in dust...
+Miron Swyst turn on captions and perhaps you’ll have an easier time understanding my accent :)
CharliMarieTV I get you accent, n.p. It’s just slightly , seems sped-up in your edits I’m guessing..?
+Miron Swyst nope! This is exactly how I regularly talk :) New Zealander’s are known to talk fast tho!
you are talking too fast
I upload subtitles to my videos! Feel free to turn them on as it may help you to understand my accent/the way i talk :)
CharliMarieTV ... Thank you, that will be helpful
The .jpg file tip was amazing...
Thanks Charli....
I agree with the other viewers...you should really start teaching in design schools :)