[{"data":1,"prerenderedAt":91},["ShallowReactive",2],{"storyblok:blog\u002Fadvanced-image-handing-for-my-portfolio:version=published&resolve_relations=blog-entry.categories":3},{"stories":4,"story":5},[5],{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":81,"full_slug":82,"sort_by_date":34,"position":83,"tag_list":84,"is_startpage":85,"parent_id":86,"meta_data":34,"group_id":87,"first_published_at":88,"release_id":34,"lang":89,"path":34,"alternates":90,"default_full_slug":34,"translated_slugs":34},"Advanced image handing for my portfolio","2022-06-20T17:45:16.722Z","2022-07-08T19:39:13.968Z","2022-07-08T19:39:13.986Z",152916337,"73ccdac1-9921-4b1a-8d39-d78756676b87",{"_uid":13,"date":14,"content":15,"component":78,"categories":79},"9abda603-dad4-46fb-92e0-093c8a0f469c","2022-05-26 16:51:38",[16],{"_uid":17,"text":18,"component":26},"40dcddc4-02b3-4f6c-a57e-6d6eb324c928",{"type":19,"content":20},"doc",[21,37,53,60,64,71],{"type":22,"content":23},"paragraph",[24,27,35],{"text":25,"type":26},"To make my site load a bit quicker, I have decided to add more advanced image handling. This will be in two parts: using ","text",{"text":28,"type":26,"marks":29},"Imgix",[30],{"type":31,"attrs":32},"link",{"href":33,"title":34},"https:\u002F\u002Fimgix.com\u002F",null,{"text":36,"type":26}," to render the images in the best way possible and the other being a media handling plugin that will return an image that is automatically formatted (from imgix based on the users' device) and in an appropriate size. A small addition to this that has already been implemented is \"loading=lazy\" on all images which will make the images lazy load on supported browsers (everything except for IE11).",{"type":22,"content":38},[39,41,43,45,51],{"text":40,"type":26},"Imgix:",{"type":42},"hard_break",{"text":44,"type":26},"I have used Imgix previously so implementing it won't be that much of an issue. I will mainly use the ",{"text":46,"type":26,"marks":47},"auto=format",[48],{"type":31,"attrs":49},{"href":50,"title":34},"https:\u002F\u002Fdocs.imgix.com\u002Fapis\u002Frendering\u002Fauto\u002Fauto#:~:text=When%20auto%3Dformat%20is%20set,image%20format%20for%20your%20user.",{"text":52,"type":26}," feature to make the returning image be the best format possible for the user and also setting the height and width to what the actual shown size should be.",{"type":22,"content":54},[55,57,58],{"text":56,"type":26},"Media handler:",{"type":42},{"text":59,"type":26},"This will be a plugin in nuxt that will have a method for inputting an image, a size\u002Fratio, and then returning the most perfect image ever.",{"type":22,"content":61},[62],{"text":63,"type":26},"Since I am using nuxt-ts and composition API the code for the plugin is as follows:",{"type":22,"content":65},[66],{"text":67,"type":26,"marks":68},"import { Plugin } from '@nuxt\u002Ftypes'; declare module '@nuxt\u002Ftypes' { interface NuxtAppOptions { $toMediaUrl(slug: string, args: MediaArguments): string } interface Context { $toMediaUrl(slug: string, args: MediaArguments): string } } interface MediaArguments { maxHeight: number; maxWidth: number; skipAutoFormat?: boolean | undefined; } function toMediaUrl(slug: string, { maxHeight, maxWidth, skipAutoFormat = false }: MediaArguments) { const qs = []; if (maxWidth) { qs.push(`maxWidth=${Math.round(maxWidth)}`); } if (maxHeight) { qs.push(`maxHeight=${Math.round(maxHeight)}`); } if (!skipAutoFormat) { qs.push('auto=format'); } let imageUrl = `https:\u002F\u002Fsebbejohansson.imgix.net\u002F${slug}`; if (qs.length) { imageUrl += `?${qs.join('&')}`; } return imageUrl; } const mediaHandler: Plugin = (context, inject) => { context.$toMediaUrl = toMediaUrl; inject('toMediaUrl', toMediaUrl); }; export default mediaHandler;",[69],{"type":70},"code",{"type":72,"attrs":73,"content":75},"code_block",{"params":74},"",[76],{"text":77,"type":26},"import { Plugin } from '@nuxt\u002Ftypes';\n\ndeclare module '@nuxt\u002Ftypes' {\n  interface NuxtAppOptions {\n    $toMediaUrl(slug: string, args: MediaArguments): string\n  }\n  interface Context {\n    $toMediaUrl(slug: string, args: MediaArguments): string\n  }\n}\n\ninterface MediaArguments {\n  maxHeight: number;\n  maxWidth: number;\n  skipAutoFormat?: boolean | undefined;\n}\n\nfunction toMediaUrl(slug: string, { maxHeight, maxWidth, skipAutoFormat = false }: MediaArguments) {\n  const qs = [];\n\n  if (maxWidth) {\n    qs.push(`maxWidth=${Math.round(maxWidth)}`);\n  }\n\n  if (maxHeight) {\n    qs.push(`maxHeight=${Math.round(maxHeight)}`);\n  }\n\n  if (!skipAutoFormat) {\n    qs.push('auto=format');\n  }\n\n  let imageUrl = `https:\u002F\u002Fsebbejohansson.imgix.net\u002F${slug}`;\n\n  if (qs.length) {\n    imageUrl += `?${qs.join('&')}`;\n  }\n\n  return imageUrl;\n}\n\nconst mediaHandler: Plugin = (context, inject) => {\n  context.$toMediaUrl = toMediaUrl;\n  inject('toMediaUrl', toMediaUrl);\n};\n\nexport default mediaHandler;","blog-entry",[80],"36c5f0a3-3461-4b49-9758-537bdda01a2c","advanced-image-handing-for-my-portfolio","blog\u002Fadvanced-image-handing-for-my-portfolio",80,[],false,152811822,"8c450b6b-7bbf-41e5-beef-4ed66b3208b1","2022-05-26T16:51:38.000Z","default",[],1787062194958]